From 85d173d6530a683d573e08ffe951e21800983158 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 5 Nov 2021 16:55:53 +0800
Subject: [PATCH] fix(vite): swap `<link>` style on dev ssr (#1712)

---
 packages/bridge/src/vite/client.ts       |  4 +++-
 packages/vite/src/client.ts              |  4 +++-
 packages/vite/src/plugins/dev-ssr-css.ts | 24 ++++++++++++++++++++++++
 3 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 packages/vite/src/plugins/dev-ssr-css.ts

diff --git a/packages/bridge/src/vite/client.ts b/packages/bridge/src/vite/client.ts
index d7787cb774..e980a69ea7 100644
--- a/packages/bridge/src/vite/client.ts
+++ b/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
diff --git a/packages/vite/src/client.ts b/packages/vite/src/client.ts
index ca60c9c625..21522f31d2 100644
--- a/packages/vite/src/client.ts
+++ b/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
diff --git a/packages/vite/src/plugins/dev-ssr-css.ts b/packages/vite/src/plugins/dev-ssr-css.ts
new file mode 100644
index 0000000000..b7b243c242
--- /dev/null
+++ b/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())`
+    }
+  }
+}