From 904744edcdace694d347729f54fb0732d1eec149 Mon Sep 17 00:00:00 2001
From: Raisa Primerova <48605821+RayRedGoose@users.noreply.github.com>
Date: Wed, 3 Jul 2024 13:06:40 -0600
Subject: [PATCH] fix: Fix type file generation to export types instead of
 declarations (#120)

PR contains a fix for type issue for users don't use `--skipLibCheck`.

[category:Web Tokens]

Release Note:
Type generation has been updated to fix a type issue happening for user who doesn't use `--skipLibCheck`. Now generated type files contains types (`export declare const cinnamon100: "--cnvs-base-palette-cinnamon-100";`) instead of value declarations (`export declare const cinnamon100 = "--cnvs-base-palette-cinnamon-100" as const;`).
---
 packages/canvas-tokens/utils/formatters/formatJS.ts    | 4 ++--
 packages/canvas-tokens/utils/formatters/formatTypes.ts | 5 ++---
 packages/canvas-tokens/utils/formatters/index.ts       | 4 ++--
 packages/canvas-tokens/utils/spec/formats.spec.ts      | 6 +++---
 4 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/canvas-tokens/utils/formatters/formatJS.ts b/packages/canvas-tokens/utils/formatters/formatJS.ts
index 5befc75..769f0c9 100644
--- a/packages/canvas-tokens/utils/formatters/formatJS.ts
+++ b/packages/canvas-tokens/utils/formatters/formatJS.ts
@@ -36,7 +36,7 @@ export const formatToInlineES6Module: Formatter = ({dictionary, file}) => {
 
 /**
  * Style Dictionary format function that creates ts file structure.
- * This structure contains separated exports of each token with `as const`.
+ * This structure contains separated type exports of each token.
  * @param {*} FormatterArguments - Style Dictionary formatter object containing `dictionary`, `options`, `file` and `platform` properties.
  * @returns file content as a string
  */
@@ -44,7 +44,7 @@ export const formatInlineTypes: Formatter = ({dictionary, file}) => {
   const headerContent = formatHelpers.fileHeader({file});
   return dictionary.allTokens.reduce((acc: string, {name, path}) => {
     const cssVarName = path.join('-');
-    acc += `export declare const ${name} = "--cnvs-${cssVarName}" as const;\n`;
+    acc += `export declare const ${name}: "--cnvs-${cssVarName}";\n`;
     return acc;
   }, headerContent);
 };
diff --git a/packages/canvas-tokens/utils/formatters/formatTypes.ts b/packages/canvas-tokens/utils/formatters/formatTypes.ts
index 79dac9b..44f1698 100644
--- a/packages/canvas-tokens/utils/formatters/formatTypes.ts
+++ b/packages/canvas-tokens/utils/formatters/formatTypes.ts
@@ -31,7 +31,6 @@ export const formatJSToTypes: Formatter = ({dictionary, file, options}) => {
 };
 
 const startingText = 'export declare const';
-const endingText = 'as const;\n';
 
 type ReplaceFn = (pattern: string, newText: string) => string;
 
@@ -62,7 +61,7 @@ const recursivelyCreateFileStructure = ({
 
       const innerText = depth
         ? `${spaces}"${key}": "${values}",`
-        : `${startingText} ${key} = "${values}" ${endingText}`;
+        : `${startingText} ${key}: "${values}";\n`;
       const fullInnerText = jsDocText + innerText;
 
       updatedContent = replaceInContent(`**${key}**`, fullInnerText);
@@ -74,7 +73,7 @@ const recursivelyCreateFileStructure = ({
       .join('\n');
 
     const innerText = !depth
-      ? `${startingText} ${key} = {\n${placeholders}\n} ${endingText}`
+      ? `${startingText} ${key}: {\n${placeholders}\n};\n`
       : `${spaces}"${key}": {\n${placeholders}\n${spaces}},`;
 
     updatedContent = replaceInContent(`**${key}**`, innerText);
diff --git a/packages/canvas-tokens/utils/formatters/index.ts b/packages/canvas-tokens/utils/formatters/index.ts
index 604f2f0..1825ad6 100644
--- a/packages/canvas-tokens/utils/formatters/index.ts
+++ b/packages/canvas-tokens/utils/formatters/index.ts
@@ -22,13 +22,13 @@ export const formats: Record<string, Formatter> = {
   // formatter creating the inline es6 file structure
   // with separated variables of tokens
   'js/es6': formatToInlineES6Module,
-  // formatter creating the es6 and common-js inline types including the `as const`
+  // formatter creating the es6 and common-js inline types
   'ts/inline': formatInlineTypes,
   // formatter creating the es6 file structure
   // with tokens united in objects
   'es6/objects': formatES6ToObjects,
   // formatter creating the es6 and common-js types
-  // including the `as const` and JSDoc description
+  // including types and JSDoc description
   'ts/jsdoc-object': formatJSToTypes,
   // formatter creating the common-js file structure
   // with tokens united in objects
diff --git a/packages/canvas-tokens/utils/spec/formats.spec.ts b/packages/canvas-tokens/utils/spec/formats.spec.ts
index 3317dcc..4421661 100644
--- a/packages/canvas-tokens/utils/spec/formats.spec.ts
+++ b/packages/canvas-tokens/utils/spec/formats.spec.ts
@@ -113,7 +113,7 @@ describe('formats', () => {
       const result = formats['ts/inline'](defaultArgs);
       const expected =
         headerContent +
-        `export declare const cinnamon100 = "--cnvs-base-palette-cinnamon-100" as const;\nexport declare const cinnamon200 = "--cnvs-base-palette-cinnamon-200" as const;\n`;
+        `export declare const cinnamon100: "--cnvs-base-palette-cinnamon-100";\nexport declare const cinnamon200: "--cnvs-base-palette-cinnamon-200";\n`;
 
       expect(result).toBe(expected);
     });
@@ -374,7 +374,7 @@ describe('formats', () => {
 
       const expected =
         headerContent +
-        'export declare const opacity = {\n  /**\n   * 0.4\n   * \n   * token: base.opacity.400\n   * \n   * Test JSDoc\n   */\n  "disabled": "--cnvs-base-opacity-300",\n} as const;\n';
+        'export declare const opacity: {\n  /**\n   * 0.4\n   * \n   * token: base.opacity.400\n   * \n   * Test JSDoc\n   */\n  "disabled": "--cnvs-base-opacity-300",\n};\n';
 
       expect(result).toBe(expected);
     });
@@ -402,7 +402,7 @@ describe('formats', () => {
 
       const expected =
         headerContent +
-        'export declare const opacity = {\n  /** 0.4 */\n  "disabled": "--cnvs-base-opacity-300",\n} as const;\n';
+        'export declare const opacity: {\n  /** 0.4 */\n  "disabled": "--cnvs-base-opacity-300",\n};\n';
 
       expect(result).toBe(expected);
     });