From cc1595f42a0b6c5f3ec5f485b82c7989bcb5d903 Mon Sep 17 00:00:00 2001
From: Serghei <43180231+xyrolle@users.noreply.github.com>
Date: Wed, 7 Oct 2026 17:45:43 +0300
Subject: [PATCH 1/2] fix(client): skip rewriting unchanged adopted styles

`updateStyle` reuses a server-rendered `<style data-vite-dev-id>` and then
sets its `textContent` to the module's CSS, even when the text is already
the same. Chrome 154 replaces the stylesheet on that write and re-creates
the font faces it declares. Those fonts are then revalidated, since the dev
server serves them with `Cache-Control: no-cache`, and a
`font-display: optional` font that is still loading when the page renders
stays on its fallback.

Only write the CSS when it differs.
---
 packages/vite/src/client/client.ts   |  4 +++-
 playground/hmr/__tests__/hmr.spec.ts | 22 +++++++++++++++++
 playground/hmr/css-style/index.html  |  2 ++
 playground/hmr/css-style/main.js     |  7 ++++++
 playground/hmr/css-style/plugin.ts   | 36 ++++++++++++++++++++++++++++
 playground/hmr/css-style/styles.css  |  3 +++
 playground/hmr/vite.config.ts        |  2 ++
 7 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 playground/hmr/css-style/index.html
 create mode 100644 playground/hmr/css-style/main.js
 create mode 100644 playground/hmr/css-style/plugin.ts
 create mode 100644 playground/hmr/css-style/styles.css

diff --git a/packages/vite/src/client/client.ts b/packages/vite/src/client/client.ts
index efd5af774ed27c..1e7cfbeec6bd65 100644
--- a/packages/vite/src/client/client.ts
+++ b/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)
diff --git a/playground/hmr/__tests__/hmr.spec.ts b/playground/hmr/__tests__/hmr.spec.ts
index 34da7ec17f5fcb..65e250bcbf05ba 100644
--- a/playground/hmr/__tests__/hmr.spec.ts
+++ b/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,
+        ]),
+      ).toEqual([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)
+    },
+  )
 }
diff --git a/playground/hmr/css-style/index.html b/playground/hmr/css-style/index.html
new file mode 100644
index 00000000000000..7994ef52b61c5b
--- /dev/null
+++ b/playground/hmr/css-style/index.html
@@ -0,0 +1,2 @@
+<div class="test-css-style">test-css-style</div>
+<script type="module" src="./main.js"></script>
diff --git a/playground/hmr/css-style/main.js b/playground/hmr/css-style/main.js
new file mode 100644
index 00000000000000..0ede492fa5c81d
--- /dev/null
+++ b/playground/hmr/css-style/main.js
@@ -0,0 +1,7 @@
+import './styles.css'
+
+window.__cssStyleLoaded = true
+
+if (import.meta.hot) {
+  import.meta.hot.accept()
+}
diff --git a/playground/hmr/css-style/plugin.ts b/playground/hmr/css-style/plugin.ts
new file mode 100644
index 00000000000000..63baa9464786e5
--- /dev/null
+++ b/playground/hmr/css-style/plugin.ts
@@ -0,0 +1,36 @@
+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'),
+          },
+          {
+            tag: 'script',
+            children: `
+              window.__ssrStyleMutations = 0
+              new MutationObserver((records) => {
+                window.__ssrStyleMutations += records.length
+              }).observe(document.querySelector('style[data-vite-dev-id]'), {
+                childList: true,
+                characterData: true,
+                subtree: true,
+              })
+            `,
+          },
+        ]
+      },
+    },
+  }
+}
diff --git a/playground/hmr/css-style/styles.css b/playground/hmr/css-style/styles.css
new file mode 100644
index 00000000000000..01eaa860e5a0fc
--- /dev/null
+++ b/playground/hmr/css-style/styles.css
@@ -0,0 +1,3 @@
+.test-css-style {
+  color: orange;
+}
diff --git a/playground/hmr/vite.config.ts b/playground/hmr/vite.config.ts
index 030775cd3fa3f2..a092108f2046c1 100644
--- a/playground/hmr/vite.config.ts
+++ b/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(),
   ],
 }))

From a13218c90b7133165570f4e62c3a23a12bb915c7 Mon Sep 17 00:00:00 2001
From: sapphi-red <green@sapphi.red>
Date: Thu, 8 Oct 2026 18:47:30 +0900
Subject: [PATCH 2/2] test: tweak

---
 playground/hmr/__tests__/hmr.spec.ts |  2 +-
 playground/hmr/css-style/index.html  | 10 ++++++++++
 playground/hmr/css-style/plugin.ts   | 13 -------------
 3 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/playground/hmr/__tests__/hmr.spec.ts b/playground/hmr/__tests__/hmr.spec.ts
index 65e250bcbf05ba..cf258b8e1d79a4 100644
--- a/playground/hmr/__tests__/hmr.spec.ts
+++ b/playground/hmr/__tests__/hmr.spec.ts
@@ -1333,7 +1333,7 @@ if (!isBuild) {
           document.querySelectorAll('style[data-vite-dev-id]').length,
           (window as any).__ssrStyleMutations,
         ]),
-      ).toEqual([1, 0])
+      ).toStrictEqual([1, 0])
 
       editFile('css-style/styles.css', (code) =>
         code.replace('color: orange;', 'color: blue;'),
diff --git a/playground/hmr/css-style/index.html b/playground/hmr/css-style/index.html
index 7994ef52b61c5b..2e86942b258ece 100644
--- a/playground/hmr/css-style/index.html
+++ b/playground/hmr/css-style/index.html
@@ -1,2 +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>
diff --git a/playground/hmr/css-style/plugin.ts b/playground/hmr/css-style/plugin.ts
index 63baa9464786e5..a812f0e3e7b8c0 100644
--- a/playground/hmr/css-style/plugin.ts
+++ b/playground/hmr/css-style/plugin.ts
@@ -16,19 +16,6 @@ export function TestCssStylePlugin(): Plugin {
             attrs: { 'data-vite-dev-id': normalizePath(file) },
             children: fs.readFileSync(file, 'utf-8'),
           },
-          {
-            tag: 'script',
-            children: `
-              window.__ssrStyleMutations = 0
-              new MutationObserver((records) => {
-                window.__ssrStyleMutations += records.length
-              }).observe(document.querySelector('style[data-vite-dev-id]'), {
-                childList: true,
-                characterData: true,
-                subtree: true,
-              })
-            `,
-          },
         ]
       },
     },