feat: error and warning reporting for variable use

fail when undefined variables are used, allow but warn when locally defined variables used

Author: lazd

tools/bundle-builder/subrunner/index.js

@@ -91,6 +91,9 @@ function runTaskOnPackages(task, packages) {
 
       if (packageDir) {
         runComponentTask(packageDir, task, function(err) {
+          if (err) {
+            process.exit();
+          }
           processPackage();
         });
       }

tools/component-builder/css/lib/varUtils.js

@@ -38,6 +38,23 @@ function getVarsFromCSS(css) {
   return variableList;
 }
 
+function getVarsDefinedInCSS(css) {
+  let variableList = [];
+  let root = postcss.parse(css);
+
+  root.walkRules((rule, ruleIndex) => {
+    rule.walkDecls((decl) => {
+      if (decl.prop.startsWith('--')) {
+        let varName = decl.prop;
+        if (variableList.indexOf(varName) === -1) {
+          variableList.push(varName);
+        }
+      }
+    });
+  });
+  return variableList;
+}
+
 function getVarValues(css) {
   let root = postcss.parse(css);
   let variables = {};
@@ -174,6 +191,7 @@ function getAllComponentVars() {
 
 exports.getAllComponentVars = getAllComponentVars;
 exports.getAllVars = getAllVars;
+exports.getVarsDefinedInCSS = getVarsDefinedInCSS;
 exports.getVarsFromCSS = getVarsFromCSS;
 exports.getVarValues = getVarValues;
 exports.getClassNames = getClassNames;

tools/component-builder/css/vars.js

@@ -44,26 +44,39 @@ function bakeVars() {
     // Find all custom properties used in the component
     let variableList = varUtils.getVarsFromCSS(file.contents);
 
+    // Get vars defined inside of the component
+    let componentVars = varUtils.getVarsDefinedInCSS(file.contents);
+
     // Get vars in ALL components
     let vars = await varUtils.getAllComponentVars();
 
     // Get literally all of the possible vars (even overridden vars that are different between themes/scales)
     let allVars = await varUtils.getAllVars();
 
     // For each color stop and scale, filter the variables for those matching the component
+    let errors = [];
     let usedVars = {};
     variableList.forEach(varName => {
       if (varName.indexOf('spectrum-global') !== -1) {
         logger.warn(`⚠️  ${pkg.name} directly uses global variable ${varName}`);
       }
       else if (!allVars[varName]) {
-        logger.error(`🚨 ${pkg.name} uses undefined variable ${varName}`);
+        if (componentVars.indexOf(varName) === -1) {
+          errors.push(`${pkg.name} uses undefined variable ${varName}`);
+        }
+        else {
+          logger.warn(`🔶 ${pkg.name} uses locally defined variable ${varName}`);
+        }
       }
       else {
         usedVars[varName] = vars[varName];
       }
     });
 
+    if (errors.length) {
+      return cb(new Error(errors.join('\n')), file);
+    }
+
     let contents = varUtils.getVariableDeclarations(classNames, usedVars);
     let newFile = file.clone({contents: false});
     newFile.path = path.join(file.base, `vars.css`);