feat: updating to Style Dictionary v4

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-references',
+ description: 'Include references 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,9 @@
 const path = require('path');
 const minimist = require('minimist');
-const { StyleDictionary, colorTransform, createCustomCSSVariables } = require('../tokens/style-dictionary');
+const {
+ initializeStyleDictionary,
+ colorTransform,
+} = require('../tokens/style-dictionary');
 const { createIndexCssFile } = require('../tokens/utils');
 
 /**
@@ -16,19 +19,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,
+ '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: [
@@ -41,33 +59,35 @@ async function buildTokensCommand(commandArgs) {
  platforms: {
  css: {
  prefix: 'pgn',
- transformGroup: '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,
  options: {
- outputReferences: !hasSourceTokensOnly,
+ outputReferences,
  },
  },
  {
  format: 'css/custom-media-breakpoints',
  destination: 'core/custom-media-breakpoints.css',
  filter: hasSourceTokensOnly ? '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',
- },
+ transforms: StyleDictionary.hooks.transformGroups.css.filter(item => item !== 'size/rem').concat('color/sass-color-functions', 'str-replace'),
  },
  },
+ log: {
+ verbosity: verbose ? 'verbose' : 'default',
+ },
  };
 
  const getStyleDictionaryConfig = (themeVariant) => ({
@@ -85,49 +105,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: hasSourceTokensOnly
+ ? `isSource.${themeVariant}`
+ : `isThemeVariant.${themeVariant}`,
  options: {
- outputReferences: !hasSourceTokensOnly,
+ outputReferences,
  },
  },
  {
  format: 'css/utility-classes',
  destination: `themes/${themeVariant}/utility-classes.css`,
  filter: hasSourceTokensOnly ? '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, isThemeVariant, themeVariant }) => {
+ const sd = new StyleDictionary(config);
+ await sd.cleanAllPlatforms();
+ await sd.buildAllPlatforms();
+ createIndexCssFile({
+ buildDir,
+ isThemeVariant: !!isThemeVariant,
+ themeVariant,
+ });
+ }));
 }
 
 module.exports = buildTokensCommand;