wip fix font style add preprocess

Author: jorenbroekema

package-lock.json

@@ -66,29 +66,37 @@ function recurse(
       if (tokenType === 'typography') {
         const tokenTypographyValue = tokenValue as TokenTypographyValue & { fontStyle: string };
         if (tokenTypographyValue.fontWeight === undefined) return;
+
+        console.log(123, tokenTypographyValue);
         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
+          // token[`${usesDtcg ? '$' : ''}value`] = weight;
+          (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,16 +74,18 @@ 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);
   --sdRef: italic 800 26px/1.25 Arial;`,
     );
   });
 
-  it('optionally can transform typography, border and shadow tokens', async () => {
+  it.only('optionally can transform typography, border and shadow tokens', async () => {
     const file = await promises.readFile(outputFilePath, 'utf-8');
+    console.log(file);
     expect(file).to.include(
       `
   --sdCompositionSize: 24px;
@@ -95,7 +97,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 +107,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' },
+        },
       },
     });
   });