New strategy for colors.json and colors-<suffix>.json and colors-<atomic-level>-<suffix>.json to autoloaded sass partial. (#217)

Author: jdillick

.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',

.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();

src/assets/style/_scss/_colors.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';