fix(themes): dynamic import of theme json

chakra-ui · Nov 13, 2024 · 2bc12d2 · 2bc12d2
1 parent eec1488
commit 2bc12d2
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/.changeset/happy-radios-repair.md b/.changeset/happy-radios-repair.md
@@ -0,0 +1,12 @@
+---
+'@pandacss/generator': patch
+---
+
+Fix multi-theme issue where calling the `getTheme` function throws a Vite error due to invalid dynamic import format.
+
+```js
+import { getTheme } from 'styled-system/themes'
+
+getTheme('default')
+// -> The above dynamic import cannot be analyzed by Vite.
+```
diff --git a/packages/generator/__tests__/generate-themes.test.ts b/packages/generator/__tests__/generate-themes.test.ts
@@ -55,23 +55,23 @@ describe('generate themes', () => {
         "id": "panda-theme-default",
         "css": " [data-panda-theme=default] {\\n    --colors-primary: blue;\\n    --colors-simple: var(--colors-red-600);\\n    --colors-text: var(--colors-blue-600)\\n}\\n\\n@media (prefers-color-scheme: dark) {\\n      [data-panda-theme=default] {\\n        --colors-text: var(--colors-blue-400)\\n            }\\n        }"
       }",
-          "name": "default",
+          "name": "theme-default",
         },
         {
           "json": "{
         "name": "pink",
         "id": "panda-theme-pink",
         "css": " [data-panda-theme=pink] {\\n    --colors-primary: pink;\\n    --colors-text: var(--colors-pink-600)\\n}\\n\\n@media (prefers-color-scheme: dark) {\\n      [data-panda-theme=pink] {\\n        --colors-text: var(--colors-pink-400)\\n            }\\n        }"
       }",
-          "name": "pink",
+          "name": "theme-pink",
         },
       ]
     `)
 
     expect(generateThemesIndex(ctx, files)).toMatchInlineSnapshot(`
       [
         {
-          "code": "export const getTheme = (themeName) => import('./' + themeName + '.json').then((m) => m.default)
+          "code": "export const getTheme = (themeName) => import(\`./theme-\${themeName}.json\`).then((m) => m.default)
 
       export function injectTheme(el, theme) {
         const doc = el.ownerDocument || document

diff --git a/packages/generator/src/artifacts/js/themes.ts b/packages/generator/src/artifacts/js/themes.ts
@@ -26,7 +26,7 @@ export function generateThemes(ctx: Context) {
     }
 
     return {
-      name,
+      name: `theme-${name}`,
       json: JSON.stringify(
         compact({
           name,
@@ -51,7 +51,7 @@ export function generateThemesIndex(ctx: Context, files: ReturnType<typeof gener
     {
       file: ctx.file.ext('index'),
       code: outdent`
-  export const getTheme = (themeName) => import('./' + themeName + '.json').then((m) => m.default)
+  export const getTheme = (themeName) => import(\`./theme-\$\{themeName}.json\`).then((m) => m.default)
 
   export function injectTheme(el, theme) {
     const doc = el.ownerDocument || document
@@ -86,9 +86,9 @@ export function generateThemesIndex(ctx: Context, files: ReturnType<typeof gener
       .map((f) => {
         const theme = JSON.parse(f.json) as GeneratedTheme
         if (!theme.css) return ''
-        return `'${f.name}': {
+        return `'${theme.name}': {
           id: string,
-          name: '${f.name}',
+          name: '${theme.name}',
           css: string
         }`
       })