refactor: jsx slot inference

Author: segunadebayo

.changeset/modern-hands-behave.md

@@ -0,0 +1,21 @@
+---
+'@pandacss/core': patch
+---
+
+Fix issue where Panda eagerly tracks every JSX slot of a slot recipe when scanning for recipe props.
+
+For example, assume you have a tabs recipe with the following slots:
+
+```jsx
+<Tabs.Root>
+  <Tabs.List>
+    <Tabs.Trigger />
+  </Tabs.List>
+  <Tabs.Content />
+</Tabs.Root>
+```
+
+Panda tracks recipe props in `Tabs.Root`, `Tabs.List`, `Tabs.Trigger`, and `Tabs.Content`. This can lead to slightly
+more works in the compiler.
+
+This PR fixes this by only tracking recipe props in the `Tabs.Root` slot.

packages/core/__tests__/slot-recipe.test.ts

@@ -103,11 +103,10 @@ describe('slot recipe ruleset', () => {
         "jsx": [
           "Checkbox",
           "Checkbox.Root",
-          "Checkbox.Control",
-          "Checkbox.Label",
+          "CheckboxRoot",
         ],
         "jsxName": "Checkbox",
-        "match": /\\^Checkbox\\$\\|\\^Checkbox\\.Root\\$\\|\\^Checkbox\\.Control\\$\\|\\^Checkbox\\.Label\\$/,
+        "match": /\\^Checkbox\\$\\|\\^Checkbox\\.Root\\$\\|\\^CheckboxRoot\\$/,
         "props": [
           "size",
         ],

packages/core/src/recipes.ts

@@ -121,22 +121,30 @@ export class Recipes {
     sharedState.styles.delete(name)
   }
 
-  private assignRecipe = (name: string, recipe: RecipeConfig | SlotRecipeConfig) => {
-    if (recipe.deprecated) this.deprecated.add(name)
-
-    const variantKeys = Object.keys(recipe.variants ?? {})
+  inferJsxSlots = (name: string, recipe: RecipeConfig | SlotRecipeConfig) => {
     const capitalized = capitalize(name)
     const jsx = Array.from(recipe.jsx ?? [capitalized])
-    if ('slots' in recipe) {
-      jsx.push(...recipe.slots.map((slot) => capitalized + '.' + capitalize(slot)))
+
+    const ROOT_SLOT = 'root'
+
+    if ('slots' in recipe && recipe.slots.includes(ROOT_SLOT)) {
+      const jsxRootName = capitalize(ROOT_SLOT)
+      const rootNames: string[] = [`${capitalized}.${jsxRootName}`, `${capitalized}${jsxRootName}`]
+      jsx.push(...rootNames)
     }
 
-    const match = createRegex(jsx)
-    const className = recipe.className ?? name
+    return jsx
+  }
+
+  private assignRecipe = (name: string, recipe: RecipeConfig | SlotRecipeConfig) => {
+    if (recipe.deprecated) this.deprecated.add(name)
+
+    const variantKeys = Object.keys(recipe.variants ?? {})
+    const jsx = this.inferJsxSlots(name, recipe)
 
     sharedState.nodes.set(name, {
       ...this.getNames(name),
-      className,
+      className: recipe.className ?? name,
       jsx,
       type: 'recipe' as const,
       variantKeys,
@@ -145,7 +153,7 @@ export class Recipes {
           return [key, Object.keys(value)]
         }),
       ),
-      match,
+      match: createRegex(jsx),
       config: recipe,
       splitProps: (props) => {
         return splitProps(props, variantKeys) as [Dict, Dict]

packages/parser/__tests__/jsx-recipe.test.ts

@@ -212,35 +212,35 @@ describe('recipe jsx', () => {
             {},
           ],
           "name": "Tabs.List",
-          "type": "jsx-recipe",
+          "type": "jsx",
         },
         {
           "data": [
             {},
           ],
           "name": "Tabs.Trigger",
-          "type": "jsx-recipe",
+          "type": "jsx",
         },
         {
           "data": [
             {},
           ],
           "name": "Tabs.Trigger",
-          "type": "jsx-recipe",
+          "type": "jsx",
         },
         {
           "data": [
             {},
           ],
           "name": "Tabs.Trigger",
-          "type": "jsx-recipe",
+          "type": "jsx",
         },
         {
           "data": [
             {},
           ],
           "name": "Tabs.Indicator",
-          "type": "jsx-recipe",
+          "type": "jsx",
         },
       ]
     `)