From ac93a1b5301589fb545e0386604b64b9c028f206 Mon Sep 17 00:00:00 2001
From: Tobias Kuppens Groot <tkuppensgroo@uos.de>
Date: Mon, 9 Dec 2024 15:55:46 +0100
Subject: [PATCH] fix(formats): handle DTCG-format tokens in javascript/es6

- update snapshots
- fix issue in javascript/es6 formatter and add handling DTCG tokens
- update tests

Signed-off-by: Tobias Kuppens Groot <tkuppensgroo@uos.de>
---
 .changeset/perfect-carrots-divide.md          |  5 ++
 .../__snapshots__/es6Constants.test.snap.js   | 11 +++-
 __tests__/formats/es6Constants.test.js        | 55 ++++++++++++++-----
 lib/common/formats.js                         | 27 ++++-----
 4 files changed, 69 insertions(+), 29 deletions(-)
 create mode 100644 .changeset/perfect-carrots-divide.md

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 b2440228f..63afb8f67 100644
--- a/__tests__/formats/es6Constants.test.js
+++ b/__tests__/formats/es6Constants.test.js
@@ -26,12 +26,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',
     },
   },
 };
@@ -40,18 +57,30 @@ const format = formats['javascript/es6'];
 
 describe('formats', () => {
   describe('javascript/es6', () => {
-    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 292038a08..6c41c393e 100644
--- a/lib/common/formats.js
+++ b/lib/common/formats.js
@@ -565,21 +565,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);
   },