Also derive variables in URLs

scripts/postcss/css-compile-variables.js

@@ -43,17 +43,32 @@ function parseDeclarationValue(value) {
     const parsed = valueParser(value);
     const variables = [];
     parsed.walk(node => {
-        if (node.type !== "function" && node.value !== "var") {
+        if (node.type !== "function") {
             return;
         }
+        switch (node.value) {
+            case "var": {
                 const variable = node.nodes[0];
                 variables.push(variable.value);
+                break;
+            }
+            case "url": {
+                const url = node.nodes[0].value;
+                // resolve url with some absolute url so that we get the query params without using regex
+                const params = new URL(url, "file://foo/bar/").searchParams;
+                const primary = params.get("primary");
+                const secondary = params.get("secondary");
+                if (primary) { variables.push(primary); }
+                if (secondary) { variables.push(secondary); }
+                break;
+            }
+        }
     });
     return variables;
 }
 
 function resolveDerivedVariable(decl, derive) {
-    const RE_VARIABLE_VALUE = /--((.+)--(.+)-(.+))/;
+    const RE_VARIABLE_VALUE = /(?:--)?((.+)--(.+)-(.+))/;
     const variableCollection = parseDeclarationValue(decl.value);
     for (const variable of variableCollection) {
         const matches = variable.match(RE_VARIABLE_VALUE);

scripts/postcss/test.js

@@ -134,6 +134,31 @@ module.exports.tests = function tests() {
             const actualArray = compiledVariables.get("/foo/bar")["derived-variables"];
             const expectedArray = ["icon-color--darker-20", "my-alias=icon-color--darker-20", "my-alias--lighter-15"];
             assert.deepStrictEqual(actualArray.sort(), expectedArray.sort());
+        },
+
+        "derived variable are supported in urls": async (assert) => {
+            const inputCSS = `
+            :root {
+                --foo-color: #ff0;
+            }
+            div {
+                background-color: var(--foo-color--lighter-50);
+                background: url("./foo/bar/icon.svg?primary=foo-color--darker-5");
+            }
+            a {
+                background: url("foo/bar/icon.svg");
+            }`;
+            const transformedColorLighter = offColor("#ff0").lighten(0.5);
+            const transformedColorDarker = offColor("#ff0").darken(0.05);
+            const outputCSS =
+                inputCSS +
+                `
+            :root {
+                --foo-color--lighter-50: ${transformedColorLighter.hex()};
+                --foo-color--darker-5: ${transformedColorDarker.hex()};
+            }
+            `;
+            await run( inputCSS, outputCSS, {}, assert);
         }
     };
 };