fix: account for multiline comments in js/es6 format (#1439)

Author: Zkrgu

.changeset/spotty-clocks-drop.md

@@ -0,0 +1,5 @@
+---
+'style-dictionary': patch
+---
+
+Account for multiline comments in javascript/es6 format

__tests__/formats/__snapshots__/es6Constants.test.snap.js

@@ -19,3 +19,15 @@ export const red = "#EF5350"; // comment
 `;
 /* end snapshot formats javascript/es6 should handle DTCG token format, be a valid JS file and matches snapshot */
 
+snapshots["formats javascript/es6 should handle multiline comments"] = 
+`/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export const red = "#EF5350"; // comment
+// multiline
+// comment
+export const blue = "#4FEDF0";
+`;
+/* end snapshot formats javascript/es6 should handle multiline comments */
+

__tests__/formats/es6Constants.test.js

@@ -56,6 +56,31 @@ const DTCGTokens = {
   },
 };
 
+const commentTokens = {
+  color: {
+    red: {
+      comment: 'comment',
+      name: 'red',
+      original: {
+        value: '#EF5350',
+      },
+      path: ['color', 'red'],
+      type: 'color',
+      value: '#EF5350',
+    },
+    blue: {
+      comment: 'multiline\ncomment',
+      name: 'blue',
+      original: {
+        value: '#4FEDF0',
+      },
+      path: ['color', 'blue'],
+      type: 'color',
+      value: '#4FEDF0',
+    },
+  },
+};
+
 const format = formats[javascriptEs6];
 
 describe('formats', () => {
@@ -85,5 +110,19 @@ describe('formats', () => {
 
       await expect(output).to.matchSnapshot();
     });
+
+    it('should handle multiline comments', async () => {
+      const output = await format(
+        createFormatArgs({
+          dictionary: {
+            tokens: commentTokens,
+            allTokens: convertTokenData(commentTokens, { output: 'array' }),
+          },
+          file,
+          platform: {},
+        }),
+      );
+      await expect(output).to.matchSnapshot();
+    });
   });
 });

lib/common/formats.js

@@ -58,6 +58,7 @@ import {
   formats as fileFormats,
   propertyFormatNames,
 } from '../enums/index.js';
+import { addComment } from './formatHelpers/createPropertyFormatter.js';
 
 /**
  * @typedef {import('../../types/Format.d.ts').Format} Format
@@ -644,7 +645,13 @@ const formats = {
         const comment = options.usesDtcg ? token.$description : token.comment;
         const to_ret = `export const ${token.name} = ${value};`;
 
-        return comment ? to_ret.concat(`// ${comment}`) : to_ret;
+        const format = {
+          commentStyle: short,
+          indentation: '',
+          ...formatting,
+        };
+
+        return comment ? addComment(to_ret, comment, format) : to_ret;
       }),
     ]
       .flat()