refactor(codegen): generate separate ct files (#14)

Author: jonambas

src/__tests__/codegen.test.ts

@@ -1,4 +1,3 @@
-import type { CodegenPrepareHookArgs } from '@pandacss/types';
 import { codegen } from '../codegen';
 import { createContext } from '../context';
 
@@ -7,43 +6,76 @@ const context = createContext({
   bar: { 100: 'red', 200: 'blue' },
 });
 
-const args: CodegenPrepareHookArgs = {
-  artifacts: [
-    {
-      id: 'css-fn',
-      files: [
-        { file: 'css.mjs', code: '' },
-        { file: 'css.d.ts', code: '' },
-      ],
-    },
-  ],
-  changed: [],
-};
-
 describe('codegen', () => {
   it('generates ct runtime code', () => {
-    const result = codegen(args, context) as any[];
-    expect(result[0].files[0]).toMatchInlineSnapshot(`
+    const result = codegen(
       {
-        "code": "
-
-      /* panda-plugin-ct codegen */
+        artifacts: [
+          {
+            id: 'css-fn',
+            files: [],
+          },
+          {
+            id: 'css-index',
+            files: [
+              { file: 'index.mjs', code: '// ...panda code' },
+              { file: 'index.d.ts', code: '// ...panda code' },
+            ],
+          },
+        ],
+        changed: [],
+      },
+      context,
+    );
+    expect(result).toMatchInlineSnapshot(`
+      [
+        {
+          "files": [
+            {
+              "code": "
       const pluginCtMap = new Map([["foo.100","#fff"],["foo.200",{"base":"#000"}],["bar.100","red"],["bar.200","blue"]]);
 
         export const ct = (path) => {
           if (!pluginCtMap.has(path)) return 'panda-plugin-ct_alias-not-found';
           return pluginCtMap.get(path);
         };",
-        "file": "css.mjs",
-      }
+              "file": "ct.mjs",
+            },
+            {
+              "code": "export const ct: (alias: "foo.100" | "foo.200" | "bar.100" | "bar.200") => string;",
+              "file": "ct.d.ts",
+            },
+          ],
+          "id": "css-fn",
+        },
+        {
+          "files": [
+            {
+              "code": "// ...panda code
+      export * from './ct.mjs';",
+              "file": "index.mjs",
+            },
+            {
+              "code": "// ...panda code
+      export * from './ct';",
+              "file": "index.d.ts",
+            },
+          ],
+          "id": "css-index",
+        },
+      ]
     `);
+  });
 
-    expect(result[0].files[1]).toMatchInlineSnapshot(`
+  it('skips if artifacts dont exist', () => {
+    const result = codegen(
       {
-        "code": "
-      export const ct: (alias: "foo.100" | "foo.200" | "bar.100" | "bar.200") => string;",
-        "file": "css.d.ts",
-      }
-    `);
+        artifacts: [],
+        changed: [],
+      },
+      context,
+    );
+
+    expect(result).toEqual([]);
   });
 });

src/codegen.ts

@@ -2,6 +2,7 @@ import type {
   CodegenPrepareHookArgs,
   MaybeAsyncReturn,
   Artifact,
+  ArtifactContent,
 } from '@pandacss/types';
 import { makePaths, mapTemplate } from './map';
 import type { PluginContext } from './types';
@@ -11,28 +12,32 @@ export const codegen = (
   context: PluginContext,
 ): MaybeAsyncReturn<void | Artifact[]> => {
   const { tokens, map } = context;
-
   const cssFn = args.artifacts.find((a) => a.id === 'css-fn');
-  if (!cssFn) return args.artifacts;
+  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 cssFile = cssFn.files.find((f) => f.file.includes('css.mjs'));
-  if (!cssFile) return args.artifacts;
+  if (!cssFn || !indexFile || !indexDtsFile) return args.artifacts;
 
-  cssFile.code += '\n\n/* panda-plugin-ct codegen */';
-  cssFile.code += mapTemplate(map);
-  cssFile.code += `
+  const code = `${mapTemplate(map)}
   export const ct = (path) => {
     if (!pluginCtMap.has(path)) return 'panda-plugin-ct_alias-not-found';
     return pluginCtMap.get(path);
   };`;
 
-  const cssDtsFile = cssFn.files.find((f) => f.file.includes('css.d.'));
-  if (!cssDtsFile) return args.artifacts;
-
   const paths = makePaths(tokens)
     .map((key) => `"${key}"`)
     .join(' | ');
-  cssDtsFile.code += `\nexport const ct: (alias: ${paths}) => string;`;
+
+  const ctFile: ArtifactContent = { file: 'ct.mjs', code };
+  const ctDtsFile: ArtifactContent = {
+    file: 'ct.d.ts',
+    code: `export const ct: (alias: ${paths}) => string;`,
+  };
+
+  cssFn.files.push(ctFile, ctDtsFile);
+  indexFile.code += `\nexport * from './ct.mjs';`;
+  indexDtsFile.code += `\nexport * from './ct';`;
 
   return args.artifacts;
 };