Dev server and maybe even HMR support for CSS modules?

[strlns]

First: many thanks for this great library / framework.

I currently am migrating an SSG project to this solution and want to continue using CSS modules.

This works fine, as it is already supported by Vite.
In addition, I use the TS language server plugin typescript-plugin-css-modules which provides great IntelliSense and static analysis.

However, it seems like HMR is "broken" in dev mode at least in my setup. I need to restart the whole dev server to reflect changes in CSS module files.

Can anybody else reproduce this?

I'd love HMR support for CSS modules, currently even a full page reload doesn't help, only restarting the dev server.

I'm hesitant to open this as an issue, seems more like a feature request and I haven't tested this in another project, maybe I have quirks in my setup that cause this problem.

Have only searched for issues or discussions containing the term "CSS modules" and didn't find any, so hope this is adequate place to ask.

[brillout]

Normally changes to .css lead to HMR and certainly don't need a server restart.

Minimal reproduction welcome. I suspect one of your libraries to cause issues.

First: many thanks for this great library / framework.

👍 I'm glad you like it.

[strlns]

👍
I'll try and provide one until the end of the week. Will finish current project first.
Since you say there is probably no special case for .module.css I will close this if I fail to reproduce with a scaffolded project.
Or feel free to close and I'll reopen the issue if I'm able to reproduce.

[strlns]

I tried to and could not reproduce the issue in your react-full example.

---

As for my HMR (or full page reload) problem when changing CSS, I tried various changes to your example projecrt and to my buggy project. I could rule out the following causes:

My buggy project:

• usage of path aliases in tsconfig combined with vite-plugin-tsconfig-paths
• usage of TS language server plugin typescript-plugin-css-modules

At least removing said plugins (and in the first case changing all paths to relative) did not change the behavior, still have to fully restart the dev task for CSS changes to take effect. This seems to be the case regardless of CSS modules or regular CSS imports.

Example project:

• successfully moved styles into other folder outside of renderer without any issues.
• initially had a heisenbug with styles not working when disabling javascript in preview mode, but this issue went away by itself / restarting

My buggy project:

I retroactively adapted to your plugin from a different previous approach.
The problems in my project are bigger / there is some stupid misconfiguration probably.
Can't get full SSG to work at the moment either, CSS does not work without JS enabeld among other problems.

Will check directory structure, imports and config files for possible causes and compare to docs&examples.

Closing this discussion, if I find the cause and there is an actual issue that someone else might encounter I will comment on the closed issue.

[brillout]

Check out Vite's debug logs DEBUG='vite:hmr' which are very insightful.

I also recommend to inspect Vite's handleHMRUpdate() which will give you a lot of insights (both useful and interesting), see https://vite-plugin-ssr.com/debug#vite.

[strlns]

Well first, could resolve all of my other problems, they were mostly related to me missing to inject CSS of the "geist-ui" component library into the server-rendered template.
The problem with CSS modules persists in my bugy project, but I'm confident I'll find the cause later today.

Interestingly, the problem occurs with one CSS module, but not with another one in the same folder.

Debug output of non-working change:

  vite:hmr [file change] src/styles/UnstyledList.module.css +15s
  vite:hmr [no modules matched] src/styles/UnstyledList.module.css +0ms

(no more output until next request)

Debug output of working change:

vite:hmr [file change] src/styles/HeaderBar.module.css +2m
10:29:53 [vite] page reload src/styles/HeaderBar.module.css
 vite:load 14.33ms [plugin] virtual:vite-plugin-ssr:importUserCode:server +2m
 vite:import-analysis 1.35ms [7 imports rewritten] virtual:vite-plugin-ssr:importUserCode:server +2m
 vite:transform 31.70ms virtual:vite-plugin-ssr:importUserCode:server +2m
 vite:load 0.27ms [fs] /src/pages/index/index.page.tsx +36ms
 vite:load 0.93ms [fs] /src/renderer/_default.page.server.tsx +1ms
 vite:import-analysis 0.62ms [2 imports rewritten] src/pages/index/index.page.tsx +15ms
 vite:transform 10.23ms /src/pages/index/index.page.tsx +15ms
 vite:cache [memory] /src/pages/index/ToyProjectList.tsx +2m
 vite:import-analysis 0.52ms [2 imports rewritten] src/renderer/_default.page.server.tsx +16ms
 vite:transform 25.74ms /src/renderer/_default.page.server.tsx +16ms
 vite:cache [memory] /src/renderer/getDocumentProps.ts +15ms
 vite:load 16.79ms [fs] /src/components/Template/HeaderBar.tsx +31ms
 vite:load 2.37ms [fs] /src/renderer/PageShell.tsx +0ms
 vite:import-analysis 0.88ms [5 imports rewritten] src/renderer/PageShell.tsx +14ms
 vite:transform 8.90ms /src/renderer/PageShell.tsx +14ms
 vite:cache [memory] /src/renderer/usePageContext.tsx +15ms
 vite:cache [memory] /src/themeType/useColorScheme.ts +0ms
 vite:cache [memory] /src/themeType/DarkModeContext.ts +0ms
 vite:cache [memory] /src/styles/_globals.css +0ms
 vite:import-analysis 1.99ms [7 imports rewritten] src/components/Template/HeaderBar.tsx +19ms

