JSX component name must be named as recipe name

[Newbie012]

Description

Update: This is the only needed change to reproduce the bug: https://github.com/chakra-ui/panda/compare/main...Newbie012:panda:bug-simple-show-recipe-name-weird-bug

---

When I define a recipe:

import { defineRecipe } from '@pandacss/dev'

export const buttonRecipe = defineRecipe({
  className: 'button',
  base: { color: 'green', fontSize: '18px', background: 'yellow' },
})

and then import it to panda.config.ts:

import { defineConfig } from '@pandacss/dev'
import { buttonRecipe } from './src/recipes/button.recipe'

export default defineConfig({
  preflight: true,
  include: ['./src/**/*.{tsx,jsx}'],
  exclude: [],
  outdir: 'styled-system',
  jsxFramework: 'react',
  theme: {
    recipes: {
      buttonRecipe,
    },
  },
})

and then I call it in App.tsx:

import { Stack, styled } from '../styled-system/jsx'
import { buttonRecipe } from '../styled-system/recipes'

const Button = styled('button', buttonRecipe)
const ButtonRecipe = styled('button', buttonRecipe)

function App() {
  return (
    <Stack p="2">
      <Button>ButtonRecipe</Button>
      <ButtonRecipe>ButtonRecipe</ButtonRecipe>
    </Stack>
  )
}

export default App

It only works if the name of the component is identical to the name of the recipe. In this case, buttonRecipe = ButtonRecipe so the style is applied. But, if I comment out <ButtonRecipe>, no style will be shown:

import { Stack, styled } from '../styled-system/jsx'
import { buttonRecipe } from '../styled-system/recipes'

const Button = styled('button', buttonRecipe)
const ButtonRecipe = styled('button', buttonRecipe)

function App() {
  return (
    <Stack p="2">
      <Button>ButtonRecipe</Button>
-     <ButtonRecipe>ButtonRecipe</ButtonRecipe>
+     {/* <ButtonRecipe>ButtonRecipe</ButtonRecipe> */}
    </Stack>
  )
}

export default App

Link to Reproduction

https://github.com/Newbie012/panda/tree/bug-component-name-must-be-like-recipe-name

Steps to reproduce

1. Go to https://github.com/Newbie012/panda/tree/bug-component-name-must-be-like-recipe-name
2. Run cd sandbox/vite-ts && pnpm install
3. Run pnpm dev
4. Open http://localhost:5173
5. You should see this screen:

6. Comment out lines 15,19

function App() {
  return (
    <Stack p="2">
      <Button>ButtonRecipe</Button>
-      <ButtonRecipe>ButtonRecipe</ButtonRecipe>
+      {/* <ButtonRecipe>ButtonRecipe</ButtonRecipe> */}

      <Test>Test</Test>
      <TestRecipe>TestRecipe</TestRecipe>
-      <TestRecipex>TestRecipex</TestRecipex>
+      {/* <TestRecipex>TestRecipex</TestRecipex> */}
    </Stack>
  )
}

7. Styles are now not shown:

JS Framework

React (TS)

Panda CSS Version

0.20.1

Browser

Google Chrome 119

Operating System

• [ ] macOS
• [X] Windows
• [ ] Linux

Additional Information

No response

[segunadebayo]

This is by design @Newbie012.

If you want to use a different name, consider updating the jsx settings of the recipe to indicate the component name that should be tracked for that recipe.

recipes: {
   buttonRecipe: {
      jsx: ["Button", "ButtonRecipe"],
      // ...
  }
}

Read more here: https://panda-css.com/docs/concepts/recipes#advanced-jsx-tracking