Get default assignments automatically

sass/form/shared.sass

@@ -27,7 +27,6 @@ $input-icon-active-color: var(--text, #{$text}) !default
 $input-radius: var(--radius, #{$radius}) !default
 
 =input
-
   @extend %control
   background-color: var(--input-background-color)
   border-color: var(--input-border-color)

sass/form/tools.sass

@@ -182,7 +182,7 @@ $control-font-size: var(--size-normal, #{$size-normal}) !default
     .select
       &:focus
         & ~ .icon
-          color: $input-icon-active-color
+          color: var(--input-icon-active-color)
       &.is-small ~ .icon
         font-size: var(--size-small, #{$size-small})
       &.is-medium ~ .icon
@@ -190,23 +190,23 @@ $control-font-size: var(--size-normal, #{$size-normal}) !default
       &.is-large ~ .icon
         font-size: var(--size-large, #{$size-large})
     .icon
-      color: $input-icon-color
+      color: var(--input-icon-color)
-      height: $input-height
+      height: var(--input-height)
       pointer-events: none
       position: absolute
       top: 0
-      width: $input-height
+      width: var(--input-height)
       z-index: 4
   &.has-icons-left
     .input,
     .select select
-      padding-left: $input-height
+      padding-left: var(--input-height)
     .icon.is-left
       left: 0
   &.has-icons-right
     .input,
     .select select
-      padding-right: $input-height
+      padding-right: var(--input-height)
     .icon.is-right
       right: 0
   &.is-loading

sass/themes/default.sass

@@ -127,3 +127,24 @@
   --control-line-height: #{$control-line-height}
   --control-padding-vertical: #{$control-padding-vertical}
   --control-padding-horizontal: #{$control-padding-horizontal}
+  // Inputs
+  --input-color: #{$input-color}
+  --input-background-color: #{$input-background-color}
+  --input-border-color: #{$input-border-color}
+  --input-height: #{$input-height}
+  --input-shadow: #{$input-shadow}
+  --input-placeholder-color: #{$input-placeholder-color}
+  --input-hover-color: #{$input-hover-color}
+  --input-hover-border-color: #{$input-hover-border-color}
+  --input-focus-color: #{$input-focus-color}
+  --input-focus-border-color: #{$input-focus-border-color}
+  --input-focus-box-shadow-size: #{$input-focus-box-shadow-size}
+  --input-focus-box-shadow-color: #{$input-focus-box-shadow-color}
+  --input-disabled-color: #{$input-disabled-color}
+  --input-disabled-background-color: #{$input-disabled-background-color}
+  --input-disabled-border-color: #{$input-disabled-border-color}
+  --input-disabled-placeholder-color: #{$input-disabled-placeholder-color}
+  --input-arrow: #{$input-arrow}
+  --input-icon-color: #{$input-icon-color}
+  --input-icon-active-color: #{$input-icon-active-color}
+  --input-radius: #{$input-radius}

test/plugins/check-css-variables-exist.js

@@ -6,134 +6,6 @@ const regexAssign = /--[a-z-]*:/g;
 const regexUsage = /var\(--[a-z-]*\)/g;
 const LOG_EVERYTHING = false;
 
-const DEFAULT_ASSIGNMENTS = [
-  '--black',
-  '--black-70',
-  '--black-bis',
-  '--black-ter',
-  '--grey-darker',
-  '--grey-dark',
-  '--grey',
-  '--grey-light',
-  '--grey-lighter',
-  '--grey-lightest',
-  '--white-ter',
-  '--white-bis',
-  '--white',
-  '--orange',
-  '--yellow',
-  '--green',
-  '--turquoise',
-  '--cyan',
-  '--blue',
-  '--purple',
-  '--red',
-  '--family-sans-serif',
-  '--family-monospace',
-  '--render-mode',
-  '--size-1',
-  '--size-2',
-  '--size-3',
-  '--size-4',
-  '--size-5',
-  '--size-6',
-  '--size-7',
-  '--weight-light',
-  '--weight-normal',
-  '--weight-medium',
-  '--weight-semibold',
-  '--weight-bold',
-  '--block-spacing',
-  '--easing',
-  '--radius-small',
-  '--radius',
-  '--radius-large',
-  '--radius-rounded',
-  '--speed',
-  '--primary',
-  '--info',
-  '--success',
-  '--warning',
-  '--danger',
-  '--light',
-  '--dark',
-  '--orange-invert',
-  '--yellow-invert',
-  '--green-invert',
-  '--turquoise-invert',
-  '--cyan-invert',
-  '--blue-invert',
-  '--purple-invert',
-  '--red-invert',
-  '--primary-invert',
-  '--primary-light',
-  '--primary-dark',
-  '--info-invert',
-  '--info-light',
-  '--info-dark',
-  '--success-invert',
-  '--success-light',
-  '--success-dark',
-  '--warning-invert',
-  '--warning-light',
-  '--warning-dark',
-  '--danger-invert',
-  '--danger-light',
-  '--danger-dark',
-  '--light-invert',
-  '--light-light',
-  '--light-dark',
-  '--dark-invert',
-  '--dark-light',
-  '--dark-dark',
-  '--scheme-main',
-  '--scheme-main-bis',
-  '--scheme-main-ter',
-  '--scheme-invert',
-  '--scheme-invert-rgb',
-  '--scheme-invert-bis',
-  '--scheme-invert-ter',
-  '--background',
-  '--border',
-  '--border-rgb',
-  '--border-hover',
-  '--border-light',
-  '--border-light-hover',
-  '--text',
-  '--text-invert',
-  '--text-light',
-  '--text-strong',
-  '--code',
-  '--code-background',
-  '--pre',
-  '--pre-background',
-  '--link',
-  '--link-invert',
-  '--link-light',
-  '--link-dark',
-  '--link-visited',
-  '--link-hover',
-  '--link-hover-border',
-  '--link-focus',
-  '--link-focus-border',
-  '--link-active',
-  '--link-active-border',
-  '--family-primary',
-  '--family-secondary',
-  '--family-code',
-  '--size-small',
-  '--size-normal',
-  '--size-medium',
-  '--size-large',
-  '--control-radius',
-  '--control-radius-small',
-  '--control-border-width',
-  '--control-height',
-  '--control-line-height',
-  '--control-padding-vertical',
-  '--control-padding-horizontal',
-];
-
 function logThis(message) {
   if (LOG_EVERYTHING) {
     console.log(message);
@@ -146,28 +18,32 @@ function plugin() {
 
     let hasErrors = false;
 
+    const cssvars = fs.readFileSync(`../sass/themes/default.sass`, "utf8");
+    let defaultAssignments = cssvars.match(regexAssign);
+    defaultAssignments = defaultAssignments.map(assignment => assignment.replace(':', ''));
+
     Object.keys(files).forEach(filePath => {
       const {fileName, lines} = utils.getLines(files, filePath);
       const file = files[filePath];
       const contents = file.contents.toString();
       const assignments = contents.match(regexAssign);
-
+      let fileAssignments = [];
+      let allAssignments = [];
       let errorCount = 0;
 
-      if (!assignments) {
+      if (assignments) {
+        // --foobar: ==> --foobar
+        fileAssignments = assignments.map(assignment => assignment.replace(':', ''));
+        allAssignments = [...defaultAssignments, ...fileAssignments];
+      } else {
         logThis(`${filePath} has no CSS var assignments`);
-        errorCount++;
+        allAssignments = [...defaultAssignments];
-        return;
       }
 
-      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`);
-        errorCount++;
         return;
       }
 
@@ -178,11 +54,6 @@ function plugin() {
         return usage;
       });
 
-      if (filePath.endsWith('shared.sass')) {
-        console.log('ZLOG usages', usages);
-        console.log('ZLOG assignments', fileAssignments);
-      }
-
       usages.forEach(usage => {
         if (!allAssignments.includes(usage)) {
           console.log(`${usage} is not assigned`);
@@ -198,7 +69,7 @@ function plugin() {
       });
 
       if (errorCount) {
-        console.log(`There are some errors in ${filePath}`);
+        console.log(`There are some errors in ${filePath}.`);
         hasErrors = true;
       } else {
         logThis(`${filePath} is all good!`);
@@ -206,7 +77,7 @@ function plugin() {
     });
 
     if (hasErrors) {
-      console.log(`There are some errors`);
+      console.log(`There are some errors.`);
     } else {
       console.log(`All CSS variables are used and assigned correctly!`);
     }