Check if assigned CSS vars are actually used

diff --git a/sass/components/panel.sass b/sass/components/panel.sass
index 1b92cd6261d1fd3a146801ecc715710198b86c0c..5146a82b3c074be22a6f663a2adc4b0ef67e55c9 100644 (file)
--- a/sass/components/panel.sass
+++ b/sass/components/panel.sass
@@ -57,7 +57,7 @@ $panel-colors: $colors !default
 
   border-radius: var(--panel-radius)
   box-shadow: var(--panel-shadow)
-  font-size: $size-normal
+  font-size: var(--panel-font-size)
   &:not(:last-child)
     margin-bottom: var(--panel-margin)
   // Colors

diff --git a/test/plugins/check-css-variables-exist.js b/test/plugins/check-css-variables-exist.js
index 55f2a25c4f357a1cf82d01a3ad8dbb9992cae53a..55e8bbae7cd3672ce92b89a731fa462d93396a23 100644 (file)
--- a/test/plugins/check-css-variables-exist.js
+++ b/test/plugins/check-css-variables-exist.js
@@ -143,35 +143,46 @@ function plugin() {
       const {fileName, lines} = utils.getLines(files, filePath);
       const file = files[filePath];
       const contents = file.contents.toString();
-      let assignments = contents.match(regexAssign);
+      const assignments = contents.match(regexAssign);
 
       if (!assignments) {
         logThis(`${filePath} has no CSS var assignments`);
         return;
       }
 
-      assignments = assignments.map(assignment => assignment.replace(':', ''));
-      assignments = [...assignments, ...DEFAULT_ASSIGNMENTS];
-      const usages = contents.match(regexUsage);
+      const fileAssignments = assignments.map(assignment => assignment.replace(':', ''));
+      const allAssignments = [...fileAssignments, ...DEFAULT_ASSIGNMENTS];
+
+      let usages = contents.match(regexUsage);
 
       if (!usages) {
         logThis(`${filePath} has no CSS var usages`);
         return;
       }
 
+      // var(--foobar) ==> --foobar
+      usages = usages.map(usage => {
+        usage = usage.replace('var(', '');
+        usage = usage.replace(')', '');
+        return usage;
+      });
+
       let errorCount = 0;
 
       usages.forEach(usage => {
-        // var(--foobar) ==> --foobar
-        let varName = usage.replace('var(', '');
-        varName = varName.replace(')', '');
-
-        if (!assignments.includes(varName)) {
+        if (!allAssignments.includes(usage)) {
           console.log(`${usage} is not assigned`);
           errorCount++;
         }
       });
 
+      fileAssignments.forEach(assignment => {
+        if (!usages.includes(assignment)) {
+          console.log(`${assignment} is not used`);
+          errorCount++;
+        }
+      });
+
       if (errorCount) {
         console.log(`There are some errors in ${filePath}`);
       } else {
@@ -182,7 +193,7 @@ function plugin() {
     if (hasErrors) {
       console.log(`There are some errors`);
     } else {
-      console.log(`All used CSS variables are assigned correctly!`);
+      console.log(`All CSS variables are used and assigned correctly!`);
     }
   };
 }