feat: upgrade to v5 and optimize preprocessor fontWeight/styles

Author: jorenbroekema

.changeset/orange-grapes-divide.md

@@ -0,0 +1,5 @@
+---
+'@tokens-studio/sd-transforms': major
+---
+
+Upgrade to latest Style Dictionary v5.0.0. The only breaking change is that this version sd-transforms is no longer compatible with v4, due to the preprocessors making direct use of the performance improvements that came with Style Dictionary v5.

package-lock.json

@@ -41,7 +41,7 @@
     "is-mergeable-object": "^1.1.1"
   },
   "peerDependencies": {
-    "style-dictionary": "^4.3.0 || ^5.0.0-rc.0"
+    "style-dictionary": "^5.0.0"
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.6",

package.json

@@ -4,19 +4,30 @@ import {
   SingleToken,
   SingleFontWeightsToken,
 } from '@tokens-studio/types';
-import { usesReferences, resolveReferences } from 'style-dictionary/utils';
+import { usesReferences, resolveReferences, convertTokenData } from 'style-dictionary/utils';
+import type { TransformedToken } from 'style-dictionary/types';
 import { fontWeightReg, fontStyles } from '../transformFontWeight.js';
 import { TransformOptions } from '../TransformOptions.js';
 
 function resolveFontWeight(fontWeight: string, copy: DeepKeyTokenMap<false>, usesDtcg: boolean) {
+  const tokenMap = convertTokenData(copy, { output: 'map' });
   let resolved = fontWeight;
   if (usesReferences(fontWeight)) {
     try {
-      resolved = `${resolveReferences(fontWeight, copy, { usesDtcg })}`;
+      resolved = `${resolveReferences(fontWeight, tokenMap as Map<string, TransformedToken>, { usesDtcg })}`;
     } catch (e) {
-      // dont throw fatal, see: https://github.com/tokens-studio/sd-transforms/issues/217
-      // we throw once we only support SD v4, for v3 we need to be more permissive
-      console.error(e);
+      if (e instanceof Error) {
+        // create an extended error
+        const err = new Error(
+          `tokens-studio preprocessor -> addFontStyles: Failing to resolve references within fontWeight -> ${fontWeight}.\n\n${e.message}`,
+        );
+        err.stack = e.stack;
+        // dont throw fatal, see: https://github.com/tokens-studio/sd-transforms/issues/217
+        // we throw once we only support SD v4, for v3 we need to be more permissive
+        // Update: maybe sd-transforms should also be (re-)using the new logger approach that's coming to SD v5 in the future
+        // that way it's up to users to decide whether they want these to be thrown, error'd or something else.
+        console.error(err);
+      }
     }
   }
   return resolved;

src/preprocessors/add-font-styles.ts

@@ -44,17 +44,19 @@ describe('cross file references', () => {
   it('supports cross file references e.g. expanding typography', async () => {
     const file = await promises.readFile(outputFilePath, 'utf-8');
     const content = excerpt(file, { start: ':root {', end: '}' });
-    const expectedOutput = `--sdTypoFontWeight: 400;
---sdTypoFontStyle: italic;
---sdPrimaryFont: Inter;
+    const expectedOutput = `--sdPrimaryFont: Inter;
 --sdFontWeight: 800;
 --sdLineHeight: 1.5;
+--sdDimensionScale: 2;
+--sdDimensionXs: 4px;
+--sdWeightWeight: 400;
+--sdWeightStyle: italic;
+--sdTypoFontWeight: 400;
+--sdTypoFontStyle: italic;
 --sdTypo2FontFamily: Inter;
 --sdTypo2FontWeight: 800;
 --sdTypo2LineHeight: 1.5;
 --sdTypo2FontSize: 8px;
---sdDimensionScale: 2;
---sdDimensionXs: 4px;
 --sdTestCompositeFancyCardColor: #fff;
 --sdTestCompositeFancyCardBorderRadius: 18px;
 --sdTestCompositeFancyCardBorderColor: #999;
@@ -69,8 +71,6 @@ describe('cross file references', () => {
 --sdTestTypographyTextFontSize: 25px;
 --sdTestTypographyTextLineHeight: 32px;
 --sdTestTypographyTextFontWeight: 700;
---sdWeightWeight: 400;
---sdWeightStyle: italic;
 --sdTypoAliasFontWeight: 400;
 --sdTypoAliasFontStyle: italic;
 --sdTypo3FontFamily: Inter;

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

@@ -65,25 +65,27 @@ describe('expand composition tokens', () => {
     const file = await promises.readFile(outputFilePath, 'utf-8');
     const content = excerpt(file, {
       start: ':root {',
-      end: '--sdDeepRef: italic 800 26px/1.25 Arial;',
+      end: '\n}',
     });
     const expectedOutput = `--sdCompositionSize: 24px;
 --sdCompositionOpacity: 0.5;
 --sdCompositionFontSize: 96px;
 --sdCompositionFontFamily: Roboto;
 --sdCompositionFontWeight: 700;
---sdCompositionHeaderFontFamily: Roboto;
---sdCompositionHeaderFontSize: 96px;
---sdCompositionHeaderFontWeight: 700;
---sdCompositionHeaderLineHeight: 1.25;
---sdCompositionHeaderLetterSpacing: 1.25em;
 --sdTypography: italic 800 26px/1.25 Arial;
 --sdFontWeightRefWeight: 800;
 --sdFontWeightRefStyle: italic;
 --sdBorder: 4px solid #FFFF00;
 --sdShadowSingle: inset 0 4px 10px 0 rgba(0,0,0,0.4);
 --sdShadowDouble: inset 0 4px 10px 0 rgba(0,0,0,0.4), 0 8px 12px 5px rgba(0,0,0,0.4);
---sdRef: italic 800 26px/1.25 Arial;`;
+--sdRef: italic 800 26px/1.25 Arial;
+--sdDeepRef: italic 800 26px/1.25 Arial;
+--sdDeepRefShadowMulti: inset 0 4px 10px 0 rgba(0,0,0,0.4), 0 8px 12px 5px rgba(0,0,0,0.4);
+--sdCompositionHeaderFontFamily: Roboto;
+--sdCompositionHeaderFontSize: 96px;
+--sdCompositionHeaderFontWeight: 700;
+--sdCompositionHeaderLineHeight: 1.25;
+--sdCompositionHeaderLetterSpacing: 1.25em;`;
     expect(content).to.equal(expectedOutput);
   });
 
@@ -95,6 +97,8 @@ describe('expand composition tokens', () => {
 --sdCompositionFontSize: 96px;
 --sdCompositionFontFamily: Roboto;
 --sdCompositionFontWeight: 700;
+--sdFontWeightRefWeight: 800;
+--sdFontWeightRefStyle: italic;
 --sdCompositionHeaderFontFamily: Roboto;
 --sdCompositionHeaderFontSize: 96px;
 --sdCompositionHeaderFontWeight: 700;
@@ -110,8 +114,6 @@ describe('expand composition tokens', () => {
 --sdTypographyTextDecoration: none;
 --sdTypographyTextCase: none;
 --sdTypographyFontStyle: italic;
---sdFontWeightRefWeight: 800;
---sdFontWeightRefStyle: italic;
 --sdBorderColor: #ffff00;
 --sdBorderWidth: 4px;
 --sdBorderStyle: solid;

test/integration/expand-composition.test.ts

@@ -54,7 +54,7 @@ describe('sd-transforms smoke tests', () => {
 --sdOpacity: 0.25;
 --sdSpacingSm: 8px;
 --sdSpacingXl: 64px;
---sdSpacingMultiValue: 8px 64px; /* You can have multiple values in a single spacing token. Read more on these: https://docs.tokens.studio/available-tokens/spacing-tokens#multi-value-spacing-tokens */
+--sdSpacingMultiValue: 8px 64px; /** You can have multiple values in a single spacing token. Read more on these: https://docs.tokens.studio/available-tokens/spacing-tokens#multi-value-spacing-tokens */
 --sdColorsBlack: #000000;
 --sdColorsWhite: #ffffff;
 --sdColorsBlue: #0000ff;
@@ -111,7 +111,7 @@ describe('sd-transforms smoke tests', () => {
 --sd-opacity: 0.25;
 --sd-spacing-sm: 8px;
 --sd-spacing-xl: 64px;
---sd-spacing-multi-value: 8px 64px; /* You can have multiple values in a single spacing token. Read more on these: https://docs.tokens.studio/available-tokens/spacing-tokens#multi-value-spacing-tokens */
+--sd-spacing-multi-value: 8px 64px; /** You can have multiple values in a single spacing token. Read more on these: https://docs.tokens.studio/available-tokens/spacing-tokens#multi-value-spacing-tokens */
 --sd-colors-black: #000000;
 --sd-colors-white: #ffffff;
 --sd-colors-blue: #0000ff;

test/integration/sd-transforms.test.ts

@@ -58,7 +58,7 @@ describe('w3c spec compliance smoke test', () => {
 --sdOpacity: 0.25;
 --sdSpacingSm: 8px;
 --sdSpacingXl: 64px;
---sdSpacingMultiValue: 8px 64px; /* You can have multiple values in a single spacing token. Read more on these: https://docs.tokens.studio/available-tokens/spacing-tokens#multi-$value-spacing-tokens */
+--sdSpacingMultiValue: 8px 64px; /** You can have multiple values in a single spacing token. Read more on these: https://docs.tokens.studio/available-tokens/spacing-tokens#multi-$value-spacing-tokens */
 --sdColorsBlack: #000000;
 --sdColorsWhite: #ffffff;
 --sdColorsBlue: #0000FF;

test/integration/w3c-spec-compliance.test.ts

@@ -151,7 +151,7 @@ describe('add font style', () => {
 
     expect(stub.calls.size).to.equal(1);
     expect(stub.firstCall?.args[0].message).to.equal(
-      `tries to reference fwRef, which is not defined.`,
+      `tokens-studio preprocessor -> addFontStyles: Failing to resolve references within fontWeight -> {fwRef}.\n\ntries to reference {fwRef}, which is not defined.`,
     );
   });
 
@@ -291,8 +291,14 @@ describe('add font style', () => {
       },
     } as DeepKeyTokenMap<false>;
 
+    const stub = stubMethod(console, 'error');
     const processed = addFontStyles(tokens);
+    restore();
 
+    expect(stub.calls.size).to.equal(1);
+    expect(stub.firstCall?.args[0].message).to.equal(
+      `tokens-studio preprocessor -> addFontStyles: Failing to resolve references within fontWeight -> {foo}.\n\ntries to reference {foo}, which is not defined.`,
+    );
     expect(processed).to.eql({
       foo: {
         $type: 'fontWeight',

test/spec/preprocessors/add-font-styles.spec.ts

@@ -317,7 +317,7 @@ describe('register', () => {
   --opacity: 0.25;
   --spacingSm: 8px;
   --spacingXl: 64px;
-  --spacingMultiValue: 8px 64px; /* You can have multiple values in a single spacing token. Read more on these: https://docs.tokens.studio/available-tokens/spacing-tokens#multi-value-spacing-tokens */
+  --spacingMultiValue: 8px 64px; /** You can have multiple values in a single spacing token. Read more on these: https://docs.tokens.studio/available-tokens/spacing-tokens#multi-value-spacing-tokens */
   --colorsBlack: #000000;
   --colorsWhite: #ffffff;
   --colorsBlue: #0000ff;