From a1630a1dd0ea12796e4748ab7dce9a29f6235fd7 Mon Sep 17 00:00:00 2001
From: jonambas <jon@jonambas.com>
Date: Sun, 7 Apr 2024 22:41:06 -0400
Subject: [PATCH] fix(codegen): match file extensions

---
 src/__tests__/codegen.test.ts | 66 +++++++++++++++++++++++++++++++----
 src/codegen.ts                | 25 +++++++------
 src/context.ts                |  1 -
 src/types.ts                  |  2 +-
 src/utils.ts                  |  5 ++-
 5 files changed, 77 insertions(+), 22 deletions(-)

diff --git a/src/__tests__/codegen.test.ts b/src/__tests__/codegen.test.ts
index c998cd6..9f3544e 100644
--- a/src/__tests__/codegen.test.ts
+++ b/src/__tests__/codegen.test.ts
@@ -38,13 +38,11 @@ describe('codegen', () => {
             },
             {
               "code": "type PluginCtMapType = {
-        'foo.100': '#fff',
-        'foo.200': {"base":"#000","lg":"#111"},
-        'bar.100': 'red',
-        'bar.200': 'blue',
-      }
-          
-      export const ct: <T extends keyof PluginCtMapType>(alias: T) => PluginCtMapType[T];",
+        'foo.100': '#fff';
+        'foo.200': {"base":"#000","lg":"#111"};
+        'bar.100': 'red';
+        'bar.200': 'blue';};
+          export const ct: <T extends keyof PluginCtMapType>(alias: T) => PluginCtMapType[T];",
               "file": "ct.d.ts",
             },
           ],
@@ -69,6 +67,60 @@ describe('codegen', () => {
     `);
   });
 
+  it('generates ct runtime code with outExtension set to "js"', () => {
+    const result = codegen(
+      {
+        artifacts: [
+          {
+            id: 'css-fn',
+            files: [],
+          },
+          {
+            id: 'css-index',
+            files: [
+              { file: 'index.js', code: '' },
+              { file: 'index.d.ts', code: '' },
+            ],
+          },
+        ],
+        changed: [],
+      },
+      context,
+    ) as any[];
+
+    expect(result.at(0).files[0].file).toEqual('ct.js');
+    expect(result.at(0).files[1].file).toEqual('ct.d.ts');
+    expect(result.at(1).files[0].code).includes('./ct.js');
+    expect(result.at(1).files[1].code).includes('./ct');
+  });
+
+  it('generates ct runtime code with outExtension set to "mjs" and force type extension', () => {
+    const result = codegen(
+      {
+        artifacts: [
+          {
+            id: 'css-fn',
+            files: [],
+          },
+          {
+            id: 'css-index',
+            files: [
+              { file: 'index.mjs', code: '' },
+              { file: 'index.d.mts', code: '' },
+            ],
+          },
+        ],
+        changed: [],
+      },
+      context,
+    ) as any[];
+
+    expect(result.at(0).files[0].file).toEqual('ct.mjs');
+    expect(result.at(0).files[1].file).toEqual('ct.d.mts');
+    expect(result.at(1).files[0].code).includes('./ct.mjs');
+    expect(result.at(1).files[1].code).includes('./ct');
+  });
+
   it('skips if artifacts dont exist', () => {
     const result = codegen(
       {
diff --git a/src/codegen.ts b/src/codegen.ts
index 2985c64..b99ba54 100644
--- a/src/codegen.ts
+++ b/src/codegen.ts
@@ -4,24 +4,29 @@ import type {
   Artifact,
   ArtifactContent,
 } from '@pandacss/types';
-import { makePaths, mapTemplate } from './map';
+import { mapTemplate } from './map';
 import type { PluginContext } from './types';
-import { serializeMapTypes, serializeValue } from './utils';
+import { serializeMapTypes } from './utils';
 
 export const codegen = (
   args: CodegenPrepareHookArgs,
   context: PluginContext,
 ): MaybeAsyncReturn<void | Artifact[]> => {
-  const { tokens, map } = context;
+  const { map } = context;
+
   const cssFn = args.artifacts.find((a) => a.id === 'css-fn');
   const index = args.artifacts.find((a) => a.id === 'css-index');
-  const indexFile = index?.files.find((f) => f.file.includes('index.mjs'));
-  const indexDtsFile = index?.files.find((f) => f.file.includes('index.d.ts'));
+  const indexFile = index?.files.find(
+    (f) => f.file.includes('index.mjs') || f.file.includes('index.js'),
+  );
+  const indexDtsFile = index?.files.find((f) => f.file.includes('index.d.'));
+  const ext = indexFile?.file.split('.').at(-1);
+  const dtsExt = indexDtsFile?.file.split('.').at(-1);
 
   if (!cssFn || !indexFile || !indexDtsFile) return args.artifacts;
 
   const ctFile: ArtifactContent = {
-    file: 'ct.mjs',
+    file: `ct.${ext}`,
     code: `${mapTemplate(map)}
   export const ct = (path) => {
     if (!pluginCtMap.has(path)) return 'panda-plugin-ct_alias-not-found';
@@ -30,13 +35,13 @@ export const codegen = (
   };
 
   const ctDtsFile: ArtifactContent = {
-    file: 'ct.d.ts',
-    code: `${serializeMapTypes(map)}
-    \nexport const ct: <T extends keyof PluginCtMapType>(alias: T) => PluginCtMapType[T];`,
+    file: `ct.d.${dtsExt}`,
+    code: `type PluginCtMapType = {${serializeMapTypes(map)}};
+    export const ct: <T extends keyof PluginCtMapType>(alias: T) => PluginCtMapType[T];`,
   };
 
   cssFn.files.push(ctFile, ctDtsFile);
-  indexFile.code += `\nexport * from './ct.mjs';`;
+  indexFile.code += `\nexport * from './ct.${ext}';`;
   indexDtsFile.code += `\nexport * from './ct';`;
 
   if (context.debug) {
diff --git a/src/context.ts b/src/context.ts
index 5b66138..a50f000 100644
--- a/src/context.ts
+++ b/src/context.ts
@@ -21,5 +21,4 @@ export const createContext = (tokens: ComponentTokens): PluginContext => ({
   }),
   tokens,
   map: makeMap(tokens),
-  debug: undefined,
 });
diff --git a/src/types.ts b/src/types.ts
index ffa1776..e57053f 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,4 +1,4 @@
-import { LoggerInterface, LogLevel } from '@pandacss/types';
+import type { LoggerInterface } from '@pandacss/types';
 import { type Project } from 'ts-morph';
 
 export type ComponentTokens = { [k: string]: string | ComponentTokens };
diff --git a/src/utils.ts b/src/utils.ts
index a8070bc..57cba9b 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -15,10 +15,9 @@ export const serializeValue = (value: any) => {
 };
 
 export const serializeMapTypes = (map: Map<any, any>) => {
-  let code = 'type PluginCtMapType = {';
+  let code = '';
   for (const [key, value] of map.entries()) {
-    code += `\n  '${key}': ${serializeValue(value)},`;
+    code += `\n  '${key}': ${serializeValue(value)};`;
   }
-  code += '\n}';
   return code;
 };