From: Evan You <yyx990803@gmail.com>
Date: Tue, 13 Feb 2024 10:00:09 +0000 (+0800)
Subject: fix(hydration): fix css vars hydration mismatch false positive on non-root nodes
X-Git-Tag: v3.4.19~2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=995d2fdcca485c24849c99f498c1edc163722e04;p=thirdparty%2Fvuejs%2Fcore.git

fix(hydration): fix css vars hydration mismatch false positive on non-root nodes

close #10317
test case from #10325
---

diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index 3fa0d7e732..da00d76359 100644
--- a/packages/runtime-core/__tests__/hydration.spec.ts
+++ b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -1554,5 +1554,22 @@ describe('SSR hydration', () => {
       app.mount(container)
       expect(`Hydration style mismatch`).not.toHaveBeenWarned()
     })
+
+    // #10317 - test case from #10325
+    test('css vars should only be added to expected on component root dom', () => {
+      const container = document.createElement('div')
+      container.innerHTML = `<div style="--foo:red;"><div style="color:var(--foo);" /></div>`
+      const app = createSSRApp({
+        setup() {
+          useCssVars(() => ({
+            foo: 'red',
+          }))
+          return () =>
+            h('div', null, [h('div', { style: { color: 'var(--foo)' } })])
+        },
+      })
+      app.mount(container)
+      expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+    })
   })
 })
diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index 1e9200ce27..de02ae46d8 100644
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -753,9 +753,15 @@ function propHasMismatch(
       }
     }
 
-    const cssVars = instance?.getCssVars?.()
-    for (const key in cssVars) {
-      expectedMap.set(`--${key}`, String(cssVars[key]))
+    const root = instance?.subTree
+    if (
+      vnode === root ||
+      (root?.type === Fragment && (root.children as VNode[]).includes(vnode))
+    ) {
+      const cssVars = instance?.getCssVars?.()
+      for (const key in cssVars) {
+        expectedMap.set(`--${key}`, String(cssVars[key]))
+      }
     }
 
     if (!isMapEqual(actualMap, expectedMap)) {