Some refactors, add export variables functionality

Author: Inwerpsel

index.js

@@ -13,6 +13,8 @@ var shallowCloneNode = require("./lib/shallow-clone-node");
 var resolveValue = require("./lib/resolve-value");
 var resolveDecl = require("./lib/resolve-decl");
 
+const fs = require('fs');
+
 // A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS)
 // `--foo`
 // See: http://dev.w3.org/csswg/css-variables/#custom-property
@@ -61,12 +63,18 @@ var defaults = {
   preserveInjectedVariables: true,
   // Will write media queries in the same order as in the original file.
   // Currently defaulted to false for legacy behavior. We can update to `true` in a major version
-  preserveAtRulesOrder: false
+  preserveAtRulesOrder: false,
+  // Export all var statement usages to a file.
+  exportVarUsagesTo: null,
 };
 
 module.exports = postcss.plugin("postcss-css-variables", function(options) {
   var opts = extend({}, defaults, options);
 
+  if ( !['object'].includes( typeof opts.exportVarUsagesTo ) ) {
+    throw new Error('`exportVarUsagesTo` must be a valid location.')
+  }
+
   // Work with opts here
 
   return function(css, result) {
@@ -217,26 +225,29 @@ module.exports = postcss.plugin("postcss-css-variables", function(options) {
       if (rule.nodes === undefined) return;
 
       var doesRuleUseVariables = rule.nodes.some(function(node) {
-        if (node.type === "decl") {
-          var decl = node;
-          // If it uses variables
-          // and is not a variable declarations that we may be preserving from earlier
-          if (
-            resolveValue.RE_VAR_FUNC.test(decl.value) &&
-            !RE_VAR_PROP.test(decl.prop)
-          ) {
-            return true;
-          }
-        }
-
-        return false;
+        // If it uses variables
+        // and is not a variable declarations that we may be preserving from earlier
+        return node.type === "decl"
+            && resolveValue.RE_VAR_FUNC.test( node.value )
+            && !RE_VAR_PROP.test( node.prop )
       });
 
       if (doesRuleUseVariables) {
         rulesThatHaveDeclarationsWithVariablesList.push(rule);
       }
     });
 
+    const allVars = {}
+
+    const shouldExport = () => !!opts.exportVarUsagesTo
+
+    const collectVar = !shouldExport() ? null : ( cssVar ) => {
+      if ( !allVars[ cssVar.name ] ) {
+        allVars[ cssVar.name ] = { usages: []};
+      }
+      allVars[ cssVar.name ].usages.push(cssVar.usage);
+    }
+
     rulesThatHaveDeclarationsWithVariablesList.forEach(function(rule) {
       var rulesToWorkOn = [].concat(rule);
       // Split out the rule into each comma separated selector piece
@@ -256,16 +267,20 @@ module.exports = postcss.plugin("postcss-css-variables", function(options) {
       // Resolve the declarations
       rulesToWorkOn.forEach(function(ruleToWorkOn) {
         ruleToWorkOn.nodes.slice(0).forEach(function(node) {
-          if (node.type === "decl") {
-            var decl = node;
-            resolveDecl(
-              decl,
-              map,
-              opts.preserve,
-              opts.preserveAtRulesOrder,
-              logResolveValueResult
-            );
+          if ( node.type !== "decl" ) {
+            return;
           }
+          let preserveAtRulesOrder;
+          resolveDecl(
+              node,
+              map,
+              {
+                shouldPreserve: opts.preserve,
+                preserveAtRulesOrder: opts.preserveAtRulesOrder,
+                logResolveValueResult,
+                collectVar,
+              },
+          );
         });
       });
     });
@@ -279,6 +294,19 @@ module.exports = postcss.plugin("postcss-css-variables", function(options) {
       injectedDecl.remove();
     });
 
+    // Merge variables with the ones that are already in the passed object.
+    if ( opts.exportVarUsagesTo && allVars ) {
+      Object.keys( allVars ).forEach( varName => {
+        if ( 'undefined' === typeof opts.exportVarUsagesTo[ varName ] ) {
+          opts.exportVarUsagesTo[ varName ] = {
+            name: varName,
+            usages: [],
+          };
+        }
+        opts.exportVarUsagesTo[ varName ].usages.push( ...allVars[ varName ].usages );
+      } );
+    }
+
     //console.log('map', map);
 
     /* * /

lib/balanced-var.js

@@ -0,0 +1,43 @@
+const balanced = require( 'balanced-match' );
+
+// Check for balanced `var(` and `)` pairs inside `value`, and return the 3 fragments:
+// `body` (inside), `pre` (before), `post` (after) of the found wrapper
+function balancedVar(value) {
+    var match = balanced('(', ')', value)
+    if ( !match ) {
+        return;
+    }
+    if ( /(?:^|[^\w-])var$/.test( match.pre ) ) {
+        // Remove the var from the end of pre
+        return {
+            pre: match.pre.slice( 0, -3 ),
+            body: match.body,
+            post: match.post
+        };
+    }
+    // Check inside body
+    const bodyMatch = balancedVar( match.body );
+    if ( bodyMatch ) {
+        // Reconstruct pre and post
+        return {
+            pre: match.pre + '(' + bodyMatch.pre,
+            body: bodyMatch.body,
+            post: bodyMatch.post + ')' + match.post
+        };
+    }
+    // Check inside post
+    var postMatch = balancedVar( match.post );
+
+    if ( postMatch ) {
+        // Reconstruct pre
+        return {
+            pre: match.pre + '(' + match.body + ')' + postMatch.pre,
+            body: postMatch.body,
+            post: postMatch.post
+        };
+    }
+
+
+}
+
+module.exports = balancedVar;

lib/resolve-decl.js

@@ -67,12 +67,19 @@ function eachMapItemDependencyOfDecl(variablesUsedList, map, decl, cb) {
 }
 
 
-
-
 // Resolve the decl with the computed value
 // Also add in any media queries that change the value as necessary
-function resolveDecl(decl, map, /*optional*/shouldPreserve, /*optional*/preserveAtRulesOrder, /*optional*/logResolveValueResult) {
-	shouldPreserve = (typeof shouldPreserve === "function" ? shouldPreserve(decl) : shouldPreserve) || false;
+function resolveDecl(
+	decl,
+	map,
+	{
+		shouldPreserve = false,
+		preserveAtRulesOrder,
+		logResolveValueResult,
+		collectVar,
+	}
+) {
+	shouldPreserve = typeof shouldPreserve === "function" ? shouldPreserve( decl ) : shouldPreserve;
 	preserveAtRulesOrder = preserveAtRulesOrder || false;
 
 	// Make it chainable
@@ -88,8 +95,7 @@ function resolveDecl(decl, map, /*optional*/shouldPreserve, /*optional*/preserve
 
 	// Grab the balue for this declarations
 	//console.log('resolveDecl 1');
-	var valueResults = _logResolveValueResult(resolveValue(decl, map));
-
+	var valueResults = _logResolveValueResult(resolveValue(decl, map, {collectVar}));
 
 	// Resolve the cascade dependencies
 	// Now find any at-rule declarations that need to be added below each rule
@@ -112,7 +118,7 @@ function resolveDecl(decl, map, /*optional*/shouldPreserve, /*optional*/preserve
 		}
 
 		// No mangle resolve
-		declClone.value = _logResolveValueResult(resolveValue(mimicDecl, map, true)).value;
+		declClone.value = _logResolveValueResult(resolveValue(mimicDecl, map, {ignorePseudoScope: true})).value;
 
 		if(mapItem.isUnderAtRule) {
 			// Create the clean atRule for which we place the declaration under