fix: split fontWeight tokens font style properly into parent group

Author: jorenbroekema

.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-lock.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",

package.json

@@ -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/add-font-styles.ts

@@ -42,8 +42,8 @@ describe('cross file references', () => {
   it('supports cross file references e.g. expanding typography', async () => {
     const file = await promises.readFile(outputFilePath, 'utf-8');
     expect(file).to.include(`
-  --sdTypoFontWeight: 400;
-  --sdTypoFontStyle: italic;
+  --sdTypoFontWeightWeight: 400;
+  --sdTypoFontWeightStyle: italic;
   --sdPrimaryFont: Inter;
   --sdFontWeight: 800;
   --sdLineHeight: 1.5;
@@ -67,14 +67,14 @@ describe('cross file references', () => {
   --sdTestTypographyTextFontSize: 25px;
   --sdTestTypographyTextLineHeight: 32px;
   --sdTestTypographyTextFontWeight: 700;
-  --sdWeight: 400;
-  --sdTypoAliasFontWeight: 400;
-  --sdTypoAliasFontStyle: italic;
+  --sdWeightWeight: 400;
+  --sdWeightStyle: italic;
+  --sdTypoAliasFontWeightWeight: 400;
+  --sdTypoAliasFontWeightStyle: italic;
   --sdTypo3FontFamily: Inter;
   --sdTypo3FontWeight: 800;
   --sdTypo3LineHeight: 1.5;
   --sdTypo3FontSize: 8px;
-  --sdFontStyle: italic;
 `);
   });
 });

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

@@ -74,7 +74,8 @@ describe('expand composition tokens', () => {
   --sdCompositionHeaderFontSizes: 96px;
   --sdCompositionHeaderFontWeights: 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);
@@ -95,7 +96,8 @@ describe('expand composition tokens', () => {
   --sdCompositionHeaderFontSizes: 96px;
   --sdCompositionHeaderFontWeights: 700;
   --sdTypographyFontFamily: Arial;
-  --sdTypographyFontWeight: 800;
+  --sdTypographyFontWeightWeight: 800;
+  --sdTypographyFontWeightStyle: italic;
   --sdTypographyLineHeight: 1.25;
   --sdTypographyFontSize: 26px;
   --sdTypographyLetterSpacing: 0rem;
@@ -104,7 +106,8 @@ describe('expand composition tokens', () => {
   --sdTypographyTextDecoration: none;
   --sdTypographyTextCase: none;
   --sdTypographyFontStyle: italic;
-  --sdFontWeightRef: 800;
+  --sdFontWeightRefWeight: 800;
+  --sdFontWeightRefStyle: italic;
   --sdBorderColor: #ffff00;
   --sdBorderWidth: 4px;
   --sdBorderStyle: solid;

test/integration/expand-composition.test.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}',
         },
       },
     });

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

@@ -178,7 +178,7 @@ const tokens = {
     },
     type: 'typography',
   },
-  'shadow-blur': {
+  blur: {
     value: '10',
     type: 'sizing',
   },
@@ -187,7 +187,7 @@ const tokens = {
       {
         x: '0',
         y: '4',
-        blur: '{shadow-blur}',
+        blur: '{blur}',
         spread: '0',
         color: 'rgba(0,0,0,0.4)',
         type: 'innerShadow',
@@ -337,7 +337,7 @@ describe('register', () => {
   --fontSizesH6: 16px;
   --fontSizesBody: 16px;
   --heading6: 700 16px/1 'Arial Black', 'Suisse Int\\'l', sans-serif;
-  --shadowBlur: 10px;
+  --blur: 10px;
   --shadow: inset 0 4px 10px 0 rgba(0,0,0,0.4);
   --borderWidth: 5px;
   --border: 5px solid #000000;
@@ -352,7 +352,7 @@ describe('register', () => {
       tokens,
       preprocessors: ['tokens-studio'],
       expand: {
-        include: ['border', 'boxShadow'],
+        include: ['border', 'shadow'],
       },
       platforms: {
         compose: {
@@ -386,6 +386,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.*
 
 object bar {
+  val blur = 10px
   val borderColor = #000000
   val borderStyle = solid
   val borderWidth = 5px
@@ -423,12 +424,11 @@ Arial Black, Suisse Int'l, sans-serif
   val lineHeightsHeading = 1.1
   val opacity = 0.25
   val shadowBlur = 10px
-  val shadowBlur = 10px
   val shadowColor = rgba(0,0,0,0.4)
+  val shadowOffsetX = 0
+  val shadowOffsetY = 4px
   val shadowSpread = 0
   val shadowType = innerShadow
-  val shadowX = 0
-  val shadowY = 4
   /** 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 */
   val spacingMultiValue = 8px 64px
   val spacingSm = 8px