feat: updating to Style Dictionary v4

.stylelintrc.json

@@ -34,6 +34,7 @@
     "color-function-notation": "legacy",
     "value-keyword-case": ["lower", {
       "ignoreProperties": ["/font-family/"]
-    }]
+    }],
+    "custom-property-empty-line-before": null
   }
 }

Makefile

@@ -1,3 +1,4 @@
+.PHONY: build
 build:
 	rm -rf ./dist
 	tsc --project tsconfig.build.json

bin/paragon-scripts.js

@@ -85,11 +85,21 @@ const COMMANDS = {
         description: 'Include only source design tokens in the build.',
         defaultValue: false,
       },
+      {
+        name: '--output-token-references',
+        description: 'Include references for tokens with aliases to other tokens in the build output.',
+        defaultValue: true,
+      },
       {
         name: '-t, --themes',
         description: 'Specify themes to include in the token build.',
         defaultValue: 'light',
       },
+      {
+        name: '-v, --verbose',
+        description: 'Enable verbose logging.',
+        defaultValue: false,
+      },
     ],
   },
   'replace-variables': {

lib/build-tokens.js

@@ -1,6 +1,10 @@
 const path = require('path');
 const minimist = require('minimist');
-const { StyleDictionary, colorTransform, createCustomCSSVariables } = require('../tokens/style-dictionary');
+const {
+  initializeStyleDictionary,
+  getTokensStudioTransforms,
+  colorTransform,
+} = require('../tokens/style-dictionary');
 const { createIndexCssFile } = require('../tokens/utils');
 
 /**
@@ -16,19 +20,34 @@ async function buildTokensCommand(commandArgs) {
   const defaultParams = {
     themes: ['light'],
     'build-dir': './build/',
+    'source-tokens-only': false,
+    'output-references': true,
+    verbose: false,
   };
 
   const alias = {
     'build-dir': 'b',
     themes: 't',
+    verbose: '-v',
   };
 
   const {
     'build-dir': buildDir,
     source: tokensSource,
-    'source-tokens-only': hasSourceTokensOnly,
+    'source-tokens-only': transformSourceTokensOnly,
+    'output-references': outputReferences,
     themes,
-  } = minimist(commandArgs, { alias, default: defaultParams, boolean: 'source-tokens-only' });
+    verbose,
+  } = minimist(
+    commandArgs,
+    {
+      alias,
+      default: defaultParams,
+      boolean: ['source-tokens-only', 'output-references', 'verbose'],
+    },
+  );
+
+  const StyleDictionary = await initializeStyleDictionary({ themes });
 
   const coreConfig = {
     include: [
@@ -38,36 +57,42 @@ async function buildTokensCommand(commandArgs) {
     source: tokensSource
       ? [`${tokensSource}/core/**/*.json`, `${tokensSource}/core/**/*.toml`]
       : [],
+    preprocessors: ['pgn-annotate-token-extensions-with-references', 'tokens-studio'],
+    expand: {
+      typesMap: (await getTokensStudioTransforms()).expandTypesMap,
+    },
     platforms: {
       css: {
         prefix: 'pgn',
-        transformGroup: 'css',
+        transformGroup: 'paragon-css',
         // NOTE: buildPath must end with a slash
         buildPath: buildDir.slice(-1) === '/' ? buildDir : `${buildDir}/`,
+        options: {
+          fileHeader: 'customFileHeader',
+        },
         files: [
           {
             format: 'css/custom-variables',
             destination: 'core/variables.css',
-            filter: hasSourceTokensOnly ? 'isSource' : undefined,
+            filter: transformSourceTokensOnly ? 'isSource' : undefined,
             options: {
-              outputReferences: !hasSourceTokensOnly,
+              outputReferences,
             },
           },
           {
             format: 'css/custom-media-breakpoints',
             destination: 'core/custom-media-breakpoints.css',
-            filter: hasSourceTokensOnly ? 'isSource' : undefined,
+            filter: transformSourceTokensOnly ? 'isSource' : undefined,
             options: {
-              outputReferences: !hasSourceTokensOnly,
+              outputReferences,
             },
           },
         ],
-        transforms: StyleDictionary.transformGroup.css.filter(item => item !== 'size/rem').concat('color/sass-color-functions', 'str-replace'),
-        options: {
-          fileHeader: 'customFileHeader',
-        },
       },
     },
+    log: {
+      verbosity: verbose ? 'verbose' : 'default',
+    },
   };
 
   const getStyleDictionaryConfig = (themeVariant) => ({
@@ -85,49 +110,60 @@ async function buildTokensCommand(commandArgs) {
       : [],
     transform: {
       'color/sass-color-functions': {
-        ...StyleDictionary.transform['color/sass-color-functions'],
-        transformer: (token) => colorTransform(token, themeVariant),
+        ...StyleDictionary.hooks.transforms['color/sass-color-functions'],
+        transform: (token) => colorTransform(token, themeVariant),
       },
     },
-    format: {
-      'css/custom-variables': formatterArgs => createCustomCSSVariables({
-        formatterArgs,
-        themeVariant,
-      }),
-    },
     platforms: {
       css: {
         ...coreConfig.platforms.css,
         files: [
           {
             format: 'css/custom-variables',
             destination: `themes/${themeVariant}/variables.css`,
-            filter: hasSourceTokensOnly ? 'isSource' : undefined,
+            filter: transformSourceTokensOnly
+              ? `isSource.${themeVariant}`
+              : `isThemeVariant.${themeVariant}`,
             options: {
-              outputReferences: !hasSourceTokensOnly,
+              outputReferences,
             },
           },
           {
             format: 'css/utility-classes',
             destination: `themes/${themeVariant}/utility-classes.css`,
-            filter: hasSourceTokensOnly ? 'isSource' : undefined,
+            filter: transformSourceTokensOnly ? 'isSource' : undefined,
             options: {
-              outputReferences: !hasSourceTokensOnly,
+              outputReferences,
             },
           },
         ],
       },
     },
   });
 
-  StyleDictionary.extend(coreConfig).buildAllPlatforms();
-  createIndexCssFile({ buildDir, isTheme: false });
+  // Create list of style-dictionary configurations to build (core + theme variants)
+  const configs = [
+    { config: coreConfig },
+    ...themes.map((themeVariant) => {
+      const config = getStyleDictionaryConfig(themeVariant);
+      return {
+        config,
+        themeVariant,
+      };
+    }),
+  ];
 
-  themes.forEach((themeVariant) => {
-    const config = getStyleDictionaryConfig(themeVariant);
-    StyleDictionary.extend(config).buildAllPlatforms();
-    createIndexCssFile({ buildDir, isTheme: true, themeVariant });
-  });
+  // Build tokens for each configuration
+  await Promise.all(configs.map(async ({ config, themeVariant }) => {
+    const sd = new StyleDictionary(config);
+    await sd.cleanAllPlatforms();
+    await sd.buildAllPlatforms();
+    createIndexCssFile({
+      buildDir,
+      isThemeVariant: !!themeVariant,
+      themeVariant,
+    });
+  }));
 }
 
 module.exports = buildTokensCommand;