Added support for recursive variable values

Author: samuelmaddock

lib/postcss-plugins.js

@@ -1,6 +1,7 @@
 const postcss = require('postcss');
 
 const THEME_VAR_PREFIX = 'theme-var';
+const VAR_REGEX = /var\((--.+?)\)/;
 
 module.exports.extractThemeRulesPlugin = postcss.plugin('postcss-extract-theme-rules', (options = {}) => {
     const prefix = options.prefix || THEME_VAR_PREFIX;
@@ -42,6 +43,29 @@ module.exports.extractVariablesPlugin = postcss.plugin('postcss-extract-variable
     };
 });
 
+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;
@@ -52,12 +76,14 @@ module.exports.replaceThemeVars = postcss.plugin('postcss-replace-theme-vars', (
             if (!match) return;
 
             const varName = match[1];
+            const [err, value] = getVariableValue(variables, varName);
 
-            if (!variables.hasOwnProperty(varName)) {
-                console.error(`Missing theme-var '${varName}'`);
+            if (err) {
+                console.error(err);
+                return;
             }
 
-            decl.value = variables[varName];
+            decl.value = value;
         });
     };
 });