BREAKING: use preprocessors if the passed SD is prerelease.2 or higher

.changeset/six-kiwis-drive.md

@@ -0,0 +1,5 @@
+---
+'@tokens-studio/sd-transforms': minor
+---
+
+Will now use preprocessors instead of parsers when user Style-Dictionary is v4.0.0-prerelease.2 or higher. Fixes an issue with multi-file references not being resolvable when running composite token expansion or add font style utilities.

README.md

@@ -177,6 +177,8 @@ registerTransforms(StyleDictionary, {
   expand: {
     composition: false,
     typography: true,
+    // Note: when using Style-Dictionary v4.0.0-prerelease.2 or higher, filePath no longer gets passed
+    // as an argument, because preprocessors work on the full dictionary rather than per file (parsers)
     border: (token, filePath) =>
       token.value.width !== 0 && filePath.startsWith(path.resolve('tokens/core')),
     shadow: false,

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": "github:amzn/style-dictionary#types"
+    "style-dictionary": "4.0.0-prerelease.7"
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.0",

src/parsers/add-font-styles.ts

@@ -20,7 +20,15 @@ function recurse(
       }
       let fontWeight = value.fontWeight;
       if (usesReferences(fontWeight)) {
-        fontWeight = `${resolveReferences(fontWeight, copy) ?? fontWeight}`;
+        try {
+          const resolved = resolveReferences(fontWeight, copy);
+          if (resolved) {
+            fontWeight = `${resolved}`;
+          }
+        } catch (e) {
+          // we don't want to throw a fatal error, we'll just keep the ref as is
+          console.error(e);
+        }
       }
       // cast because fontStyle is a prop we will add ourselves
       const tokenValue = value as TokenTypographyValue & { fontStyle: string };

src/parsers/expand-composites.ts

@@ -111,7 +111,15 @@ function recurse(
         if (expand) {
           // if token uses a reference, attempt to resolve it
           if (typeof token.value === 'string' && usesReferences(token.value)) {
-            token.value = resolveReferences(token.value, copy as DesignTokens) ?? token.value;
+            try {
+              const resolved = resolveReferences(token.value, copy as DesignTokens);
+              if (resolved) {
+                token.value = resolved;
+              }
+            } catch (e) {
+              // we don't want to throw a fatal error, expansion can still occur, just with the reference kept as is
+              console.error(e);
+            }
             // 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' &&

src/registerTransforms.ts

@@ -40,17 +40,32 @@ export async function registerTransforms(
   sd: typeof StyleDictionary,
   transformOpts?: TransformOptions,
 ) {
+  // >= 4.0.0-prelease.2, once SD reaches full release: 4.0.0, sd-transforms will get
+  // a breaking release where we always use preprocessors
+  // and are no longer backwards compatible with sd 3 or lower
+  const supportsPreprocessors =
+    sd.VERSION.match(/4\.0\.0(-prerelease\.([2-9]|[0-9]{2}))/g) !== null;
   // 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) {
     // expand composition tokens, typography, border, shadow (latter 3 conditionally, as opt-in)
-    sd.registerParser({
-      pattern: /\.json$/,
-      parse: ({ filePath, contents }) => {
-        const tokens = JSON.parse(contents);
-        return parseTokens(tokens, transformOpts, filePath) as DesignTokens;
-      },
-    });
+    if (supportsPreprocessors) {
+      sd.registerPreprocessor({
+        name: 'sd-transforms-preprocessors',
+        preprocessor: dictionary => {
+          console.log('halllelujah');
+          return parseTokens(dictionary, transformOpts) as DesignTokens;
+        },
+      });
+    } else {
+      sd.registerParser({
+        pattern: /\.json$/,
+        parse: ({ filePath, contents }) => {
+          const tokens = JSON.parse(contents);
+          return parseTokens(tokens, transformOpts, filePath) as DesignTokens;
+        },
+      });
+    }
   }
 
   sd.registerTransform({

test/integration/cross-file-refs.test.ts

@@ -0,0 +1,51 @@
+import type StyleDictionary from 'style-dictionary';
+import { expect } from '@esm-bundle/chai';
+import { promises } from 'fs';
+import path from 'path';
+import { cleanup, init } from './utils.js';
+
+const outputDir = 'test/integration/tokens/';
+const outputFileName = 'vars.css';
+const outputFilePath = path.resolve(outputDir, outputFileName);
+
+const cfg = {
+  source: ['test/integration/tokens/cross-file-refs-*.tokens.json'],
+  platforms: {
+    css: {
+      transformGroup: 'tokens-studio',
+      prefix: 'sd',
+      buildPath: outputDir,
+      files: [
+        {
+          destination: outputFileName,
+          format: 'css/variables',
+        },
+      ],
+    },
+  },
+};
+
+let dict: StyleDictionary | undefined;
+
+describe('cross file references', () => {
+  beforeEach(async () => {
+    cleanup(dict);
+    dict = await init(cfg, { expand: { typography: true } });
+  });
+
+  afterEach(async () => {
+    await cleanup(dict);
+  });
+
+  it('supports cross file references e.g. expanding typography', async () => {
+    const file = await promises.readFile(outputFilePath, 'utf-8');
+    console.log(file);
+    expect(file).to.include(`
+  --sdTypoFontWeight: 400;
+  --sdTypoFontStyle: italic;
+  --sdWeight: 400 italic;
+  --sdTypoAliasFontWeight: 400;
+  --sdTypoAliasFontStyle: italic;
+`);
+  });
+});

test/integration/swift-UI-color.test.ts

@@ -1,5 +1,5 @@
-import { expect } from '@esm-bundle/chai';
 import StyleDictionary from 'style-dictionary';
+import { expect } from '@esm-bundle/chai';
 import Color from 'tinycolor2';
 import { promises } from 'fs';
 import path from 'path';
@@ -43,14 +43,14 @@ const cfg = {
   },
 };
 
-let dict: StyleDictionary.Core | undefined;
+let dict: StyleDictionary | undefined;
 
 describe('outputReferences integration', () => {
-  beforeEach(() => {
+  beforeEach(async () => {
     if (dict) {
       cleanup(dict);
     }
-    dict = init(cfg, { 'ts/color/modifiers': { format: 'hex' } });
+    dict = await init(cfg, { 'ts/color/modifiers': { format: 'hex' } });
   });
 
   afterEach(() => {

test/integration/tokens/cross-file-refs-1.tokens.json

@@ -0,0 +1,8 @@
+{
+  "typo": {
+    "value": {
+      "fontWeight": "{weight}"
+    },
+    "type": "typography"
+  }
+}

test/integration/tokens/cross-file-refs-2.tokens.json

@@ -0,0 +1,6 @@
+{
+  "weight": {
+    "value": "Regular italic",
+    "type": "fontWeights"
+  }
+}

test/integration/tokens/cross-file-refs-3.tokens.json

@@ -0,0 +1,6 @@
+{
+  "typo-alias": {
+    "value": "{typo}",
+    "type": "typography"
+  }
+}