fix(sva): improve infer slots

.changeset/tasty-ducks-agree.md

@@ -0,0 +1,17 @@
+---
+'@pandacss/parser': patch
+'@pandacss/core': patch
+---
+
+Improve inference of slots in slot recipes when spreading and concatenating slot names.
+
+This handles the following case gracefully:
+
+```ts
+const styles = sva({
+  className: 'foo',
+  slots: [...componentAnatomy.keys(), 'additional', 'slots', 'here'],
+})
+```
+
+Panda will now infer the slots from the anatomy and add them to the recipe.

packages/core/src/recipes.ts

@@ -300,6 +300,13 @@ export class Recipes {
       })
     })
 
+    recipe.compoundVariants?.forEach((compoundVariant) => {
+      if (!compoundVariant) return
+      Object.keys(compoundVariant.css ?? {}).forEach((name) => {
+        slots.add(name)
+      })
+    })
+
     return Array.from(slots)
   }
 

packages/core/src/style-encoder.ts

@@ -6,6 +6,7 @@ import {
   normalizeStyleObject,
   toResponsiveObject,
   traverse,
+  uniq,
 } from '@pandacss/shared'
 import type {
   Dict,
@@ -268,7 +269,9 @@ export class StyleEncoder {
   }
 
   processAtomicSlotRecipe = (recipe: PartialBy<SlotRecipeDefinition, 'slots'>) => {
-    if (!recipe.slots?.filter(Boolean).length) recipe.slots = Recipes.inferSlots(recipe)
+    const inferredSlots = Recipes.inferSlots(recipe)
+    recipe.slots = uniq([...(recipe.slots ?? []), ...inferredSlots].filter(Boolean))
+
     const slots = getSlotRecipes(recipe)
 
     for (const slotRecipe of Object.values(slots)) {

packages/parser/__tests__/sva.test.ts

@@ -267,4 +267,30 @@ describe('ast parser / sva', () => {
       }"
     `)
   })
+
+  test('unresolvable + concat - spread', () => {
+    const code = `
+      import { anatomy } from '@/slots'
+      import { sva } from 'styled-system/css'
+
+      const card = sva({
+        slots: [...anatomy().keys(), 'slots', 'here'],
+        className: 'tt',
+        base: {
+          a: {
+            backgroundColor: 'red',
+          },
+        },
+      })
+     `
+
+    const result = parseAndExtract(code)
+    expect(result.css).toMatchInlineSnapshot(`
+      "@layer utilities {
+        .bg-c_red {
+          background-color: red;
+      }
+      }"
+    `)
+  })
 })