It seems like alll changes to CSS modules that are imported in the render tree of the default page template work, but changes to modules imported by other components don't.

Import of UnstyledList.module.css is in
src/pages/index/ToyProjectList.tsx, which is in turn imported by src/pages/index/index.page.tsx.

Import of HeaderBar.module.css is in src/components/Template/HeaderBar.tsx, which is imported by src/renderer/PageShell.tsx, which is imported by src/renderer/_default.page.server.tsx and src/renderer/_default.page.client.tsx.

Will have some time later today and dig deeper into what I'm doing wrong.

Also will test again with your example project or a scaffolded project and make sure to add and change a CSS module that is only used in a component imported by some specific page render tree (not by default page).

//EDIT:
I tried to reproduce again using the react-full example from this repository, without success, problem must be in my code or some combination of options.

[strlns]

Just tried again, couldn't find the actual cause by looking through Vite source, but it turned out that the problem went away as soon as I start using pnpm and copying your .npmrc.

Not a satisfying answer, but I am happy now. Previously used Node ^18 LTS with npm ^9.

[brillout]

Hm, that's surprising indeed. Thanks for the update.

[strlns]

Still wouldn't rule out problems specific to my project until some one else reports the same problem.
There a quirks and I make noob mistakes all the time ;-)
As opposed to your react-full example (as far as I remember my reproduction, removed the fork from GH as the problem was not reproduced), changing a CSS module leads to a full page reload in my case.

In case anybody reads this in the future, here's what the Vite debug log says now after changing an imported CSS module:

  vite:hmr [detected api usage] src/styles/IconLink.module.css +6ms
  vite:import-analysis 0.08ms [0 imports rewritten] src/styles/IconLink.module.css +6ms
  vite:transform 5.21ms /src/styles/IconLink.module.css +6ms
  vite:time 49.44ms /src/pages/index/ToyProjectList.tsx +18ms
  vite:cache [memory] /src/components/Atoms/IconLink.tsx +21ms
  vite:time 0.58ms /src/components/Atoms/IconLink.tsx +16ms
  vite:cache [memory] /src/components/Atoms/Icons/Git.tsx +1ms
  vite:time 0.25ms /src/components/Atoms/Icons/Git.tsx +0ms
  vite:cache [memory] /src/components/Atoms/Icons/Sudoku.tsx +0ms
  vite:time 0.19ms /src/components/Atoms/Icons/Sudoku.tsx +0ms
  vite:cache [memory] /src/components/Atoms/UnstyledList.tsx +1ms
  vite:time 0.37ms /src/components/Atoms/UnstyledList.tsx +1ms
  vite:cache [memory] /src/styles/IconLink.module.css +8ms
  vite:time 0.37ms /src/styles/IconLink.module.css +9ms
  vite:cache [memory] /src/styles/Icon.module.css +1ms
  vite:time 0.21ms /src/styles/Icon.module.css +0ms
  vite:cache [memory] /src/styles/unstyledList.module.css +0ms
  vite:time 0.42ms /src/styles/unstyledList.module.css +1ms
  vite:cache [memory] /src/pages/index/index.page.tsx?extractExportNames&lang.tsx +14ms
  vite:time 0.45ms /src/pages/index/index.page.tsx?extractExportNames&lang.tsx +13ms
  vite:cache [memory] /src/renderer/_default.page.client.tsx?extractExportNames&lang.tsx +1ms
  vite:time 0.30ms /src/renderer/_default.page.client.tsx?extractExportNames&lang.tsx +1ms
  vite:cache [memory] /src/pages/competences/index.page.tsx?extractExportNames&lang.tsx +2ms
  vite:time 0.39ms /src/pages/competences/index.page.tsx?extractExportNames&lang.tsx +2ms
  vite:cache [memory] /src/pages/tech.page.tsx?extractExportNames&lang.tsx +1ms
  vite:time 0.31ms /src/pages/tech.page.tsx?extractExportNames&lang.tsx +1ms
  vite:cache [memory] /src/pages/contact.page.tsx?extractExportNames&lang.tsx +0ms
  vite:time 0.22ms /src/pages/contact.page.tsx?extractExportNames&lang.tsx +0ms

The UA is navigated to index.page.tsx while changing the file (not sure if it's normal that Vite seems to check other files for changed exports or if I misinterpret the output).

[strlns]

Hm, that's surprising indeed. Thanks for the update.

Problem was somewhere else.

Came back to my page today, suspect issue was in my vite-config.d.ts or somewhere else.
Also updated to latest version of vite-plugin-ssr.
Then switched back to node+npm (LTS versions ^18/^9) as my project is small and I didn't want to use pnpm if not needed.
Could not reproduce HMR issues with CSS modules anymore.

[brillout]

Thanks for circling back on this.