fix: add lineHeight and fontWeight types to expandTypesMap

tokens-studio · Jul 18, 2024 · ab13f30 · ab13f30
1 parent d2117a7
commit ab13f30
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 29 deletions.
diff --git a/.changeset/cool-windows-hang.md b/.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.
diff --git a/src/index.ts b/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

diff --git a/src/preprocessors/align-types.ts b/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;
 }
diff --git a/test/integration/cross-file-refs.test.ts b/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 () => {
@@ -42,8 +45,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(`
-  --sdTypoFontWeightWeight: 400;
-  --sdTypoFontWeightStyle: italic;
+  --sdTypoFontWeight: 400;
+  --sdTypoFontStyle: italic;
   --sdPrimaryFont: Inter;
   --sdFontWeight: 800;
   --sdLineHeight: 1.5;
@@ -69,8 +72,8 @@ describe('cross file references', () => {
   --sdTestTypographyTextFontWeight: 700;
   --sdWeightWeight: 400;
   --sdWeightStyle: italic;
-  --sdTypoAliasFontWeightWeight: 400;
-  --sdTypoAliasFontWeightStyle: italic;
+  --sdTypoAliasFontWeight: 400;
+  --sdTypoAliasFontStyle: italic;
   --sdTypo3FontFamily: Inter;
   --sdTypo3FontWeight: 800;
   --sdTypo3LineHeight: 1.5;

diff --git a/test/integration/expand-composition.test.ts b/test/integration/expand-composition.test.ts
@@ -70,9 +70,9 @@ 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;
   --sdFontWeightRefWeight: 800;
   --sdFontWeightRefStyle: italic;
@@ -92,12 +92,11 @@ describe('expand composition tokens', () => {
   --sdCompositionFontSize: 96px;
   --sdCompositionFontFamily: Roboto;
   --sdCompositionFontWeight: 700;
-  --sdCompositionHeaderFontFamilies: Roboto;
-  --sdCompositionHeaderFontSizes: 96px;
-  --sdCompositionHeaderFontWeights: 700;
+  --sdCompositionHeaderFontFamily: Roboto;
+  --sdCompositionHeaderFontSize: 96px;
+  --sdCompositionHeaderFontWeight: 700;
   --sdTypographyFontFamily: Arial;
-  --sdTypographyFontWeightWeight: 800;
-  --sdTypographyFontWeightStyle: italic;
+  --sdTypographyFontWeight: 800;
   --sdTypographyLineHeight: 1.25;
   --sdTypographyFontSize: 26px;
   --sdTypographyLetterSpacing: 0rem;
@@ -111,23 +110,23 @@ describe('expand composition tokens', () => {
   --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;`,
     );
   });
 
@@ -162,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;`,
     );
   });
 });
diff --git a/test/integration/tokens/expand-composition.tokens.json b/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"
     }