From ab13f30c9e0feae2d83730f73c056c2391fd58b6 Mon Sep 17 00:00:00 2001 From: jorenbroekema Date: Thu, 18 Jul 2024 21:46:16 +0200 Subject: [PATCH] fix: add lineHeight and fontWeight types to expandTypesMap --- .changeset/cool-windows-hang.md | 5 +++ src/index.ts | 4 ++ src/preprocessors/align-types.ts | 4 +- test/integration/cross-file-refs.test.ts | 13 ++++--- test/integration/expand-composition.test.ts | 39 +++++++++---------- .../tokens/expand-composition.tokens.json | 6 +-- 6 files changed, 42 insertions(+), 29 deletions(-) create mode 100644 .changeset/cool-windows-hang.md diff --git a/.changeset/cool-windows-hang.md b/.changeset/cool-windows-hang.md new file mode 100644 index 0000000..d8a3dc3 --- /dev/null +++ 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 index 3b2e6f6..1628a4d 100644 --- 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 index c17157b..eea4a67 100644 --- 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 | SingleToken) { } export function alignTypes(dictionary: DeepKeyTokenMap): DeepKeyTokenMap { - 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 index 6c1f88d..7221a6d 100644 --- 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 index e10d5e9..2075c21 100644 --- 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 index fd1d13b..7510544 100644 --- 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" }