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 });
   });
 }