Added support for flexible variable placement

e.g.
background: linear-gradient(theme-var(--color-top), theme-var(--color-bottom));
AND
--bg-gradient: linear-gradient(var(--color-top), var(--color-bottom))

Author: samuelmaddock

lib/postcss-plugins.js

@@ -2,6 +2,7 @@ const postcss = require('postcss');
 
 const THEME_VAR_PREFIX = 'theme-var';
 const VAR_REGEX = /var\((--.+?)\)/;
+const VAR_NAME_REGEX = /var\((--.+?)\)/;
 
 module.exports.extractThemeRulesPlugin = postcss.plugin('postcss-extract-theme-rules', (options = {}) => {
     const prefix = options.prefix || THEME_VAR_PREFIX;
@@ -25,6 +26,36 @@ module.exports.extractThemeRulesPlugin = postcss.plugin('postcss-extract-theme-r
     };
 });
 
+const flattenValue = (variables, name, recursiveSeenMap = {}) => {
+    let value = variables[name];
+
+    // Check for circular dependency
+    if (recursiveSeenMap.hasOwnProperty(name)) {
+        throw new Error(`Found circular dependency in CSS theme variables for '${name}'`);
+    } else {
+        recursiveSeenMap[name] = true;
+    }
+
+    // Replace recursive variables in left-to-right order
+    while (value && value.indexOf('var(--') > -1) {
+        const varName = VAR_NAME_REGEX.exec(value)[1];
+        const varValue = flattenValue(variables, varName, recursiveSeenMap);
+
+        // Overwrite value to prevent duplicate work
+        variables[name] = value = value.replace(VAR_REGEX, varValue);
+    }
+
+    return value;
+};
+
+const flattenRecursiveValues = (variables) => {
+    for (const key in variables) {
+        flattenValue(variables, key);
+    }
+
+    return variables;
+};
+
 module.exports.extractVariablesPlugin = postcss.plugin('postcss-extract-variables', () => {
     return (root, results) => {
         let vars = {};
@@ -39,51 +70,30 @@ module.exports.extractVariablesPlugin = postcss.plugin('postcss-extract-variable
             });
         });
 
-        results.variables = vars;
+        results.variables = flattenRecursiveValues(vars);
     };
 });
 
-const getVariableValue = (variables, name, recursiveSeenMap = {}) => {
-    if (!variables.hasOwnProperty(name)) {
-        return [`Missing value for variable '${name}'`];
-    }
-
-    // Circular dependency check
-    if (recursiveSeenMap.hasOwnProperty(name)) {
-        return [`Found circular dependency in CSS theme variables for '${name}'`];
-    }
-
-    let value = variables[name];
-
-    // value is a variable, recursively lookup value
-    if (value.indexOf('var(--') === 0) {
-        value = VAR_REGEX.exec(value)[1];
-        recursiveSeenMap[name] = true;
-
-        return getVariableValue(variables, value, recursiveSeenMap);
-    }
-
-    return [null, value];
-};
-
 module.exports.replaceThemeVars = postcss.plugin('postcss-replace-theme-vars', (options = {}) => {
-    const regex = new RegExp(THEME_VAR_PREFIX + '\\((.+?)\\)');
     const variables = options.variables;
 
+    const varNameRegex = new RegExp(THEME_VAR_PREFIX + '\\((.+?)\\)');
+    const varRegex = new RegExp(THEME_VAR_PREFIX + '\\(.+?\\)');
+
     return (root) => {
         root.walkDecls(decl => {
-            const match = regex.exec(decl.value);
-            if (!match) return;
-
-            const varName = match[1];
-            const [err, value] = getVariableValue(variables, varName);
-
-            if (err) {
-                console.error(err);
-                return;
+            // Replace all theme vars in decl value
+            let match;
+            while (match = varNameRegex.exec(decl.value)) {
+                const varName = match[1];
+                const varValue = variables[varName];
+
+                if (varValue) {
+                    decl.value = decl.value.replace(varRegex, varValue);
+                } else {
+                    console.error(`Missing theming variable '${varName}'`);
+                }
             }
-
-            decl.value = value;
         });
     };
 });