diff --git a/.changeset/perfect-carrots-divide.md b/.changeset/perfect-carrots-divide.md new file mode 100644 index 000000000..13e1811b7 --- /dev/null +++ b/.changeset/perfect-carrots-divide.md @@ -0,0 +1,5 @@ +--- +'style-dictionary': patch +--- + +handle DTCG-format tokens in javascript/es6 formatter diff --git a/__tests__/formats/__snapshots__/es6Constants.test.snap.js b/__tests__/formats/__snapshots__/es6Constants.test.snap.js index b1c3207b6..7f82dd950 100644 --- a/__tests__/formats/__snapshots__/es6Constants.test.snap.js +++ b/__tests__/formats/__snapshots__/es6Constants.test.snap.js @@ -6,7 +6,16 @@ snapshots["formats javascript/es6 should be a valid JS file and match snapshot"] * Do not edit directly, this file was auto-generated. */ -export const red = "#EF5350"; +export const red = "#EF5350"; // comment `; /* end snapshot formats javascript/es6 should be a valid JS file and match snapshot */ +snapshots["formats javascript/es6 should handle DTCG token format, be a valid JS file and matches snapshot"] = +`/** + * Do not edit directly, this file was auto-generated. + */ + +export const red = "#EF5350"; // comment +`; +/* end snapshot formats javascript/es6 should handle DTCG token format, be a valid JS file and matches snapshot */ + diff --git a/__tests__/formats/es6Constants.test.js b/__tests__/formats/es6Constants.test.js index 88f381378..b3de68342 100644 --- a/__tests__/formats/es6Constants.test.js +++ b/__tests__/formats/es6Constants.test.js @@ -29,12 +29,29 @@ const file = { const tokens = { color: { red: { + comment: 'comment', name: 'red', - value: '#EF5350', original: { value: '#EF5350', }, - path: ['color', 'base', 'red', '400'], + path: ['color', 'red'], + type: 'color', + value: '#EF5350', + }, + }, +}; + +const DTCGTokens = { + color: { + red: { + $description: 'comment', + name: 'red', + original: { + $value: '#EF5350', + }, + path: ['color', 'red'], + $type: 'color', + $value: '#EF5350', }, }, }; @@ -43,18 +60,30 @@ const format = formats[javascriptEs6]; describe('formats', () => { describe(javascriptEs6, () => { - it('should be a valid JS file and match snapshot', async () => { - await expect( - await format( - createFormatArgs({ - dictionary: { tokens, allTokens: convertTokenData(tokens, { output: 'array' }) }, - file, - platform: {}, + const formatArgs = (usesDtcg) => + createFormatArgs({ + dictionary: { + tokens: usesDtcg ? DTCGTokens : tokens, + allTokens: convertTokenData(usesDtcg ? DTCGTokens : tokens, { + output: 'array', + usesDtcg, }), - {}, - file, - ), - ).to.matchSnapshot(); + }, + file, + platform: {}, + options: { usesDtcg }, + }); + + it('should be a valid JS file and match snapshot', async () => { + const output = await format(formatArgs(false)); + + await expect(output).to.matchSnapshot(); + }); + + it('should handle DTCG token format, be a valid JS file and matches snapshot', async () => { + const output = await format(formatArgs(true)); + + await expect(output).to.matchSnapshot(); }); }); }); diff --git a/lib/common/formats.js b/lib/common/formats.js index abd2f75a2..33ea9b3a7 100644 --- a/lib/common/formats.js +++ b/lib/common/formats.js @@ -633,21 +633,18 @@ const formats = { formatting: getFormattingCloneWithoutPrefix(formatting), options, }); - const content = - header + - dictionary.allTokens - .map(function (token) { - let to_ret = - 'export const ' + - token.name + - ' = ' + - JSON.stringify(options.usesDtcg ? token.$value : token.value) + - ';'; - if (token.comment) to_ret = to_ret.concat(' // ' + token.comment); - return to_ret; - }) - .join('\n') + - '\n'; + const content = [ + header, + dictionary.allTokens.map((token) => { + const value = JSON.stringify(options.usesDtcg ? token.$value : token.value); + const comment = options.usesDtcg ? token.$description : token.comment; + const to_ret = `export const ${token.name} = ${value};`; + + return comment ? to_ret.concat(`// ${comment}`) : to_ret; + }), + ] + .flat() + .join('\n'); return formatJS(content); },