From 79f363fb9d9e4406daf65244419849cf422df1c4 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Wed, 9 Mar 2022 17:20:05 +0530
Subject: [PATCH] Move code to callback and fix alias code

---
 postcss/color.js                 | 14 ++++++++++++++
 postcss/css-compile-variables.js | 31 +++++++++----------------------
 postcss/test.js                  | 28 +++++++++++++++++++++-------
 3 files changed, 44 insertions(+), 29 deletions(-)
 create mode 100644 postcss/color.js

diff --git a/postcss/color.js b/postcss/color.js
new file mode 100644
index 00000000..cad91019
--- /dev/null
+++ b/postcss/color.js
@@ -0,0 +1,14 @@
+const offColor = require("off-color").offColor;
+
+module.exports.derive = function (value, operation, argument) {
+    switch (operation) {
+        case "darker": {
+            const newColorString = offColor(value).darken(argument / 100).hex();
+            return newColorString;
+        }
+        case "lighter": {
+            const newColorString = offColor(value).lighten(argument / 100).hex();
+            return newColorString;
+        }
+    }
+}
diff --git a/postcss/css-compile-variables.js b/postcss/css-compile-variables.js
index bd952ac8..bc91dc06 100644
--- a/postcss/css-compile-variables.js
+++ b/postcss/css-compile-variables.js
@@ -1,13 +1,11 @@
-const offColor = require("off-color").offColor;
 const valueParser = require("postcss-value-parser");
 
 let aliasMap;
 let resolvedMap;
-const RE_VARIABLE_VALUE = /var\((--(.+)--(.+)-(.+))\)/;
 
-function getValueFromAlias(alias) {
+function getValueFromAlias(alias, variables) {
     const derivedVariable = aliasMap.get(`--${alias}`);
-    return resolvedMap.get(derivedVariable); // what if we haven't resolved this variable yet?
+    return variables[derivedVariable] ?? resolvedMap.get(`--${derivedVariable}`); // what if we haven't resolved this variable yet?
 }
 
 function parseDeclarationValue(value) {
@@ -23,7 +21,7 @@ function parseDeclarationValue(value) {
     return variables;
 }
 
-function resolveDerivedVariable(decl, variables) {
+function resolveDerivedVariable(decl, {variables, derive}) {
     const RE_VARIABLE_VALUE = /--(.+)--(.+)-(.+)/;
     const variableCollection = parseDeclarationValue(decl.value);
     for (const variable of variableCollection) {
@@ -36,26 +34,15 @@ function resolveDerivedVariable(decl, variables) {
                     throw new Error(`Cannot derive from ${baseVariable} because it is neither defined in config nor is it an alias!`);
                 }
             }
-            switch (operation) {
-                case "darker": {
-                    const colorString = variables[baseVariable] ?? getValueFromAlias(baseVariable);
-                    const newColorString = offColor(colorString).darken(argument / 100).hex();
-                    resolvedMap.set(wholeVariable, newColorString);
-                    break;
-                }
-                case "lighter": {
-                    const colorString = variables[baseVariable] ?? getValueFromAlias(baseVariable);
-                    const newColorString = offColor(colorString).lighten(argument / 100).hex();
-                    resolvedMap.set(wholeVariable, newColorString);
-                    break;
-                }
-            }
+            const value = variables[baseVariable] ?? getValueFromAlias(baseVariable, variables);
+            const derivedValue = derive(value, operation, argument);
+            resolvedMap.set(wholeVariable, derivedValue);
         }
     }
 }
 
 function extractAlias(decl) {
-    const wholeVariable = decl.value.match(RE_VARIABLE_VALUE)?.[1];
+    const wholeVariable = decl.value.match(/var\(--(.+)\)/)?.[1];
     if (decl.prop.startsWith("--") && wholeVariable) {
         aliasMap.set(decl.prop, wholeVariable);
     }
@@ -82,7 +69,7 @@ function addResolvedVariablesToRootSelector(root, variables, { Rule, Declaration
 module.exports = (opts = {}) => {
     aliasMap = new Map();
     resolvedMap = new Map();
-    const { variables } = opts;
+    const {variables} = opts;
     return {
         postcssPlugin: "postcss-compile-variables",
 
@@ -93,7 +80,7 @@ module.exports = (opts = {}) => {
             later.
             */
             root.walkDecls(decl => extractAlias(decl));
-            root.walkDecls(decl => resolveDerivedVariable(decl, variables));
+            root.walkDecls(decl => resolveDerivedVariable(decl, opts));
             addResolvedVariablesToRootSelector(root, variables, { Rule, Declaration });
         },
     };
diff --git a/postcss/test.js b/postcss/test.js
index e67016b6..d07a6689 100644
--- a/postcss/test.js
+++ b/postcss/test.js
@@ -1,9 +1,10 @@
 const offColor = require("off-color").offColor;
 const postcss = require("postcss");
 const plugin = require("./css-compile-variables");
+const derive = require("./color").derive;
 
 async function run(input, output, opts = {}, assert) {
-    let result = await postcss([plugin(opts)]).process(input, { from: undefined, });
+    let result = await postcss([plugin({ ...opts, derive })]).process(input, { from: undefined, });
     assert.strictEqual(
         result.css.replaceAll(/\s/g, ""),
         output.replaceAll(/\s/g, "")
@@ -78,12 +79,25 @@ module.exports.tests = function tests() {
                 --foo-color--darker-20: ${transformedColor2.hex()};
             }
             `;
-            await run(
-                inputCSS,
-                outputCSS,
-                { variables: { "foo-color": "#ff0" } },
-                assert
-            );
+            await run( inputCSS, outputCSS, { variables: { "foo-color": "#ff0" } }, assert);
+        },
+        "multiple aliased-derived variable in single declaration is parsed correctly": async (assert) => {
+            const inputCSS = `div {
+                --my-alias: var(--foo-color);
+                background-color: linear-gradient(var(--my-alias--lighter-50), var(--my-alias--darker-20));
+            }`;
+            const transformedColor1 = offColor("#ff0").lighten(0.5);
+            const transformedColor2 = offColor("#ff0").darken(0.2);
+            const outputCSS =
+                inputCSS +
+                `
+            :root {
+                --foo-color: #ff0;
+                --my-alias--lighter-50: ${transformedColor1.hex()};
+                --my-alias--darker-20: ${transformedColor2.hex()};
+            }
+            `;
+            await run( inputCSS, outputCSS, { variables: { "foo-color": "#ff0" } }, assert);
         }
     };
 };