fix(formats): handle DTCG-format tokens in javascript/es6

.changeset/perfect-carrots-divide.md

@@ -0,0 +1,5 @@
+---
+'style-dictionary': patch
+---
+
+handle DTCG-format tokens in javascript/es6 formatter

__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 */
+

__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();
     });
   });
 });

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);
   },