fix: split fontWeight tokens font style properly into parent group

.changeset/cool-windows-hang.md

@@ -0,0 +1,5 @@
+---
+'@tokens-studio/sd-transforms': minor
+---
+
+Add lineHeight and fontWeight types to the expandTypesMap. Even though DTCG spec does not yet recognize them, they really are special types and marking them as such enables transforms to target them specifically.

.changeset/two-ads-confess.md

@@ -0,0 +1,5 @@
+---
+'@tokens-studio/sd-transforms': minor
+---
+
+Properly split fontWeight tokens that contain fontStyle into the parent group. For typography tokens this was correct but for fontWeight tokens, collision could occur between the token and its sibling tokens.

package.json

@@ -41,7 +41,7 @@
     "is-mergeable-object": "^1.1.1"
   },
   "peerDependencies": {
-    "style-dictionary": "^4.0.0"
+    "style-dictionary": "^4.0.1"
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.6",

src/index.ts

@@ -31,6 +31,10 @@ export const expandTypesMap = {
     paragraphIndent: 'dimension',
     textDecoration: 'other',
     textCase: 'other',
+    // even though this type does not yet exist in DTCG, it really should, since lineHeights can be both dimension or number
+    lineHeight: 'lineHeight',
+    // same as lineHeight except for fontWeight: recognized fontWeight keys (e.g. "regular") should be recognized as well as numbers
+    fontWeight: 'fontWeight',
   },
   /**
    * boxShadow/x/y are not shadow/offsetX/offsetY here because the SD expand on global level

src/preprocessors/add-font-styles.ts

@@ -66,29 +66,35 @@ function recurse(
       if (tokenType === 'typography') {
         const tokenTypographyValue = tokenValue as TokenTypographyValue & { fontStyle: string };
         if (tokenTypographyValue.fontWeight === undefined) return;
+
         const fontWeight = resolveFontWeight(
           `${tokenTypographyValue.fontWeight}`,
           refCopy,
           usesDtcg,
         );
         const { weight, style } = splitWeightStyle(fontWeight, alwaysAddFontStyle);
-
-        tokenTypographyValue.fontWeight = weight;
         if (style) {
+          tokenTypographyValue.fontWeight = weight;
           tokenTypographyValue.fontStyle = style;
         }
       } else if (tokenType === 'fontWeight') {
         const tokenFontWeightsValue = tokenValue as SingleFontWeightsToken['value'];
         const fontWeight = resolveFontWeight(`${tokenFontWeightsValue}`, refCopy, usesDtcg);
         const { weight, style } = splitWeightStyle(fontWeight, alwaysAddFontStyle);
 
-        // since tokenFontWeightsValue is a primitive (string), we have to permutate the change directly
-        token[`${usesDtcg ? '$' : ''}value`] = weight;
         if (style) {
-          (slice as DeepKeyTokenMap<false>)[`fontStyle`] = {
-            ...token,
-            [`${usesDtcg ? '$' : ''}type`]: 'fontStyle',
-            [`${usesDtcg ? '$' : ''}value`]: style,
+          // since tokenFontWeightsValue is a primitive (string), we have to permutate the change directly
+          (slice[key] as DeepKeyTokenMap<false>) = {
+            weight: {
+              ...token,
+              [`${usesDtcg ? '$' : ''}type`]: 'fontWeight',
+              [`${usesDtcg ? '$' : ''}value`]: weight,
+            },
+            style: {
+              ...token,
+              [`${usesDtcg ? '$' : ''}type`]: 'fontStyle',
+              [`${usesDtcg ? '$' : ''}value`]: style,
+            },
           };
         }
       }

src/preprocessors/align-types.ts

@@ -1,4 +1,5 @@
 import { DeepKeyTokenMap, SingleToken, TokenTypes } from '@tokens-studio/types';
+import { typeDtcgDelegate } from 'style-dictionary/utils';
 
 // TODO: composition tokens props also need the same types alignments..
 // nested composition tokens are out of scope.
@@ -86,7 +87,8 @@ function recurse(slice: DeepKeyTokenMap<false> | SingleToken<false>) {
 }
 
 export function alignTypes(dictionary: DeepKeyTokenMap<false>): DeepKeyTokenMap<false> {
-  const copy = structuredClone(dictionary);
+  // pre-emptively type dtcg delegate because otherwise we cannot align types properly here
+  const copy = typeDtcgDelegate(structuredClone(dictionary));
   recurse(copy);
   return copy;
 }

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

@@ -32,7 +32,10 @@ let dict: StyleDictionary | undefined;
 describe('cross file references', () => {
   beforeEach(async () => {
     cleanup(dict);
-    dict = await init(cfg, { withSDBuiltins: false, expand: { typography: true } });
+    dict = await init(cfg, {
+      withSDBuiltins: false,
+      expand: { typography: true },
+    });
   });
 
   afterEach(async () => {
@@ -67,14 +70,14 @@ describe('cross file references', () => {
   --sdTestTypographyTextFontSize: 25px;
   --sdTestTypographyTextLineHeight: 32px;
   --sdTestTypographyTextFontWeight: 700;
-  --sdWeight: 400;
+  --sdWeightWeight: 400;
+  --sdWeightStyle: italic;
   --sdTypoAliasFontWeight: 400;
   --sdTypoAliasFontStyle: italic;
   --sdTypo3FontFamily: Inter;
   --sdTypo3FontWeight: 800;
   --sdTypo3LineHeight: 1.5;
   --sdTypo3FontSize: 8px;
-  --sdFontStyle: italic;
 `);
   });
 });

test/integration/expand-composition.test.ts

@@ -70,11 +70,12 @@ describe('expand composition tokens', () => {
   --sdCompositionFontSize: 96px;
   --sdCompositionFontFamily: Roboto;
   --sdCompositionFontWeight: 700;
-  --sdCompositionHeaderFontFamilies: Roboto;
-  --sdCompositionHeaderFontSizes: 96px;
-  --sdCompositionHeaderFontWeights: 700;
+  --sdCompositionHeaderFontFamily: Roboto;
+  --sdCompositionHeaderFontSize: 96px;
+  --sdCompositionHeaderFontWeight: 700;
   --sdTypography: italic 800 26px/1.25 Arial;
-  --sdFontWeightRef: 800;
+  --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);
@@ -91,9 +92,9 @@ describe('expand composition tokens', () => {
   --sdCompositionFontSize: 96px;
   --sdCompositionFontFamily: Roboto;
   --sdCompositionFontWeight: 700;
-  --sdCompositionHeaderFontFamilies: Roboto;
-  --sdCompositionHeaderFontSizes: 96px;
-  --sdCompositionHeaderFontWeights: 700;
+  --sdCompositionHeaderFontFamily: Roboto;
+  --sdCompositionHeaderFontSize: 96px;
+  --sdCompositionHeaderFontWeight: 700;
   --sdTypographyFontFamily: Arial;
   --sdTypographyFontWeight: 800;
   --sdTypographyLineHeight: 1.25;
@@ -104,27 +105,28 @@ describe('expand composition tokens', () => {
   --sdTypographyTextDecoration: none;
   --sdTypographyTextCase: none;
   --sdTypographyFontStyle: italic;
-  --sdFontWeightRef: 800;
+  --sdFontWeightRefWeight: 800;
+  --sdFontWeightRefStyle: italic;
   --sdBorderColor: #ffff00;
   --sdBorderWidth: 4px;
   --sdBorderStyle: solid;
-  --sdShadowSingleX: 0rem;
-  --sdShadowSingleY: 4px;
   --sdShadowSingleBlur: 10px;
   --sdShadowSingleSpread: 0rem;
   --sdShadowSingleColor: rgba(0, 0, 0, 0.4);
   --sdShadowSingleType: innerShadow;
-  --sdShadowDouble1X: 0rem;
-  --sdShadowDouble1Y: 4px;
+  --sdShadowSingleOffsetX: 0rem;
+  --sdShadowSingleOffsetY: 4px;
   --sdShadowDouble1Blur: 10px;
   --sdShadowDouble1Spread: 0rem;
   --sdShadowDouble1Color: rgba(0, 0, 0, 0.4);
   --sdShadowDouble1Type: innerShadow;
-  --sdShadowDouble2X: 0rem;
-  --sdShadowDouble2Y: 8px;
+  --sdShadowDouble1OffsetX: 0rem;
+  --sdShadowDouble1OffsetY: 4px;
   --sdShadowDouble2Blur: 12px;
   --sdShadowDouble2Spread: 5px;
-  --sdShadowDouble2Color: rgba(0, 0, 0, 0.4);`,
+  --sdShadowDouble2Color: rgba(0, 0, 0, 0.4);
+  --sdShadowDouble2OffsetX: 0rem;
+  --sdShadowDouble2OffsetY: 8px;`,
     );
   });
 
@@ -159,17 +161,17 @@ describe('expand composition tokens', () => {
     const file = await promises.readFile(outputFilePath, 'utf-8');
     expect(file).to.include(
       `
-  --sdDeepRefShadowMulti1X: 0rem;
-  --sdDeepRefShadowMulti1Y: 4px;
   --sdDeepRefShadowMulti1Blur: 10px;
   --sdDeepRefShadowMulti1Spread: 0rem;
   --sdDeepRefShadowMulti1Color: rgba(0, 0, 0, 0.4);
   --sdDeepRefShadowMulti1Type: innerShadow;
-  --sdDeepRefShadowMulti2X: 0rem;
-  --sdDeepRefShadowMulti2Y: 8px;
+  --sdDeepRefShadowMulti1OffsetX: 0rem;
+  --sdDeepRefShadowMulti1OffsetY: 4px;
   --sdDeepRefShadowMulti2Blur: 12px;
   --sdDeepRefShadowMulti2Spread: 5px;
-  --sdDeepRefShadowMulti2Color: rgba(0, 0, 0, 0.4)`,
+  --sdDeepRefShadowMulti2Color: rgba(0, 0, 0, 0.4);
+  --sdDeepRefShadowMulti2OffsetX: 0rem;
+  --sdDeepRefShadowMulti2OffsetY: 8px;`,
     );
   });
 });

test/integration/tokens/expand-composition.tokens.json

@@ -22,9 +22,9 @@
     },
     "header": {
       "value": {
-        "fontFamilies": "{composition.fontFamily}",
-        "fontSizes": "96",
-        "fontWeights": "{composition.fontWeight}"
+        "fontFamily": "{composition.fontFamily}",
+        "fontSize": "96",
+        "fontWeight": "{composition.fontWeight}"
       },
       "type": "composition"
     }

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

@@ -106,8 +106,13 @@ describe('add font style', () => {
         fw: { value: 'SemiBold Italic', type: 'fontWeight' },
       }),
     ).to.eql({
-      fw: { value: 'SemiBold', type: 'fontWeight' },
-      fontStyle: { value: 'italic', type: 'fontStyle' },
+      fw: {
+        weight: {
+          value: 'SemiBold',
+          type: 'fontWeight',
+        },
+        style: { value: 'italic', type: 'fontStyle' },
+      },
     });
   });
 
@@ -122,8 +127,10 @@ describe('add font style', () => {
       }),
     ).to.eql({
       fw: {
-        weight: { $value: 'SemiBold', $type: 'fontWeight' },
-        fontStyle: { $value: 'italic', $type: 'fontStyle' },
+        weight: {
+          weight: { $value: 'SemiBold', $type: 'fontWeight' },
+          style: { $value: 'italic', $type: 'fontStyle' },
+        },
       },
     });
   });
@@ -244,7 +251,7 @@ describe('add font style', () => {
     });
   });
 
-  it('handlestinvalid fontweight structures e.g. mixing token group / token, also handles DTCG format', () => {
+  it('handles invalid fontweight structures e.g. mixing token group / token, also handles DTCG format', () => {
     // @ts-expect-error aligned types already here
     const tokens = {
       foo: {
@@ -277,7 +284,7 @@ describe('add font style', () => {
       thing: {
         $type: 'typography',
         $value: {
-          fontWeight: '700',
+          fontWeight: '{foo}',
         },
       },
     });