fix(client): skip rewriting unchanged adopted styles

packages/vite/src/client/client.ts

@@ -580,7 +580,9 @@ export function updateStyle(id: string, content: string): void {
       lastInsertedStyle.insertAdjacentElement('afterend', style)
     }
     lastInsertedStyle = style
-  } else {
+  } else if (style.textContent !== content) {
+    // skip identical css, e.g. in a server rendered style: rewriting it still
+    // replaces the stylesheet, which can re-create the font faces it declares
     style.textContent = content
   }
   sheetsMap.set(id, style)

playground/hmr/__tests__/hmr.spec.ts

@@ -1320,4 +1320,26 @@ if (!isBuild) {
       await expect.poll(() => getColor('.test-css-link')).toBe('black')
     },
   )
+
+  // bundled dev: /css-style/index.html is not a bundle input
+  test.skipIf(isBundledDev)(
+    'reuse server rendered style without rewriting unchanged css',
+    async () => {
+      await page.goto(viteTestUrl + '/css-style/index.html')
+      await page.waitForFunction(() => (window as any).__cssStyleLoaded)
+      await expect.poll(() => getColor('.test-css-style')).toBe('orange')
+      expect(
+        await page.evaluate(() => [
+          document.querySelectorAll('style[data-vite-dev-id]').length,
+          (window as any).__ssrStyleMutations,
+        ]),
+      ).toStrictEqual([1, 0])
+
+      editFile('css-style/styles.css', (code) =>
+        code.replace('color: orange;', 'color: blue;'),
+      )
+      await expect.poll(() => getColor('.test-css-style')).toBe('blue')
+      expect(await page.locator('style[data-vite-dev-id]').count()).toBe(1)
+    },
+  )
 }

playground/hmr/css-style/index.html

@@ -0,0 +1,12 @@
+<div class="test-css-style">test-css-style</div>
+<script>
+  window.__ssrStyleMutations = 0
+  new MutationObserver((records) => {
+    window.__ssrStyleMutations += records.length
+  }).observe(document.querySelector('style[data-vite-dev-id]'), {
+    childList: true,
+    characterData: true,
+    subtree: true,
+  })
+</script>
+<script type="module" src="./main.js"></script>

playground/hmr/css-style/main.js

@@ -0,0 +1,7 @@
+import './styles.css'
+
+window.__cssStyleLoaded = true
+
+if (import.meta.hot) {
+  import.meta.hot.accept()
+}

playground/hmr/css-style/plugin.ts

@@ -0,0 +1,23 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { type Plugin, normalizePath } from 'vite'
+
+// use plugin to simulate server rendered style
+export function TestCssStylePlugin(): Plugin {
+  const file = path.resolve(import.meta.dirname, 'styles.css')
+  return {
+    name: 'test-css-style',
+    transformIndexHtml: {
+      handler(_html, ctx) {
+        if (!ctx.filename.endsWith('/css-style/index.html')) return
+        return [
+          {
+            tag: 'style',
+            attrs: { 'data-vite-dev-id': normalizePath(file) },
+            children: fs.readFileSync(file, 'utf-8'),
+          },
+        ]
+      },
+    },
+  }
+}

playground/hmr/css-style/styles.css

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

playground/hmr/vite.config.ts

@@ -3,6 +3,7 @@ import path from 'node:path'
 import { defineConfig } from 'vite'
 import type { Plugin } from 'vite'
 import { TestCssLinkPlugin } from './css-link/plugin.ts'
+import { TestCssStylePlugin } from './css-style/plugin.ts'
 
 export default defineConfig(({ command }) => ({
   input: [
@@ -56,6 +57,7 @@ export default defineConfig(({ command }) => ({
     transformCountPlugin(),
     watchCssDepsPlugin(),
     TestCssLinkPlugin(),
+    TestCssStylePlugin(),
     hotEventsPlugin(),
   ],
 }))