From 2966cfd1af4b87b8d391134967942f54bd8bfd20 Mon Sep 17 00:00:00 2001 From: Tobias Kuppens Groot Date: Mon, 9 Dec 2024 16:40:44 +0100 Subject: [PATCH] fix(formats): handle DTCG-format tokens in typescript/es6-declarations - add functionalty to handle comment and $description - update tests - update snapshots Signed-off-by: Tobias Kuppens Groot --- .changeset/beige-hounds-unite.md | 5 ++ .../typeScriptEs6Declarations.test.snap.js | 33 ++++++++ .../formats/typeScriptEs6Declarations.test.js | 83 +++++++++++++++---- lib/common/formats.js | 33 ++++---- 4 files changed, 124 insertions(+), 30 deletions(-) create mode 100644 .changeset/beige-hounds-unite.md diff --git a/.changeset/beige-hounds-unite.md b/.changeset/beige-hounds-unite.md new file mode 100644 index 000000000..044da387d --- /dev/null +++ b/.changeset/beige-hounds-unite.md @@ -0,0 +1,5 @@ +--- +'style-dictionary': patch +--- + +handle DTCG-format tokens in typescript/es6-declarations formatter diff --git a/__tests__/formats/__snapshots__/typeScriptEs6Declarations.test.snap.js b/__tests__/formats/__snapshots__/typeScriptEs6Declarations.test.snap.js index e2547f5de..521f6e892 100644 --- a/__tests__/formats/__snapshots__/typeScriptEs6Declarations.test.snap.js +++ b/__tests__/formats/__snapshots__/typeScriptEs6Declarations.test.snap.js @@ -12,3 +12,36 @@ export const fontFamily: '"Source Sans Pro", Arial, sans-serif'; `; /* end snapshot formats typescript/es6-declarations with outputStringLiterals should match snapshot */ +snapshots["formats typescript/es6-declarations without outputStringLiterals should match snapshot"] = +`/** + * Do not edit directly, this file was auto-generated. + */ + +/** Used for errors */ +export const colorRed: string; +export const fontFamily: string; +`; +/* end snapshot formats typescript/es6-declarations without outputStringLiterals should match snapshot */ + +snapshots["formats typescript/es6-declarations with DTCG tokens and outputStringLiterals should match snapshot"] = +`/** + * Do not edit directly, this file was auto-generated. + */ + +/** Used for errors */ +export const colorRed: "#FF0000"; +export const fontFamily: '"Source Sans Pro", Arial, sans-serif'; +`; +/* end snapshot formats typescript/es6-declarations with DTCG tokens and outputStringLiterals should match snapshot */ + +snapshots["formats typescript/es6-declarations with DTCG tokens and without outputStringLiterals should match snapshot"] = +`/** + * Do not edit directly, this file was auto-generated. + */ + +/** Used for errors */ +export const colorRed: string; +export const fontFamily: string; +`; +/* end snapshot formats typescript/es6-declarations with DTCG tokens and without outputStringLiterals should match snapshot */ + diff --git a/__tests__/formats/typeScriptEs6Declarations.test.js b/__tests__/formats/typeScriptEs6Declarations.test.js index 7feed21c1..27dfeedfd 100644 --- a/__tests__/formats/typeScriptEs6Declarations.test.js +++ b/__tests__/formats/typeScriptEs6Declarations.test.js @@ -39,18 +39,44 @@ const tokens = { }, }; +const DTCGTokens = { + color: { + red: { + $description: 'Used for errors', + $type: 'color', + $value: '#FF0000', + name: 'colorRed', + }, + }, + font: { + family: { + $type: 'fontFamily', + $value: '"Source Sans Pro", Arial, sans-serif', + name: 'fontFamily', + }, + }, +}; + const format = formats[typescriptEs6Declarations]; describe('formats', () => { describe(typescriptEs6Declarations, () => { + const formatArgs = (usesDtcg, customFile) => + createFormatArgs({ + dictionary: { + tokens: usesDtcg ? DTCGTokens : tokens, + allTokens: convertTokenData(usesDtcg ? DTCGTokens : tokens, { + output: 'array', + usesDtcg, + }), + }, + file: customFile ?? file, + platform: {}, + options: { usesDtcg }, + }); + it('should be a valid TS file', async () => { - const output = await format( - createFormatArgs({ - dictionary: { tokens, allTokens: convertTokenData(tokens, { output: 'array' }) }, - file, - platform: {}, - }), - ); + const output = await format(formatArgs(false)); // get all lines that begin with export const lines = output.split('\n').filter((l) => l.indexOf('export') >= 0); @@ -61,6 +87,18 @@ describe('formats', () => { }); }); + it('without outputStringLiterals should match snapshot', async () => { + const customFile = { + ...file, + options: { + outputStringLiterals: false, + }, + }; + const output = await format(formatArgs(false, customFile)); + + await expect(output).to.matchSnapshot(); + }); + it('with outputStringLiterals should match snapshot', async () => { const customFile = { ...file, @@ -68,14 +106,31 @@ describe('formats', () => { outputStringLiterals: true, }, }; + const output = await format(formatArgs(false, customFile)); + + await expect(output).to.matchSnapshot(); + }); - const output = await format( - createFormatArgs({ - dictionary: { tokens, allTokens: convertTokenData(tokens, { output: 'array' }) }, - file: customFile, - platform: {}, - }), - ); + it('with DTCG tokens and outputStringLiterals should match snapshot', async () => { + const customFile = { + ...file, + options: { + outputStringLiterals: true, + }, + }; + const output = await format(formatArgs(true, customFile)); + + await expect(output).to.matchSnapshot(); + }); + + it('with DTCG tokens and without outputStringLiterals should match snapshot', async () => { + const customFile = { + ...file, + options: { + outputStringLiterals: false, + }, + }; + const output = await format(formatArgs(true, customFile)); await expect(output).to.matchSnapshot(); }); diff --git a/lib/common/formats.js b/lib/common/formats.js index abd2f75a2..21080049a 100644 --- a/lib/common/formats.js +++ b/lib/common/formats.js @@ -730,22 +730,23 @@ const formats = { formatting: getFormattingCloneWithoutPrefix(formatting), options, }); - const content = - header + - dictionary.allTokens - .map(function (token) { - let to_ret_token = ''; - if (token.comment) to_ret_token += '/** ' + token.comment + ' */\n'; - to_ret_token += - 'export const ' + - token.name + - ' : ' + - getTypeScriptType(options.usesDtcg ? token.$value : token.value, options) + - ';'; - return to_ret_token; - }) - .join('\n') + - '\n'; + const content = [ + header, + dictionary.allTokens.map((token) => { + const typescriptType = getTypeScriptType( + options.usesDtcg ? token.$value : token.value, + options, + ); + const comment = options.usesDtcg ? token.$description : token.comment; + + return [ + `${comment ? `/** ${comment} */` : ''}`, + `export const ${token.name} : ${typescriptType};`, + ].join('\n'); + }), + ] + .flat() + .join(''); return formatJS(content, true); },