test: add e2e

playground/hmr/__tests__/hmr.spec.ts

@@ -1107,4 +1107,27 @@ if (!isBuild) {
       await loadPromise
     }, [/connected/, 'a.js'])
   })
+
+  test('deduplicate server rendered link stylesheet', async () => {
+    await page.goto(viteTestUrl + '/css-link/index.html')
+    await expect.poll(() => getColor('.test-css-link')).toBe('orange')
+
+    // remove color
+    editFile('css-link/styles.css', (code) =>
+      code.replace('color: orange;', '/* removed */'),
+    )
+    await expect.poll(() => getColor('.test-css-link')).toBe('black')
+
+    // add color
+    editFile('css-link/styles.css', (code) =>
+      code.replace('/* removed */', 'color: blue;'),
+    )
+    await expect.poll(() => getColor('.test-css-link')).toBe('blue')
+
+    // // remove css import from js
+    editFile('css-link/main.js', (code) =>
+      code.replace(`import './styles.css'`, ``),
+    )
+    await expect.poll(() => getColor('.test-css-link')).toBe('black')
+  })
 }

playground/hmr/css-link/index.html

@@ -0,0 +1,2 @@
+<div class="test-css-link">test-css-link</div>
+<script type="module" src="./main.js"></script>

playground/hmr/css-link/main.js

@@ -0,0 +1,5 @@
+import './styles.css'
+
+if (import.meta.hot) {
+  import.meta.hot.accept()
+}

playground/hmr/css-link/plugin.ts

@@ -0,0 +1,26 @@
+import { normalizePath, type Plugin } from 'vite'
+import path from 'node:path'
+
+// use plugin to simulate server rendered css link
+export function TestCssLinkPlugin(): Plugin {
+  return {
+    name: 'test-css-link',
+    transformIndexHtml: {
+      handler(_html, ctx) {
+        if (!ctx.filename.endsWith('/css-link/index.html')) return
+        return [
+          {
+            tag: 'link',
+            attrs: {
+              rel: 'stylesheet',
+              href: '/css-link/styles.css',
+              'data-vite-dev-id': normalizePath(
+                path.resolve(import.meta.dirname, 'styles.css'),
+              ),
+            },
+          },
+        ]
+      },
+    },
+  }
+}

playground/hmr/css-link/styles.css

@@ -0,0 +1,3 @@
+.test-css-link {
+  color: orange;
+}

playground/hmr/vite.config.ts

@@ -2,6 +2,7 @@ import fs from 'node:fs/promises'
 import path from 'node:path'
 import { defineConfig } from 'vite'
 import type { Plugin } from 'vite'
+import { TestCssLinkPlugin } from './css-link/plugin'
 
 export default defineConfig({
   experimental: {
@@ -37,6 +38,7 @@ export default defineConfig({
     virtualPlugin(),
     transformCountPlugin(),
     watchCssDepsPlugin(),
+    TestCssLinkPlugin(),
   ],
 })