How is Panda in very large projects? No tree-shaking, right?

[literalpie]

For anyone using Panda in a very large project, I'm interested in hearing how big the generated CSS file is. We are considering Panda for a very large monorepo (hundreds of packages, dozens of apps).

From what I can tell, Panda generates the css pretty simply based on the file matching pattern that you pass into the include in panda.config.ts. These are source files and it doesn't do anything to check if a file is actually referenced in a production build. Is that right?

I see this documentation about removing unused variables, but I'm also interested in unused classes. In a simple test, I added <Box p="123px"> to a component that doesn't get imported anywhere, and it was included in my CSS output.

(to be clear, I know tree-shaking based on which source files are used would be extremely complicated. The approach Panda uses might be a fine trade-off - I just want to make sure I understand it correctly)

[s-h-a-d-o-w]

I've been wondering about similar things and now also why it's not done automatically at least with variables. In case of dynamic access maybe?

There's also the work @astahmer did here and mentioned HMR as the main reason for abandoning it. But I don't think anybody cares about optimizations in dev? I would expect these things to happen by default only when building for production. Are there other reasons for not doing it?

[s-h-a-d-o-w]

Fair enough. But why do both of these modules refer to webpack then? Scaffolding for contributions by other people?

[astahmer]

exactly! it internally is based on https://github.com/unjs/unplugin which is an abstraction so that you can build a plugin with a shared base and it outputs a bunch of different bundler plugins (and you can then add specific logic to some adapters when needed)

[s-h-a-d-o-w]

Hm, I checked out your code and since there's only the e2e test for HMR and I couldn't see any CSS optimization happening, I just also tried to make it work with the basic vite react ts template. Just following the basic panda setup and your steps, doing no custom stuff whatsoever, to see whether I'm nuts or whether the optimization doesn't work and e.g. all the CSS variables still ended up in the bundle.

[astahmer]

ah, regarding CSS optimization it's a different one. you can do that with something like https://panda-css.com/docs/concepts/hooks#remove-unused-variables-from-final-css

[s-h-a-d-o-w]

Thanks!
I can see why that's such an "afterthought" - no more e.g. <div className={css({ fontSize: "2xl", fontWeight: 'bold' })}>Hello 🐼!</div>, since 2xl doesn't get detected.

[literalpie]

Here's a POC showing one way that this could be done by telling panda to check for styles in a temporary tree-shaken output instead of src files. The big catch is that this doesn't work with the JSX utilities.