feat: updating to Style Dictionary v4

lib/build-tokens.js

@@ -1,6 +1,6 @@
 const path = require('path');
 const minimist = require('minimist');
-const { StyleDictionary, colorTransform, createCustomCSSVariables } = require('../tokens/style-dictionary');
+const { initializeStyleDictionary, createCustomCSSVariables, colorTransform } = require('../tokens/style-dictionary');
 const { createIndexCssFile } = require('../tokens/utils');
 
 /**
@@ -13,6 +13,8 @@ const { createIndexCssFile } = require('../tokens/utils');
  * @param {string|string[]} [commandArgs.themes=['light']] - The themes (variants) for which to build tokens.
  */
 async function buildTokensCommand(commandArgs) {
+ const StyleDictionary = await initializeStyleDictionary();
+
  const defaultParams = {
  themes: ['light'],
  'build-dir': './build/',
@@ -62,7 +64,7 @@ async function buildTokensCommand(commandArgs) {
  },
  },
  ],
- transforms: StyleDictionary.transformGroup.css.filter(item => item !== 'size/rem').concat('color/sass-color-functions', 'str-replace'),
+ transforms: StyleDictionary.hooks.transformGroups.css.filter(item => item !== 'size/rem').concat('color/sass-color-functions', 'str-replace'),
  options: {
  fileHeader: 'customFileHeader',
  },
@@ -85,8 +87,8 @@ 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: {
@@ -120,12 +122,12 @@ async function buildTokensCommand(commandArgs) {
  },
  });
 
- StyleDictionary.extend(coreConfig).buildAllPlatforms();
+ new StyleDictionary(coreConfig).buildAllPlatforms();
  createIndexCssFile({ buildDir, isTheme: false });
 
- themes.forEach((themeVariant) => {
+ themes.forEach(async (themeVariant) => {
  const config = getStyleDictionaryConfig(themeVariant);
- StyleDictionary.extend(config).buildAllPlatforms();
+ new StyleDictionary(config).buildAllPlatforms();
  createIndexCssFile({ buildDir, isTheme: true, themeVariant });
  });
 }