From 1f88ffea3c203cbf7353698f84376910a2c525b5 Mon Sep 17 00:00:00 2001 From: John Dillick Date: Thu, 27 Apr 2023 08:26:04 -1000 Subject: [PATCH] New strategy for colors.json and colors-.json and colors--.json to autoloaded sass partial. --- .core/gulp.config.js | 4 +- .core/gulp.tasks.js | 92 +++++++++++-------- src/assets/style/_scss/_colors.scss | 39 -------- src/assets/style/_scss/_reactium-modules.scss | 1 + src/assets/style/_scss/colors.json | 16 ---- 5 files changed, 59 insertions(+), 93 deletions(-) delete mode 100644 src/assets/style/_scss/_colors.scss delete mode 100644 src/assets/style/_scss/colors.json diff --git a/.core/gulp.config.js b/.core/gulp.config.js index e0db02e3..f8e8af1a 100644 --- a/.core/gulp.config.js +++ b/.core/gulp.config.js @@ -26,7 +26,7 @@ const defaultConfig = { watch: { js: ['src/app/**/*', 'reactium_modules/**/*'], markup: ['src/**/*.html', 'src/**/*.css', 'reactium_modules/**/*.css'], - colors: ['src/**/*/colors.json'], + colors: ['src/**/*/colors*.json', 'reactium_modules/**/*/colors*.json'], pluginAssets: [ 'src/app/**/plugin-assets.json', 'src/**/style-assets.json', @@ -58,7 +58,7 @@ const defaultConfig = { }, src: { app: 'src', - colors: ['src/**/*/colors.json'], + colors: ['src/**/*/colors*.json', 'reactium_modules/**/*/colors*.json'], pluginAssets: [ 'src/app/**/plugin-assets.json', 'src/**/style-assets.json', diff --git a/.core/gulp.tasks.js b/.core/gulp.tasks.js index 59102381..56abb138 100644 --- a/.core/gulp.tasks.js +++ b/.core/gulp.tasks.js @@ -3,7 +3,7 @@ const del = require('del'); const fs = require('fs-extra'); const op = require('object-path'); -const path = require('path'); +const path = require('node:path'); const globby = require('./globby-patch'); const webpack = require('webpack'); const browserSync = require('browser-sync'); @@ -529,15 +529,6 @@ $assets: map.set($assets, "{{key}}", "{{{dataURL}}}"); const mappings = []; for (const entry of entries) { const [key, fileName] = entry; - console.log( - `Adding ${key}: ${path.resolve( - base, - fileName, - )} to partial at ${path.resolve( - base, - '_reactium-style-variables.scss', - )}`, - ); const dataURL = await fileReader( new File(path.resolve(base, fileName)), ); @@ -751,39 +742,68 @@ $assets: map.set($assets, "{{key}}", "{{{dataURL}}}"); done(); }; + const colorTemplate = data => { + const template = handlebars.compile(` +// +// DO NOT EDIT! +// This file is generated by gulp styles:colors task. +// +@use "sass:map"; + +{{#each this}} +\${{{ key }}}: "{{{value}}}" !default; +{{/each}} + +$color: () !default; + +{{#each this}} +$color: map.set($color, "{{key}}", \${{{ key }}}); +{{/each}} +`); + return template(data); + }; + const stylesColors = done => { const colorProfiles = globby.sync(config.src.colors); - if (colorProfiles.length > 0) { - let colorFileContents = - '// WARNING: Do not directly edit this file !!!!\n// File generated by gulp styles:colors task\n'; - let colorVars = []; - let colorArr = []; + if (colorProfiles.length > 0) { colorProfiles.forEach(filePath => { - let profile = fs.readFileSync(path.resolve(filePath)); - profile = JSON.parse(profile); - - colorVars.push(`\n\n// ~/${filePath}`); + const profile = fs.readJsonSync(path.resolve(filePath)); + const location = path.dirname(filePath); + const { name } = path.parse(path.basename(filePath)); + let [, prefix = 'variables', ...suffixParts] = name.split('-'); + + const prefixes = [ + 'mixins', + 'variables', + 'base', + 'atoms', + 'molecules', + 'organisms', + 'overrides', + ]; + ReactiumGulp.Hook.runSync('color-profile-prefixes', prefixes); + + if (!prefixes.includes(prefix)) { + suffixParts = [prefix].concat(suffixParts); + prefix = 'variables'; + } - Object.keys(profile).forEach(k => { - let code = profile[k]; - let cvar = `$${k}`; - let vline = `${cvar}: ${code} !default;`; - let cname = k.split('color-').join(''); - let aline = `\t"${cname}": ${cvar}`; + const suffix = suffixParts.join('-'); + const outputFileName = `_reactium-style-${prefix}-colors${ + suffix.length > 0 ? `-${suffix}` : '' + }.scss`; + const outputPath = path.resolve(location, outputFileName); + + const colorFileContents = colorTemplate( + Object.entries(profile).map(([key, value]) => ({ + key, + value, + })), + ); - colorVars.push(vline); - colorArr.push(aline); - }); + fs.writeFileSync(outputPath, colorFileContents, 'utf8'); }); - - colorFileContents += colorVars.join('\n') + '\n\n\n'; - colorFileContents += `$color: (\n${colorArr.join( - ',\n', - )}\n) !default;\n\n\n`; - - fs.ensureFileSync(config.dest.colors); - fs.writeFileSync(config.dest.colors, colorFileContents, 'utf8'); } done(); diff --git a/src/assets/style/_scss/_colors.scss b/src/assets/style/_scss/_colors.scss deleted file mode 100644 index 76fc98a2..00000000 --- a/src/assets/style/_scss/_colors.scss +++ /dev/null @@ -1,39 +0,0 @@ -// WARNING: Do not directly edit this file !!!! -// File generated by gulp styles:colors task - - -// ~/src/assets/style/_scss/colors.json -$color-black: #000000 !default; -$color-gray-dark: #333333 !default; -$color-gray: #999999 !default; -$color-grey: #CCCCCC !default; -$color-grey-light: #F7F7F7 !default; -$color-white: #FFFFFF !default; -$color-yellow: #F4F19C !default; -$color-orange: #E69840 !default; -$color-pink: #D877A0 !default; -$color-red: #A82C40 !default; -$color-purple: #7A7CEF !default; -$color-blue: #4F82BA !default; -$color-green: #659A3F !default; -$color-green-light: #B2BB50 !default; - - -$color: ( - "black": $color-black, - "gray-dark": $color-gray-dark, - "gray": $color-gray, - "grey": $color-grey, - "grey-light": $color-grey-light, - "white": $color-white, - "yellow": $color-yellow, - "orange": $color-orange, - "pink": $color-pink, - "red": $color-red, - "purple": $color-purple, - "blue": $color-blue, - "green": $color-green, - "green-light": $color-green-light -) !default; - - diff --git a/src/assets/style/_scss/_reactium-modules.scss b/src/assets/style/_scss/_reactium-modules.scss index d6208f82..c06e6f2b 100644 --- a/src/assets/style/_scss/_reactium-modules.scss +++ b/src/assets/style/_scss/_reactium-modules.scss @@ -2,4 +2,5 @@ // WARNING: Do not directly edit this file !!!! // File generated by gulp styles:partials task +@import '_reactium-style-variables-colors-default'; @import '../../../app/components/Welcome/_reactium-style-organisms'; diff --git a/src/assets/style/_scss/colors.json b/src/assets/style/_scss/colors.json deleted file mode 100644 index 262760b8..00000000 --- a/src/assets/style/_scss/colors.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "color-black": "#000000", - "color-gray-dark": "#333333", - "color-gray": "#999999", - "color-grey": "#CCCCCC", - "color-grey-light": "#F7F7F7", - "color-white": "#FFFFFF", - "color-yellow": "#F4F19C", - "color-orange": "#E69840", - "color-pink": "#D877A0", - "color-red": "#A82C40", - "color-purple": "#7A7CEF", - "color-blue": "#4F82BA", - "color-green": "#659A3F", - "color-green-light": "#B2BB50" -}