feat: create themes flag to build tokens (#2357)

tokens/build-tokens.js

@@ -2,19 +2,22 @@
 const { program } = require('commander');
 const path = require('path');
 const { StyleDictionary, colorTransform, createCustomCSSVariables } = require('./style-dictionary');
+const { createIndexCssFile } = require('./utils');
 
 program
   .version('0.0.1')
   .description('CLI to build design tokens for various platforms (currently only CSS is supported) from Paragon Design Tokens.')
   .option('--build-dir <char>', 'A path to directory where to put files with built tokens, must end with a /.', './build/')
   .option('--source <char>', 'A path where to look for additional tokens that will get merged with Paragon ones, must be a path to root directory of the token files that contains "root" and "themes" subdirectories.')
   .option('--source-tokens-only', 'If provided, only tokens from --source will be included in the output; Paragon tokens will be used for references but not included in the output.')
+  .option('--themes <themes...>', 'A list of theme variants to build. By default, Paragon currently only supports a light theme.')
   .parse();
 
 const {
   buildDir,
   source: tokensSource,
   sourceTokensOnly: hasSourceTokensOnly,
+  themes,
 } = program.opts();
 
 const coreConfig = {
@@ -95,9 +98,13 @@ const getStyleDictionaryConfig = (themeVariant) => ({
 
 StyleDictionary.extend(coreConfig).buildAllPlatforms();
 
-const THEME_VARIANTS = ['light'];
+// This line creates the index file for core folder, specially when buildDir is outside Paragon.
+createIndexCssFile({ buildDir, isTheme: false });
+
+const THEME_VARIANTS = themes || ['light'];
 
 THEME_VARIANTS.forEach((themeVariant) => {
   const config = getStyleDictionaryConfig(themeVariant);
   StyleDictionary.extend(config).buildAllPlatforms();
+  createIndexCssFile({ buildDir, isTheme: true, themeVariant });
 });

tokens/utils.js

@@ -162,7 +162,36 @@ async function transformInPath(location, variablesMap, transformType = 'definiti
   }
 }
 
+function createIndexCssFile({ buildDir = path.resolve(__dirname, '../styles/css'), isTheme, themeVariant }) {
+  const directoryPath = isTheme ? `${buildDir}/themes/${themeVariant}` : `${buildDir}/core`;
+
+  fs.readdir(directoryPath, (errDir, files) => {
+    if (errDir) {
+      // eslint-disable-next-line no-console
+      console.error('Error reading directory:', errDir);
+      return;
+    }
+
+    const outputCssFiles = files.filter(file => file !== 'index.css');
+    // When creating themes, there are typically two files: one for utility classes and one for variables.
+    // It's organized them to allow variables be reading first.
+    if (isTheme) { outputCssFiles.reverse(); }
+
+    const exportStatements = outputCssFiles.map((file) => `@import "${file}";`);
+
+    const indexContent = `${exportStatements.join('\n')}\n`;
+
+    fs.writeFile(path.join(directoryPath, 'index.css'), indexContent, (errFile) => {
+      if (errFile) {
+        // eslint-disable-next-line no-console
+        console.error('Error creating index file:', errFile);
+      }
+    });
+  });
+}
+
 module.exports = {
+  createIndexCssFile,
   getFilesWithExtension,
   getSCSStoCSSMap,
   transformInPath,