Large index.css module

[FlatMapIO]

When I use park-ui + panda in solid-start, the style change will cause the browser to reload ~6m index.css module, which makes HMR meaningless. When viewing this file, it is basically a huge list of tokens that will never change Is there a way to optimize this?

[astahmer]

yes, there are a few things that you can do to improve the overall performance:

• reduce your overall tokens count by omitting those that you know you will never use

• switch to CLI instead of postcss plugin
  if the issue persists after swapping to using the CLI, a performance profiling could help us debug your issues
  https://panda-css.com/docs/guides/debugging#performance-profiling

• remove unused CSS vars using a postcss plugin

[FlatMapIO]

After testing, the perfect solution is to use turbo + cli, Thank you very much for your guidance @astahmer!

[FlatMapIO]

@astahmer There seems to be a bug in the cli watch mode? when I keep adding blank lines to the code, style.css keeps growing until it's huge, and when I look at the content, it seems to be all duplicate styles. The only way to do this at the moment is to manually run cssgen after coding for a while

[FlatMapIO]

It's a little hard to understand 🤣, I'll continue working on the reproduce repo later.

[FlatMapIO]

After adding park-ui, the problem has been reproduced.
astahmer/panda-vite-template#1

[FlatMapIO]

removeUnusedCssVars(removeUnusedKeyframes(content)) will slow down the css growth, but it will still grow. If remove is not configured, it will almost double every time you compile.

[astahmer]

thank you for the minimal reproduction, this was super helpful to debug 🙏
should be fixed with #2249