solidjs
[Bug?]: Edits to CSS modules do not trigger HMR and won't update without a page refresh
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 do you know the last version where it was working? That would help me narrow it down considerably.
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.
This issue is persisting for me still is there an update on what is going on with this? @edivados Thanks in advance
