chore: upgrade to sd v4, use its ref utils

package.json

@@ -46,7 +46,7 @@
     "expr-eval": "^2.0.2",
     "is-mergeable-object": "^1.1.1",
     "postcss-calc-ast-parser": "^0.1.4",
-    "style-dictionary": "^3.8.0"
+    "style-dictionary": "4.0.0-prerelease.4"
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.0",
@@ -72,7 +72,7 @@
     "rollup": "^3.18.0",
     "ts-mocha": "^10.0.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.5"
+    "typescript": "^5.3.3"
   },
   "keywords": [
     "design tokens",

src/css/transformTypography.ts

@@ -30,13 +30,12 @@ function quoteWrapWhitespacedFont(fontString: string) {
 }
 
 export function processFontFamily(fontFamily: string | undefined) {
-  if (isNothing(fontFamily)) {
+  if (isNothing(fontFamily) || fontFamily === undefined) {
     return 'sans-serif';
   }
 
-  if (isCommaSeparated(fontFamily as string)) {
-    let fontFamilyArray = [];
-    fontFamilyArray = (fontFamily as string).split(',').map(part => part.trim());
+  if (isCommaSeparated(fontFamily)) {
+    const fontFamilyArray = fontFamily.split(',').map(part => part.trim());
     return fontFamilyArray.map((part: string) => quoteWrapWhitespacedFont(part)).join(', ');
   }
 

src/parsers/add-font-styles.ts

@@ -1,7 +1,7 @@
 import { DeepKeyTokenMap, TokenTypographyValue } from '@tokens-studio/types';
+import { usesReference, resolveReferences } from 'style-dictionary/utils';
 import { fontWeightReg, fontStyles } from '../transformFontWeights.js';
 import { TransformOptions } from '../TransformOptions.js';
-import { resolveReference } from './resolveReference.js';
 
 function recurse(
   slice: DeepKeyTokenMap<false>,
@@ -18,7 +18,10 @@ function recurse(
       if (typeof value !== 'object' || value.fontWeight === undefined) {
         continue;
       }
-      const fontWeight = resolveReference(value.fontWeight, copy);
+      let fontWeight = value.fontWeight;
+      if (usesReference(fontWeight)) {
+        fontWeight = resolveReferences(fontWeight, copy) ?? fontWeight;
+      }
       // cast because fontStyle is a prop we will add ourselves
       const tokenValue = value as TokenTypographyValue & { fontStyle: string };
 

src/parsers/expand-composites.ts

@@ -1,12 +1,12 @@
-import { DeepKeyTokenMap, SingleToken } from '@tokens-studio/types';
+import { DeepKeyTokenMap, SingleToken, TokenBoxshadowValue } from '@tokens-studio/types';
+import { usesReference, resolveReferences } from 'style-dictionary/utils';
 import {
   ExpandFilter,
   TransformOptions,
   Expandables,
   ExpandablesAsStrings,
   expandablesAsStringsArr,
 } from '../TransformOptions.js';
-import { resolveReference } from './resolveReference.js';
 
 const typeMaps = {
   boxShadow: {
@@ -30,6 +30,10 @@ const typeMaps = {
   },
 };
 
+function flattenValues<T extends SingleToken<false>['value']>(val: T): T {
+  return Object.fromEntries(Object.entries(val).map(([k, v]) => [k, v.value])) as T;
+}
+
 export function expandToken(compToken: SingleToken<false>, isShadow = false): SingleToken<false> {
   if (typeof compToken.value !== 'object') {
     return compToken;
@@ -90,7 +94,7 @@ function recurse(
   };
 
   for (const key in slice) {
-    const token = slice[key];
+    const token = slice[key] as SingleToken<false>;
     if (typeof token !== 'object' || token === null) {
       continue;
     }
@@ -104,8 +108,21 @@ function recurse(
           filePath,
         );
         if (expand) {
-          // if token uses a reference, resolve it
-          token.value = resolveReference(token.value, copy);
+          // if token uses a reference, attempt to resolve it
+          if (typeof token.value === 'string' && usesReference(token.value)) {
+            token.value = resolveReferences(token.value, copy) ?? token.value;
+            // If every key of the result (object) is a number, the ref value is a multi-value, which means TokenBoxshadowValue[]
+            if (
+              typeof token.value === 'object' &&
+              Object.keys(token.value).every(key => !isNaN(Number(key)))
+            ) {
+              token.value = (Object.values(token.value) as TokenBoxshadowValue[]).map(part =>
+                flattenValues(part),
+              );
+            } else if (!usesReference(token.value)) {
+              token.value = flattenValues(token.value);
+            }
+          }
           slice[key] = expandToken(token, expandType === 'shadow');
         }
       }

src/registerTransforms.ts

@@ -1,4 +1,4 @@
-import { Core, DesignTokens } from 'style-dictionary';
+import StyleDictionary, { DesignTokens } from 'style-dictionary';
 import { transformDimension } from './transformDimension.js';
 import { transformHEXRGBaForCSS } from './css/transformHEXRGBa.js';
 import { transformShadowForCSS } from './css/transformShadow.js';
@@ -35,7 +35,10 @@ export const transforms = [
  * typecasting since this will need to work in browser environment, so we cannot
  * import style-dictionary as it depends on nodejs env
  */
-export async function registerTransforms(sd: Core, transformOpts?: TransformOptions) {
+export async function registerTransforms(
+  sd: StyleDictionary.Core,
+  transformOpts?: TransformOptions,
+) {
   // Allow completely disabling the registering of this parser
   // in case people want to combine the expandComposites() utility with their own parser and prevent conflicts
   if (transformOpts?.expand !== false) {

test/integration/custom-group.test.ts

@@ -27,34 +27,31 @@ const cfg = {
 };
 let dict: StyleDictionary.Core | undefined;
 
-function before() {
-  if (dict) {
-    cleanup(dict);
-  }
+async function before() {
+  cleanup(dict);
   registerTransforms(StyleDictionary);
   StyleDictionary.registerTransformGroup({
     name: 'custom/tokens-studio',
     // remove 'px' appending transform to unitless values
     transforms: transforms.filter(transform => transform !== 'ts/size/px'),
   });
-  dict = StyleDictionary.extend(cfg);
-  dict.buildAllPlatforms();
+  // @ts-expect-error v4 does not have types aligned yet
+  dict = new StyleDictionary(cfg);
+  await dict?.buildAllPlatforms();
 }
 
-function after() {
+async function after() {
+  await cleanup(dict);
   delete StyleDictionary.transformGroup['custom/tokens-studio'];
-  if (dict) {
-    cleanup(dict);
-  }
 }
 
 describe('custom transform group', () => {
-  afterEach(() => {
-    after();
+  afterEach(async () => {
+    await after();
   });
 
   it('allows easy use of custom transform group with sd-transforms', async () => {
-    before();
+    await before();
 
     const file = await promises.readFile(outputFilePath, 'utf-8');
     expect(file).to.include(`--length: 24;`);

test/integration/exclude-parent-keys.test.ts

@@ -1,5 +1,4 @@
 import { expect } from '@esm-bundle/chai';
-import StyleDictionary from 'style-dictionary';
 import { promises } from 'fs';
 import path from 'path';
 import { cleanup, init } from './utils.js';
@@ -25,36 +24,30 @@ const cfg = {
   },
 };
 let transformOpts = {};
-let dict: StyleDictionary.Core | undefined;
-
-function before() {
-  if (dict) {
-    cleanup(dict);
-  }
-  dict = init(cfg, transformOpts);
-}
-
-function after() {
-  if (dict) {
-    cleanup(dict);
-  }
-}
 
 describe('exclude parent keys', () => {
-  afterEach(() => {
-    after();
+  beforeEach(async () => {
+    await cleanup();
+  });
+
+  afterEach(async () => {
+    await cleanup();
   });
 
   it('does not expand parent keys by default and throws on broken references', async () => {
-    expect(before).to.throw('Problems were found when trying to resolve property references');
+    let error;
+    await init(cfg).catch(e => {
+      error = e.message;
+    });
+    expect(error).to.include('Problems were found when trying to resolve property references');
   });
 
   it('optionally excludes parent keys', async () => {
     transformOpts = {
       excludeParentKeys: true,
     };
-    before();
-
+    await init(cfg, transformOpts);
+    await cleanup();
     const file = await promises.readFile(outputFilePath, 'utf-8');
     expect(file).to.include(
       `

test/integration/expand-composition.test.ts

@@ -27,26 +27,22 @@ const cfg = {
 let transformOpts = {};
 let dict: StyleDictionary.Core | undefined;
 
-function before() {
-  if (dict) {
-    cleanup(dict);
-  }
-  dict = init(cfg, transformOpts);
+async function before() {
+  await cleanup(dict);
+  dict = await init(cfg, transformOpts);
 }
 
-function after() {
-  if (dict) {
-    cleanup(dict);
-  }
+async function after() {
+  await cleanup(dict);
 }
 
 describe('expand composition tokens', () => {
-  beforeEach(() => {
-    before();
+  beforeEach(async () => {
+    await before();
   });
 
-  afterEach(() => {
-    after();
+  afterEach(async () => {
+    await after();
   });
 
   it('only expands composition tokens by default', async () => {
@@ -79,7 +75,7 @@ describe('expand composition tokens', () => {
         shadow: true,
       },
     };
-    before();
+    await before();
 
     const file = await promises.readFile(outputFilePath, 'utf-8');
     expect(file).to.include(
@@ -132,7 +128,7 @@ describe('expand composition tokens', () => {
         typography: true,
       },
     };
-    before();
+    await before();
 
     const file = await promises.readFile(outputFilePath, 'utf-8');
     expect(file).to.include(
@@ -166,7 +162,7 @@ describe('expand composition tokens', () => {
         shadow: true,
       },
     };
-    before();
+    await before();
 
     const file = await promises.readFile(outputFilePath, 'utf-8');
     expect(file).to.include(

test/integration/math-in-complex-values.test.ts

@@ -28,17 +28,13 @@ const cfg = {
 let dict: StyleDictionary.Core | undefined;
 
 describe('sd-transforms advanced tests', () => {
-  beforeEach(() => {
-    if (dict) {
-      cleanup(dict);
-    }
-    dict = init(cfg);
+  beforeEach(async () => {
+    await cleanup(dict);
+    dict = await init(cfg);
   });
 
-  afterEach(() => {
-    if (dict) {
-      cleanup(dict);
-    }
+  afterEach(async () => {
+    await cleanup(dict);
   });
 
   it('supports typography tokens with math or fontweight alias', async () => {

test/integration/object-value-references.test.ts

@@ -28,17 +28,13 @@ const cfg = {
 let dict: StyleDictionary.Core | undefined;
 
 describe('typography references', () => {
-  beforeEach(() => {
-    if (dict) {
-      cleanup(dict);
-    }
-    dict = init(cfg);
+  beforeEach(async () => {
+    await cleanup(dict);
+    dict = await init(cfg);
   });
 
-  afterEach(() => {
-    if (dict) {
-      cleanup(dict);
-    }
+  afterEach(async () => {
+    await cleanup(dict);
   });
 
   it('supports typography objects when referenced by another token', async () => {