fix(codegen): match file extensions (#19)

Author: jonambas

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(
       {

src/codegen.ts

@@ -4,24 +4,27 @@ 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.match(/^index\.(mjs|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 +33,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) {

src/context.ts

@@ -21,5 +21,4 @@ export const createContext = (tokens: ComponentTokens): PluginContext => ({
   }),
   tokens,
   map: makeMap(tokens),
-  debug: undefined,
 });

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

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