diff --git a/package-lock.json b/package-lock.json index f92e899..691ad69 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@tokens-studio/sd-transforms", - "version": "1.0.1", + "version": "1.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@tokens-studio/sd-transforms", - "version": "1.0.1", + "version": "1.1.0", "license": "MIT", "dependencies": { "@bundled-es-modules/deepmerge": "^4.3.1", diff --git a/src/preprocessors/add-font-styles.ts b/src/preprocessors/add-font-styles.ts index e6842c3..891a953 100644 --- a/src/preprocessors/add-font-styles.ts +++ b/src/preprocessors/add-font-styles.ts @@ -66,15 +66,16 @@ 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') { @@ -82,13 +83,20 @@ function recurse( 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)[`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) = { + weight: { + ...token, + [`${usesDtcg ? '$' : ''}type`]: 'fontWeight', + [`${usesDtcg ? '$' : ''}value`]: weight, + }, + style: { + ...token, + [`${usesDtcg ? '$' : ''}type`]: 'fontStyle', + [`${usesDtcg ? '$' : ''}value`]: style, + }, }; } } diff --git a/test/integration/cross-file-refs.test.ts b/test/integration/cross-file-refs.test.ts index 3b47834..6c1f88d 100644 --- a/test/integration/cross-file-refs.test.ts +++ b/test/integration/cross-file-refs.test.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; `); }); }); diff --git a/test/integration/expand-composition.test.ts b/test/integration/expand-composition.test.ts index 77968bc..a8330ef 100644 --- a/test/integration/expand-composition.test.ts +++ b/test/integration/expand-composition.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); @@ -82,8 +83,9 @@ describe('expand composition tokens', () => { ); }); - 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; diff --git a/test/spec/preprocessors/add-font-styles.spec.ts b/test/spec/preprocessors/add-font-styles.spec.ts index 1c11e13..9b2321a 100644 --- a/test/spec/preprocessors/add-font-styles.spec.ts +++ b/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' }, + }, }, }); });