From 0a186dd11bc8fb7d14a76d7ad4a4efb753eb345b Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Fri, 25 Mar 2022 16:06:40 +0530
Subject: [PATCH] Fix css logic

---
 scripts/postcss/css-url-to-variables.js            | 11 +++--------
 scripts/postcss/tests/css-url-to-variables.test.js |  8 ++++----
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/scripts/postcss/css-url-to-variables.js b/scripts/postcss/css-url-to-variables.js
index dff72264..34d21bcc 100644
--- a/scripts/postcss/css-url-to-variables.js
+++ b/scripts/postcss/css-url-to-variables.js
@@ -34,13 +34,8 @@ function extractUrl(decl) {
         const urlStringNode = node.nodes[0];
         const variableName = `${idToPrepend}-${counter++}`;
         urlVariables.set(variableName, urlStringNode.value);
-        const varNode = {
-            type: "function",
-            value: "var",
-            nodes: [{ type: "word", value: `--${variableName}` }],
-        };
-        // replace the url-string node with this var-node
-        node.nodes[0] = varNode;
+        node.value = "var";
+        node.nodes = [{ type: "word", value: `--${variableName}` }];
     });
     decl.assign({prop: decl.prop, value: parsed.toString()})
 }
@@ -49,7 +44,7 @@ function addResolvedVariablesToRootSelector(root, { Rule, Declaration }) {
     const newRule = new Rule({ selector: ":root", source: root.source });
     // Add derived css variables to :root
     urlVariables.forEach((value, key) => {
-        const declaration = new Declaration({ prop: `--${key}`, value: `"${value}"`});
+        const declaration = new Declaration({ prop: `--${key}`, value: `url("${value}")`});
         newRule.append(declaration);
     });
     root.append(newRule);
diff --git a/scripts/postcss/tests/css-url-to-variables.test.js b/scripts/postcss/tests/css-url-to-variables.test.js
index 0369995b..fe4d4865 100644
--- a/scripts/postcss/tests/css-url-to-variables.test.js
+++ b/scripts/postcss/tests/css-url-to-variables.test.js
@@ -28,15 +28,15 @@ module.exports.tests = function tests() {
             }`;
             const outputCSS =
             `div {
-                background: no-repeat center/80% url(var(--icon-url-0));
+                background: no-repeat center/80% var(--icon-url-0);
             }
             button {
-                background: url(var(--icon-url-1));
+                background: var(--icon-url-1);
             }`+
                 `
             :root {
-                --icon-url-0: "../img/image.png";
-                --icon-url-1: "/home/foo/bar/cool.jpg";
+                --icon-url-0: url("../img/image.png");
+                --icon-url-1: url("/home/foo/bar/cool.jpg");
             }
             `;
             await run( inputCSS, outputCSS, { }, assert);