fix(codegen): match file extensions

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,90 @@ 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, config: { outExtension: 'js' } },
+    ) 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, config: { forceConsistentTypeExtension: true } },
+    ) 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('generates ct runtime code with outExtension set to "js" and force type extension', () => {
+    const result = codegen(
+      {
+        artifacts: [
+          {
+            id: 'css-fn',
+            files: [],
+          },
+          {
+            id: 'css-index',
+            files: [
+              { file: 'index.js', code: '' },
+              { file: 'index.d.ts', code: '' },
+            ],
+          },
+        ],
+        changed: [],
+      },
+      {
+        ...context,
+        config: { outExtension: 'js', forceConsistentTypeExtension: true },
+      },
+    ) 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('skips if artifacts dont exist', () => {
     const result = codegen(
       {

src/codegen.ts

@@ -4,24 +4,33 @@ 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 { config, map } = context;
+
+  // @see https://panda-css.com/docs/references/config#forceconsistenttypeextension
+  const ext = config?.outExtension ?? 'mjs';
+  const dtsExt = !config?.forceConsistentTypeExtension
+    ? 'ts'
+    : ext === 'js'
+      ? 'ts'
+      : 'mts';
+
   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.${ext}`));
+  const indexDtsFile = index?.files.find((f) => f.file.includes('index.d.'));
 
   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 +39,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/index.ts

@@ -15,6 +15,7 @@ const pluginComponentTokens = (tokens: ComponentTokens): PandaPlugin => {
     hooks: {
       'context:created': (args) => {
         context.debug = args.logger?.debug;
+        context.config = args.ctx.config;
       },
       'parser:before': (args) => {
         return parser(args, context);

src/types.ts

@@ -1,4 +1,4 @@
-import { LoggerInterface, LogLevel } from '@pandacss/types';
+import { Config, LoggerInterface, LogLevel } from '@pandacss/types';
 import { type Project } from 'ts-morph';
 
 export type ComponentTokens = { [k: string]: string | ComponentTokens };
@@ -8,4 +8,5 @@ export type PluginContext = {
   tokens: ComponentTokens;
   map: Map<string, string | object>;
   debug?: LoggerInterface['debug'];
+  config?: Config;
 };

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