fix: css module hmr update

[edivados]

There is an issue with hmr not working as expected for css modules. https://github.com/solidjs/solid-start/issues/1400

Problem

CSS Module

Edit the css module and the styling on the counter button will disappear.

This Vite plugin sends custom hmr events to update inlined css. When updating a css module the generated classes change and don't match anymore with already rendered components.

https://github.com/nksaraf/vinxi/blob/4bddafe1b7e873ef691392ebaf7ea4f4875e39d4/packages/vinxi/lib/plugins/css.js#L22-L30

Solution

Currently I see two ways to handle css modules.

• [In PR] Don't do full custom event handling. Allowing vite to send update event for affected files.
  • Brief FOUC during update because class names don't match. No full page reload.
• Send a full-reload event

[codesandbox[bot]]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders
Open Preview

[vercel[bot]]

Someone is attempting to deploy a commit to a Personal Account owned by @nksaraf on Vercel.

@nksaraf first needs to authorize it.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 3b0e0d51e50cdd3f50e6ffe59be395342cc1fd8c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 28 packages

| Name | Type | | ------------------------------------- | ----- | | vinxi | Patch | | @vinxi/router | Patch | | example-react-server | Patch | | react-rsc-spa | Patch | | react-rsc-ssr | Patch | | example-react-spa-basic | Patch | | react-spa-mdx | Patch | | react-spa-tanstack-router-app | Patch | | example-react-spa-tanstack-router-app | Patch | | react-ssr-basic-cloudflare | Patch | | react-ssr-basic | Patch | | react-ssr-tanstack-router-app | Patch | | react-ssr-wouter | Patch | | solid-spa-basic | Patch | | solid-ssr-basic | Patch | | example-ssr-solid-router | Patch | | example-vanilla-empty | Patch | | example-vanilla-partyroom | Patch | | example-vanilla-server | Patch | | example-vanilla-spa | Patch | | example-vanilla-stack | Patch | | example-vanilla-trpc | Patch | | test-multi-spa | Patch | | test-react-rsc | Patch | | test-react-srv-fn | Patch | | react-ssr-test-fs | Patch | | test-react-to-web-request | Patch | | test-react | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR