From e21e0cb5ba566b9b8d10910243f511406dd4eb68 Mon Sep 17 00:00:00 2001
From: zhoulixiang <18366276315@163.com>
Date: Mon, 12 Feb 2024 03:34:36 +0000
Subject: [PATCH 1/3] fix: css vars should only be added to expected on
 component root dom

---
 .../runtime-core/__tests__/hydration.spec.ts     | 16 ++++++++++++++++
 packages/runtime-core/src/hydration.ts           |  8 +++++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index 3fa0d7e732e..de2d4fcb189 100644
--- a/packages/runtime-core/__tests__/hydration.spec.ts
+++ b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -1554,5 +1554,21 @@ describe('SSR hydration', () => {
       app.mount(container)
       expect(`Hydration style mismatch`).not.toHaveBeenWarned()
     })
+
+    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 1e9200ce27b..f99237a597f 100644
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -753,9 +753,11 @@ function propHasMismatch(
       }
     }
 
-    const cssVars = instance?.getCssVars?.()
-    for (const key in cssVars) {
-      expectedMap.set(`--${key}`, String(cssVars[key]))
+    if (el === instance?.subTree?.el) {
+      const cssVars = instance?.getCssVars?.()
+      for (const key in cssVars) {
+        expectedMap.set(`--${key}`, String(cssVars[key]))
+      }
     }
 
     if (!isMapEqual(actualMap, expectedMap)) {

From 7ac8338f5ae275261616fad12ec3a3979199b32c Mon Sep 17 00:00:00 2001
From: zhoulixiang <18366276315@163.com>
Date: Mon, 12 Feb 2024 05:54:51 +0000
Subject: [PATCH 2/3] fix: add logic to judge el with vars

---
 packages/runtime-core/src/hydration.ts | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index f99237a597f..fdf3491252a 100644
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -753,7 +753,7 @@ function propHasMismatch(
       }
     }
 
-    if (el === instance?.subTree?.el) {
+    if (instance && isElementWithVars(instance.subTree, el)) {
       const cssVars = instance?.getCssVars?.()
       for (const key in cssVars) {
         expectedMap.set(`--${key}`, String(cssVars[key]))
@@ -854,3 +854,25 @@ function isMapEqual(a: Map<string, string>, b: Map<string, string>): boolean {
   }
   return true
 }
+
+function isElementWithVars(vnode: VNode, element: Element): boolean {
+  while (vnode.component) {
+    vnode = vnode.component.subTree
+  }
+
+  if (vnode.shapeFlag & ShapeFlags.ELEMENT && vnode.el) {
+    return element === vnode.el
+  } else if (vnode.type === Fragment) {
+    return (vnode.children as VNode[]).some(c => isElementWithVars(c, element))
+  } else if (vnode.type === Static) {
+    let { el, anchor } = vnode
+    while (el) {
+      if (el === element) {
+        return true
+      }
+      if (el === anchor) break
+      el = el.nextSibling
+    }
+  }
+  return false
+}

From 9c663f4f8f469002132d386dcf96fab7fe85be3b Mon Sep 17 00:00:00 2001
From: zhoulixiang <18366276315@163.com>
Date: Mon, 12 Feb 2024 05:58:23 +0000
Subject: [PATCH 3/3] fix: optimize the name of fn to judge instance root el

---
 packages/runtime-core/src/hydration.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index fdf3491252a..fa61ed96a94 100644
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -753,7 +753,7 @@ function propHasMismatch(
       }
     }
 
-    if (instance && isElementWithVars(instance.subTree, el)) {
+    if (instance && isInstanceRootEl(instance.subTree, el)) {
       const cssVars = instance?.getCssVars?.()
       for (const key in cssVars) {
         expectedMap.set(`--${key}`, String(cssVars[key]))
@@ -855,7 +855,7 @@ function isMapEqual(a: Map<string, string>, b: Map<string, string>): boolean {
   return true
 }
 
-function isElementWithVars(vnode: VNode, element: Element): boolean {
+function isInstanceRootEl(vnode: VNode, element: Element): boolean {
   while (vnode.component) {
     vnode = vnode.component.subTree
   }
@@ -863,7 +863,7 @@ function isElementWithVars(vnode: VNode, element: Element): boolean {
   if (vnode.shapeFlag & ShapeFlags.ELEMENT && vnode.el) {
     return element === vnode.el
   } else if (vnode.type === Fragment) {
-    return (vnode.children as VNode[]).some(c => isElementWithVars(c, element))
+    return (vnode.children as VNode[]).some(c => isInstanceRootEl(c, element))
   } else if (vnode.type === Static) {
     let { el, anchor } = vnode
     while (el) {