CSS from recipes not applied on web app consuming a package

[comedelaval]

Description

I have a monorepo as this

• components-panda (panda external lib)
• web-panda (web app consuming the external lib)
  Both are using pandacss.
  I defined a preset inside the components-panda and I exported it.
  But the recipes inside the export are not executed well, all the others styles defined inside the preset are working.

Do you have any clue to help to resolve this issue ?

Link to Reproduction

https://github.com/comedelaval/web-panda-playground

Steps to reproduce

1. Git clone the repo
2. nvm use 20.0.0
3. cd panda-components
4. Run npm i & npm run build
5. Go to ../storybook-panda
6. Run npm i
7. Run npm run dev
8. No styles applied to button from the external lib

JS Framework

Vue & Vite

Panda CSS Version

0.29.1

Browser

Google Chrome

Operating System

• macOS
• Windows
• Linux

Additional Information

None

[segunadebayo]

Hi @comedelaval,

The reproduction link you attached doesn't work. Could you fix that?

[comedelaval]

Hi @segunadebayo,
Thank you for you reactivity
Sorry the repo was private. It's public now 😄

[astahmer]

using staticCss: { recipes: { button: ['*'] } } inside the storybook panda.config should solve it !
either that or wrapping with .raw here https://github.com/comedelaval/web-panda-playground/blob/master/storybook-panda/src/stories/Button.stories.ts#L12

this is because Panda CSS works using static analysis and we need to find style usage related to your button recipe