Styles not reloading correctly in DEV mode of example app 37_css

[supersoniko]

Environment:

• Waku 0.21.20
• OS: Mac OS 15.3
• Browser: Arc and Firefox Developer Edition
• Node 20.17.0

Issue
When editing a style in the example application 37_css the new style is not automatically loaded and requires a manual refresh in the browser. HMR is triggered and the old style is not visible anymore, but to see the new style applied a manual refresh is required.

Reproducible steps

1. Clone waku repository
2. go to examples/37_css
3. npm install
4. npm run dev
5. in app.module.css change the background-color to another color value

Extra Info
I notice this is not an issue in the example app 04_cssmodules. Might be related to the different routing? I also have this issue in my own application where I solely use css modules, but I do use the routing approach from example 37_css instead of the file system based routing.

[dai-shi]

Confirmed the issue. For me, it reproduces with 04_cssmodules too.

Can you help investigating the issue? The first thing we would like to know is if this is a regression with some changes.

You can check out some previous commits and run:

git switch --detach ...
pnpm i
pnpm -F ./packages/waku compile
pnpm -F 37_css dev

instead of changing the directory.

[wesbos]

Having this issue as well, Ill dig into the example, but from first glance:

1. The issue only happens when the styles are in a RSC, not a client component
2. When a CSS module is changed, the class hash is regenerated. For example the class _NavStyles_13kgl_8 is changed to _NavStyles_fzxdl_8. The corresponding <style> tag is also updated. In the case of a RSC, the <style> tag is updated, but the className on the RSC is not.

[wesbos]

I traced it back 0.18.0 and had trouble getting anything earlier running. The issue seems to always be there. At 0.18.0 the issue changed a bit, but I'm assuming this is related to the full page reload VS the hot reload. Here is a video: https://share.cleanshot.com/PLM8Sffl

[wesbos]

Interestingly, testing 37_css which also has Stylex in it, anytime any server component is updated, the Stylex client components are stripped of their styles.

Demo: https://share.cleanshot.com/JfQyGNMs

[dai-shi]

Wes, thanks so much for looking into it. It sounds like it's not a regression, and it has never worked before.

To be honest, our team lacks css specialists. Hope @Aslemammad has time to help. Otherwise, I should take a closer look later.

As for stylex, I'd say it's not working correctly in several aspects. We track the issue in #750.

[wesbos]

Looks like next/webpack suffers the same issue, though I never had it with my next site vercel/next.js#57046