Script to fetch usages in scss files and merge

* Find all usages in scss files and get the line number.
* Script to merge these with usages collected with postcss, which
contain some info that the scss script can't access.

Author: Inwerpsel

index.js

@@ -306,15 +306,5 @@ module.exports = postcss.plugin("postcss-css-variables", function(options) {
         opts.exportVarUsagesTo[ varName ].usages.push( ...allVars[ varName ].usages );
       } );
     }
-
-    //console.log('map', map);
-
-    /* * /
-		}
-		catch(e) {
-			//console.log('e', e.message);
-			console.log('e', e.message, e.stack);
-		}
-		/* */
   };
 });

lib/balanced-var.js

@@ -3,7 +3,7 @@ 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)
+    const match = balanced( '(', ')', value );
     if ( !match ) {
         return;
     }
@@ -26,7 +26,7 @@ function balancedVar(value) {
         };
     }
     // Check inside post
-    var postMatch = balancedVar( match.post );
+    const postMatch = balancedVar( match.post );
 
     if ( postMatch ) {
         // Reconstruct pre

lib/merge-var-usages.js

@@ -0,0 +1,6 @@
+const mergeVarUsages = ( inCss, inScss ) => Object.keys( inCss ).map( cssVar => ({
+    ...inCss[ cssVar ],
+    sourceUsages: ! inScss[ cssVar ] ? null : inScss[ cssVar ].usages,
+}));
+
+module.exports = mergeVarUsages;

lib/resolve-value.js

@@ -38,13 +38,9 @@ const resolveValue = ( decl, map, { ignorePseudoScope = false, _debugIsInternal
 			collectVar( {
 				name: variableName,
 				usage: {
-					defaultValue: defaultValue.join(),
-					// declaration: decl,
-					property: decl.prop,
 					selector: decl.parent.selector,
-					// // Best name I could fine for what is the result of balancedVar: it contains the part before, inside
-					// // and after the inside of the var statement, from which we know the position inside of the line.
-					// linePosition: match,
+					property: decl.prop,
+					defaultValue: defaultValue.join(''),
 				},
 			} );
 		}

lib/scss-var-usages.js

@@ -0,0 +1,74 @@
+const  shallowEqualObjects = require( "shallow-equal/objects");
+const fs = require('fs');
+const glob = require('glob');
+const balancedVar = require( './balanced-var' );
+
+const grabVars = ( value ) => {
+    let remainingVariableValue = value;
+    let match;
+    const lineVars = [];
+
+    while ( (match = balancedVar( remainingVariableValue )) ) {
+        // Split at the comma to find variable name and fallback value
+        // There may be other commas in the values so this isn't necessarily just 2 pieces
+        const arguments = match.body.split( ',' ).map( str => str.trim() );
+
+        const [variableName, ...defaultValue] = arguments;
+
+        lineVars.push( {
+            name: variableName,
+            defaultValue: defaultValue.join(),
+        } );
+
+        remainingVariableValue = (match.pre || '') + match.body.replace( variableName, '' ) + (match.post || '');
+    }
+
+    return lineVars;
+}
+
+function scssVarUsages( sourceDir ) {
+    // Store values as we iterate
+    const allVars = {};
+
+    const scssFiles = glob.sync(`${sourceDir.replace(/\/$/, '')}/**/*.scss`);
+    // Create an array of all the *.module.SCSS files and loop through it
+    scssFiles.forEach((file) => {
+        // Read the file, convert to string and then split each line
+        const scssLines = fs.readFileSync(file).toString().split('\n');
+
+        let lineNumber = 1;
+
+        scssLines.forEach( line => {
+            lineNumber++;
+            const cssValueRgx = /^\s*([\w\-]+): (.*)/;
+            const declarationParts = cssValueRgx.exec( line );
+            if ( declarationParts === null ) {
+                return;
+            }
+            const [, property, value] = declarationParts;
+
+            const lineVars = grabVars( value ).map( cssVar => ({
+                file,
+                lineNumber,
+                property,
+                ...cssVar,
+            }) );
+
+            lineVars.forEach( cssVar => {
+                const { name, ...usage } = cssVar;
+                if ( !allVars[ name ] ) {
+                    allVars[ name ] = {
+                        usages: [],
+                    };
+                }
+                if ( ! allVars[ name ].usages.some( existingUsage => shallowEqualObjects( existingUsage, usage ) ) ) {
+                    allVars[ name ].usages.push( usage );
+                }
+            } );
+        });
+    });
+
+    return allVars;
+}
+
+module.exports = scssVarUsages;

package.json

@@ -17,7 +17,8 @@
     "balanced-match": "^1.0.0",
     "escape-string-regexp": "^1.0.3",
     "extend": "^3.0.1",
-    "postcss": "^6.0.8"
+    "postcss": "^6.0.8",
+    "shallow-equal": "^1.2.1"
   },
   "devDependencies": {
     "bluebird": "^3.5.0",