fix: improve splitting

Author: segunadebayo

.changeset/fix-static-css-recipes-splitting.md

@@ -0,0 +1,11 @@
+---
+'@pandacss/core': patch
+'@pandacss/generator': patch
+---
+
+Fix `cssgen --splitting` not fully respecting `staticCss: { recipes: "*" }`.
+
+- When `staticCss: { recipes: "*" }` is set globally, individual recipes with their own `staticCss` property would
+  override the global wildcard, potentially omitting variants.
+
+- Split CSS generation was missing recipes that only have base styles (no variants).

packages/core/__tests__/static-css.test.ts

@@ -2465,4 +2465,56 @@ describe('static-css caching', () => {
     expect(count1).toBe(count2)
     expect(count1).toBeGreaterThan(0)
   })
+
+  test('recipes: "*" should override individual recipe staticCss config', () => {
+    // Create a context with a recipe that has its own staticCss config
+    const confWithRecipeStaticCss = {
+      hooks,
+      ...defaults,
+      config: {
+        ...defaults.config,
+        theme: {
+          ...JSON.parse(JSON.stringify(defaults.config.theme)),
+          recipes: {
+            testRecipe: {
+              className: 'testRecipe',
+              base: { display: 'flex' },
+              variants: {
+                size: {
+                  sm: { fontSize: '12px' },
+                  md: { fontSize: '14px' },
+                  lg: { fontSize: '16px' },
+                },
+                variant: {
+                  primary: { color: 'blue' },
+                  secondary: { color: 'gray' },
+                },
+              },
+              // This recipe has its own staticCss config that only includes 'sm' size
+              staticCss: [{ size: ['sm'] }],
+            },
+          },
+        },
+      },
+    } as typeof fixtureDefaults
+
+    const ctxWithStaticCss = new Context(confWithRecipeStaticCss)
+    const getStaticCssWithCtx = (options: StaticCssOptions) => {
+      const engine = ctxWithStaticCss.staticCss.clone().process(options)
+      return { results: engine.results, css: engine.sheet.toCss() }
+    }
+
+    // When using recipes: "*", ALL variants should be generated
+    // even though the recipe's staticCss only specifies ['sm']
+    const result = getStaticCssWithCtx({ recipes: '*' })
+
+    // Should include all size variants (sm, md, lg), not just sm
+    expect(result.css).toContain('testRecipe--size_sm')
+    expect(result.css).toContain('testRecipe--size_md')
+    expect(result.css).toContain('testRecipe--size_lg')
+
+    // Should include all variant variants (primary, secondary)
+    expect(result.css).toContain('testRecipe--variant_primary')
+    expect(result.css).toContain('testRecipe--variant_secondary')
+  })
 })

packages/core/src/static-css.ts

@@ -287,10 +287,11 @@ export class StaticCss {
 
     Object.entries(recipeConfigs).forEach(([name, recipe]) => {
       if (useAllRecipes) {
+        // When recipes: "*" is set globally, always use ['*'] for all recipes
+        // This should NOT be overridden by individual recipe.staticCss configs
         staticCss.recipes[name] = ['*']
-      }
-
-      if (recipe.staticCss) {
+      } else if (recipe.staticCss) {
+        // Only use recipe-level staticCss when not using global wildcard
         staticCss.recipes[name] = recipe.staticCss
       }
     })

packages/generator/__tests__/split-css.test.ts

@@ -0,0 +1,67 @@
+import { fixtureDefaults } from '@pandacss/fixture'
+import type { LoadConfigResult, StaticCssOptions } from '@pandacss/types'
+import { describe, expect, test } from 'vitest'
+import { Generator } from '../src'
+
+const createSplitCssContext = (staticCss: StaticCssOptions) => {
+  const config: LoadConfigResult = {
+    ...fixtureDefaults,
+    config: {
+      ...fixtureDefaults.config,
+      staticCss,
+    },
+  }
+
+  const generator = new Generator(config)
+  const sheet = generator.createSheet()
+
+  generator.appendLayerParams(sheet)
+  generator.appendBaselineCss(sheet)
+
+  const artifacts = generator.getSplitCssArtifacts(sheet)
+
+  return {
+    generator,
+    sheet,
+    artifacts,
+    recipeKeys: generator.recipes.keys,
+    recipeNames: artifacts.recipes.map((r) => r.name),
+    recipeFiles: artifacts.recipes.map((r) => r.file),
+  }
+}
+
+describe('split CSS generation', () => {
+  test('staticCss recipes: "*" should include all recipes', () => {
+    const { recipeKeys, recipeNames } = createSplitCssContext({ recipes: '*' })
+
+    for (const recipeName of recipeKeys) {
+      expect(recipeNames).toContain(recipeName)
+    }
+  })
+
+  test('should generate separate CSS files for each recipe', () => {
+    const { recipeKeys, recipeFiles, artifacts } = createSplitCssContext({ recipes: '*' })
+
+    // Number of recipe CSS files should match the number of recipe keys
+    expect(artifacts.recipes.length).toBe(recipeKeys.length)
+
+    // Verify all recipe file names
+    expect(recipeFiles.sort()).toMatchInlineSnapshot(`
+      [
+        "badge.css",
+        "button-style.css",
+        "card-style.css",
+        "checkbox.css",
+        "text-style.css",
+        "tooltip-style.css",
+      ]
+    `)
+
+    // Each recipe should have non-empty CSS
+    artifacts.recipes.forEach((recipe) => {
+      expect(recipe.code.trim().length).toBeGreaterThan(0)
+      expect(recipe.file).toMatch(/\.css$/)
+      expect(recipe.dir).toBe('recipes')
+    })
+  })
+})

packages/generator/src/generator.ts

@@ -141,7 +141,7 @@ export class Generator extends Context {
 
     // Recipe artifacts
     const recipes: SplitCssArtifact[] = []
-    for (const recipeName of decoder.recipes.keys()) {
+    for (const recipeName of this.recipes.keys) {
       const recipeSheet = this.createSheet()
       recipeSheet.processDecoderForRecipe(decoder, recipeName)
       const code = recipeSheet.getLayerCss('recipes')