Perf regression on v0.38.0 for HMR on Storybook + Vite

[adbutterfield]

Description

I noticed that HMR gets slower and slower after each change on Storybook after upgrading from v0.37.2. Versions from v.0.38.0 on seem to all have the issue.

I didn't check if it affects vite only, or also webpack.

Link to Reproduction

Sorry, no reproduction

Steps to reproduce

1. You need a component library set up with Storybook + Vite
2. Install panda v0.38.0
3. Run DEBUG="vite:plugin-transform" storybook dev
4. Make a change that triggers HMR (component code or story code)
5. Check the time it takes to transform css in the console output
6. Repeat steps 4 & 5, the time it takes to transform css will continue to increase with each change (in my case starts 200-300ms, eventually going up to 4+ seconds)
7. Install panda v0.37.2
8. Repeat steps 3-6, time it takes to transform css stays at 200-300ms

JS Framework

React

Panda CSS Version

0.38.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[adbutterfield]

Should have wrote the description more like, "quickly goes up to 4+ seconds, and keeps going up".

[adbutterfield]

I think I found the root cause. I ran clinic flame on my storybook to see what code is taking so long to finish. Turns out it is postcss-discard-duplicates which was updated to v7 about a week ago.

The top 5 hottest blocks are from postcss-discard-duplicates running latest panda version. I don't get anything like that running v0.37.2.

Flame graph using v0.39.0

Flame graph using where I removed postcss-discard-duplicates from optimizePostCss function

[adbutterfield]

It looks like postcss-discard-duplicates version didn't change. So maybe panda is creating more duplicates so postcss-discard-duplicates needs to do extra processing?

[adbutterfield]

I disabled postcss-discard-duplicates, and it looks like panda is generating more duplicates.

Initial load:

After one HMR:

After several more changes and HMR:

[adbutterfield]

It looks like a bug in the CacheMap introduced in v0.38.0, specifically where it's used for atomic_cache. If I change this line to use a normal Map, the issue with duplicated styles goes away.

[adbutterfield]

Looking a bit deeper. I put a log on this line.
For each HMR, utilities.nodes.length gets (encoder.atomic.length - 1) * 3 bigger.

[frogdevvn]

Hmm. It seem i got the issue same with you with HMR and i using Vite... HMR slower after each changes and after restart Vite it normally but slower again

[astahmer]

hey, I wanted to look into this issue but couldnt reproduce it, can you send a minimal repro ?
I'm sure this happens on your side but it seems it might not happen for all setup using Panda (tried on the super simple sandbox/vite, on the sandbox/storybook and on one private company repo with a component library)

btw thank you for the investigation, yes it's most likely the CacheMap, I made a PR that removes it in the Utility class so that Panda can properly de-duplicate styles

[adbutterfield]

So I figured it out. The bug only appears when you exceed maxCacheSize. Set it to something ridiculously small, like 5, and you can reproduce.

You can reproduce on this repo: https://github.com/adbutterfield/panda-turborepo