Any TreeShaking/Purge tricks on Recipe files?

[theMasix]

Description

Hello there,
I'm building a component library with PandaCSS, due to the complexity of design system, we had to "generate" compoundVariants property for recipes.

the component library ships bulid-info as well as preset theme.

The issue is, since the compoundVariants are huge, the bundled recipe of the components is huge as well.

It's disappointing! is there a way to improve treeshaking/purge code for recipes?

You can find the component library and app code below.

Component Library Code

https://stackblitz.com/edit/vitejs-vite-7ytyb4

App Code

https://stackblitz.com/edit/vitejs-vite-1aznev

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-1aznev

Steps to reproduce

To reproduce the bundle analysis above:

1. Go to the app code project
2. run pnpm run build
3. run npx vite-bundle-visualizer

JS Framework

React (TS)

Panda CSS Version

^0.17.5

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[astahmer]

by looking at your screenshot, it seems you have bigger issues than the size of the button.. 😅
also, I'm guessing you're looking at the size of the file unminified + uncompressed

that being said, do you have an alternative in mind that would solve this ? and would you be willing to work on it ?

---

I noticed you have.. 98 compoundVariants (console.log(buttonRecipe.compoundVariants.length)), what's happening here ? maybe you can find a way to reduce that number ?

• instead of generating X compoundVariants for each color and just swapping the color used like here css: { border: '1.5px solid token(colors.neutral)' } you could for example just use a CSS variable and apply that variable in the color variant
  you probably can apply that same strategy in multiple places

• maybe instead of having a disabled variant you could use a _disabled condition and use it directly in your variants styles ?

• same thing for the iconDirection: it could also be a condition, for example something like &[data-icon-direction="left"]

---

finally, if you use a meta-framework like Astro or Next (with RSC), the JS runtime will just disappear by default (due to being SSR'd unless explicitly opt-in to client rendering)