fix: theme skipping not skipping a theme if its name also starts with another theme name (#3251)

Author: drobannx

.changeset/warm-turtles-behave.md

@@ -0,0 +1,6 @@
+---
+'@pandacss/generator': patch
+---
+
+This change fixes a issue where if two themes had shared a similar start name, both would be outputted in the token
+generation process

packages/generator/__tests__/generate-token.test.ts

@@ -1053,6 +1053,104 @@ describe('generator', () => {
     `)
   })
 
+  test('themes - staticCss with multiple themes ', () => {
+    const css = tokenCss({
+      eject: true,
+      conditions: {
+        osDark: '@media (prefers-color-scheme: dark)',
+      },
+      theme: {
+        tokens: {
+          colors: {
+            text: { value: 'blue' },
+          },
+        },
+        semanticTokens: {
+          colors: {
+            body: {
+              value: {
+                base: '{colors.blue.600}',
+                _osDark: '{colors.blue.400}',
+              },
+            },
+          },
+        },
+      },
+      // alternative theme variants
+      themes: {
+        primary: {
+          tokens: {
+            colors: {
+              text: { value: 'red' },
+            },
+          },
+          semanticTokens: {
+            colors: {
+              muted: { value: '{colors.red.200}' },
+              body: {
+                value: {
+                  base: '{colors.red.600}',
+                  _osDark: '{colors.red.400}',
+                },
+              },
+            },
+          },
+        },
+        'primary-legacy': {
+          tokens: {
+            colors: {
+              text: { value: 'blue' },
+            },
+          },
+          semanticTokens: {
+            colors: {
+              muted: { value: '{colors.blue.200}' },
+              body: {
+                value: {
+                  base: '{colors.blue.600}',
+                  _osDark: '{colors.blue.400}',
+                },
+              },
+            },
+          },
+        },
+      },
+      staticCss: {
+        // only generate the red in addition to the main one
+        themes: ['primary'],
+        // use  ['*'] to generate all themes
+      },
+      outdir: '',
+    })
+
+    expect(css).toMatchInlineSnapshot(`
+      "@layer tokens {
+        :where(html) {
+          --colors-text: blue;
+          --colors-body: var(--colors-blue-600);
+      }
+
+        [data-panda-theme=primary] {
+          --colors-text: red;
+          --colors-muted: var(--colors-red-200);
+          --colors-body: var(--colors-red-600)
+      }
+
+        @media (prefers-color-scheme: dark) {
+          :where(html) {
+            --colors-body: var(--colors-blue-400)
+              }
+          }
+
+        @media (prefers-color-scheme: dark) {
+          [data-panda-theme=primary] {
+            --colors-body: var(--colors-red-400)
+                  }
+              }
+      }"
+    `)
+  })
+
   test('themes - staticCss with *', () => {
     const css = tokenCss({
       eject: true,

packages/generator/src/artifacts/css/token-css.ts

@@ -24,7 +24,7 @@ export function generateTokenCss(ctx: Context, sheet: Stylesheet) {
   const themePrefix = ctx.conditions.getThemeName('')
 
   for (const [key, values] of tokens.view.vars.entries()) {
-    const isThemeSkipped = key.startsWith(themePrefix) && !themeConds.some((condName) => key.startsWith(condName))
+    const isThemeSkipped = key.startsWith(themePrefix) && !themeConds.some((condName) => key === condName || key.startsWith(condName + ':'))
     if (isThemeSkipped) {
       continue
     }