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

[The0inkinator]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] 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/[email protected]
+-- @solidjs/[email protected]
+-- @solidjs/[email protected]
+-- [email protected]
`-- [email protected]

[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?