fix: css module hmr update

[edivados]

There is an issue with hmr not working as expected for css modules.
solidjs/solid-start#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.

vinxi/packages/vinxi/lib/plugins/css.js

Lines 22 to 30 in 4bddafe

	viteServer.ws.send({
	type: "custom",
	event: "css-update",
	data: {
	file,
	contents: code,
	},
	});
	return [];

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]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[vercel]

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

@nksaraf first needs to authorize it.

[changeset-bot]

🦋 Changeset detected

Latest commit: 3b0e0d5

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