[Bug?]: Edits to CSS modules do not trigger HMR and won't update without a page refresh

[The0inkinator]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When making edits to a .module.css file vite triggers a page reload rather than an hmr. The resulting effect is that saving a change to the module wipes all css from the element it is scoped to until you refresh the page at which point everything updates and displays correctly.

Expected behavior 🤔

Making edits to a css module should trigger hmr and update the styling on the component without requiring a full page refresh

Steps to reproduce 🕹

Steps:

1.Usinc CLI - $ npm init solid@latest
2. Name the project, choose to use solid-start and typescript, choose the basic template, npm install, and finally npm run dev.
3. In the basic template update the counter component to use module styling
3-a. Rename Counter.css -> Counter.module.css
3-b. In Counter.tsx rewrite the import and class to accept module styling:

import { createSignal } from "solid-js";
import styles from  "./Counter.module.css"

export default function Counter() {
const [count, setCount] = createSignal(0);
return (
 <button class={styles.increment} onClick={() => setCount(count() + 1)}>
   Clicks: {count()}
 </button>
);
}```
4. Make a modification to the styling in Counter.module.css.
5. Save the file. The save will trigger a vite reload logged as: 1:32:43 PM [vite] page reload src/components/Counter.module.css and rather than updating the css there is now a mismatch between the generated class from the new css module and the one currently applied to the element causing the element to lose all locally scoped styling until a full page refresh is applied.

https://stackblitz.com/~/github.com/The0inkinator/css_module_example
https://github.com/The0inkinator/css_module_example


### Context 🔦

I am a hobbyist developer so relatively inexperienced. I have primarily worked on projects in solid start and after a few month hiatus I immediately ran into the issue while trying to update some basic styling for a test project.

### Your environment 🌎

```shell
System
OS Name:                   Microsoft Windows 10 Pro
OS Version:                10.0.19045 N/A Build 19045
OS Manufacturer:           Microsoft Corporation
OS Configuration:          Standalone Workstation
OS Build Type:             Multiprocessor Free

Binaries
"C:\Users\TheOi\AppData\Roaming\npm"
"C:\Program Files\nodejs"
"C:\Windows\system32"
"C:\Windows"
"C:\Windows\System32\Wbem"
"C:\Windows\System32\WindowsPowerShell\v1.0"
"C:\Windows\System32\OpenSSH"
"C:\Program Files\GitHub CLI"
"C:\Program Files\Git\cmd"
"C:\Users\TheOi\AppData\Local\Microsoft\WindowsApps"
"C:\Users\TheOi\AppData\Local\Programs\Microsoft VS Code\bin"

Dependencies
+-- @solidjs/meta@0.29.3
+-- @solidjs/router@0.13.0
+-- @solidjs/start@0.7.5
+-- solid-js@1.8.15
`-- vinxi@0.3.10

[hansoksendahl]

I am seeing this same issue, introduced a little over a week ago.

[hansoksendahl]

Minimial reproduction repository

[ryansolid]

@hansoksendahl do you know the last version where it was working? That would help me narrow it down considerably.

[edivados]

This is a vinxi issue right? Vinxi sends the hmr update to replace the css, classes don't match anymore, styling disappears and reload is required.

No sure if there is a way around a reload but here is where to look I think. Maybe sending a full-reload for css modules?
https://github.com/nksaraf/vinxi/blob/4bddafe1b7e873ef691392ebaf7ea4f4875e39d4/packages/vinxi/lib/plugins/css.js#L15

Edit: Oh... it looks to me as if the return value (empty array) is the problem causing vite to only send the custom event. I will make a PR later.

[The0inkinator]

This issue is persisting for me still is there an update on what is going on with this? @edivados Thanks in advance

[FlatMapIO]

Downgrading vinxi to 3.10 should temporarily avoid this issue?

[froggydood]

A not so nice temporary fix for this is to customize the class name generator vite uses in the config to only use the file path and class name and ignore the css contents when generating class names. This means that class names don't change when the contents changes, which I believe is whats causing the issues.

Example config.

import crypto from "crypto"

export default defineConfig({
  ssr: true,
  vite: {
    css: {
      modules: {
        // Need to generate css module names based on only the file path and class name
        // because the dev reloading doesn't work well when classes change when css contents change.
        generateScopedName(name, filename, css) {
          const hasher = crypto.createHash("sha256")
          hasher.update(name + filename)
          const hash = hasher.digest().toString("hex");
          return `${name}__${hash.substring(0, 16)}`
        },
      }
    }
  }
});

There is one problem with this though, it doesn't fix the issue of you adding a new class in the css, as it goes from an empty string to some value and therefore that still requires a page refresh.