fix(plugin-vue): exclude direct css request from hmr target

[antfu]

Description

Fixes nuxt/nuxt#12211

This is really a tricky edge case. So here is the thing, normally this HMR should just work. But the way the plugin is implemented is by caching the style request from the main entry of Vue SFC. Normally the request will be something like foo.vue?vue&type=style&lang.css, which will be compiled to a js module with HMR capability like:

import { createHotContext as __vite__createHotContext } from "/@vite/client";
import.meta.hot = __vite__createHotContext("/foo.vue?vue&type=style&lang.css");
import { updateStyle, removeStyle } from "/@vite/client"
const id = "..."
const css = "the CSS..."
updateStyle(id, css)
import.meta.hot.accept()
export default css
import.meta.hot.prune(() => removeStyle(id))

However, if we do a direct request to the CSS - in Nuxt case, we do SSR to embedded the style to prevent FOUC like:

<link rel="stylesheet" href="/foo.vue?vue&type=style&lang.css"></link>

Base on the browser request header, the CSS plugin will then resolve the id with to /foo.vue?direct&vue&type=style&lang.css with the ?direct to serve plain CSS instead of js module.

So now the direct request comes before the JS version, it makes the plugin internal state only record the direct one and send hmr event to the wrong module.

Additional context

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the Commit Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes nuxt/framework#123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[Shinigami92]

Do we already have ?direct somewhere? If not, we may want to add this to the next team meeting and discuss if we want to name it like that to make it really stable as a new wording.

[antfu]

@Shinigami92 👀

vite/packages/vite/src/node/plugins/css.ts

Lines 285 to 286 in 7970239

	if (isDirectCSSRequest(id)) {
	return css

vite/packages/vite/src/node/plugins/css.ts

Line 88 in 7970239

const directRequestRE = /(\?|&)direct\b/

vite/packages/vite/src/node/server/middlewares/transform.ts

Lines 147 to 156 in 9e06b81

	// for CSS, we need to differentiate between normal CSS requests and
	// imports
	if (
	isCSSRequest(url) &&
	!isDirectRequest(url) &&
	req.headers.accept?.includes('text/css')
	) {
	url = injectQuery(url, 'direct')
	}