fix(vite): swap <link> style on dev ssr (#1712)

packages/bridge/src/vite/client.ts

@@ -3,6 +3,7 @@ import * as vite from 'vite'
 import { createVuePlugin } from 'vite-plugin-vue2'
 import PluginLegacy from '@vitejs/plugin-legacy'
 import consola from 'consola'
+import { devStyleSSRPlugin } from '../../../vite/src/plugins/dev-ssr-css'
 import { jsxPlugin } from './plugins/jsx'
 import { ViteBuildContext, ViteOptions } from './types'
 
@@ -38,7 +39,8 @@ export async function buildClient (ctx: ViteBuildContext) {
     plugins: [
       jsxPlugin(),
       createVuePlugin(ctx.config.vue),
-      PluginLegacy()
+      PluginLegacy(),
+      devStyleSSRPlugin(ctx.nuxt.options.rootDir)
     ],
     server: {
       middlewareMode: true

packages/vite/src/client.ts

@@ -11,6 +11,7 @@ import { cacheDirPlugin } from './plugins/cache-dir'
 import { wpfs } from './utils/wpfs'
 import type { ViteBuildContext, ViteOptions } from './vite'
 import { writeManifest } from './manifest'
+import { devStyleSSRPlugin } from './plugins/dev-ssr-css'
 
 export async function buildClient (ctx: ViteBuildContext) {
   const clientConfig: vite.InlineConfig = vite.mergeConfig(ctx.config, {
@@ -38,7 +39,8 @@ export async function buildClient (ctx: ViteBuildContext) {
     plugins: [
       cacheDirPlugin(ctx.nuxt.options.rootDir, 'client'),
       vuePlugin(ctx.config.vue),
-      viteJsxPlugin()
+      viteJsxPlugin(),
+      devStyleSSRPlugin(ctx.nuxt.options.rootDir)
     ],
     server: {
       middlewareMode: true

packages/vite/src/plugins/dev-ssr-css.ts

@@ -0,0 +1,24 @@
+import { Plugin } from 'vite'
+import { isCSS } from '../utils'
+
+export function devStyleSSRPlugin (rootDir: string): Plugin {
+  return {
+    name: 'nuxt:dev-style-ssr',
+    apply: 'serve',
+    enforce: 'post',
+    transform (code, id) {
+      if (!isCSS(id) || !code.includes('import.meta.hot')) {
+        return
+      }
+
+      let moduleId = id
+      if (moduleId.startsWith(rootDir)) {
+        moduleId = moduleId.slice(rootDir.length)
+      }
+
+      // When dev `<style>` is injected, remove the `<link>` styles from manifest
+      // TODO: Use `app.assetsPath` or unique hash
+      return code + `\ndocument.querySelector(\`link[href="/_nuxt${moduleId}"]\`).forEach(i=>i.remove())`
+    }
+  }
+}