From d79c6dbc3cb0b0e9db72619b2bcbeea0625c088c Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 24 Aug 2020 11:41:30 +0200 Subject: [PATCH] Get default assignments automatically --- sass/form/shared.sass | 1 - sass/form/tools.sass | 12 +- sass/themes/default.sass | 21 +++ test/plugins/check-css-variables-exist.js | 157 ++-------------------- 4 files changed, 41 insertions(+), 150 deletions(-) diff --git a/sass/form/shared.sass b/sass/form/shared.sass index 8418bfb8..53c18e85 100644 --- a/sass/form/shared.sass +++ b/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) diff --git a/sass/form/tools.sass b/sass/form/tools.sass index 5db165e1..e2a76120 100644 --- a/sass/form/tools.sass +++ b/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 - height: $input-height + color: var(--input-icon-color) + 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 diff --git a/sass/themes/default.sass b/sass/themes/default.sass index bb264a47..ab878998 100644 --- a/sass/themes/default.sass +++ b/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} diff --git a/test/plugins/check-css-variables-exist.js b/test/plugins/check-css-variables-exist.js index 6d89396f..3e4945c9 100644 --- a/test/plugins/check-css-variables-exist.js +++ b/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++; - return; + allAssignments = [...defaultAssignments]; } - 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!`); }