From 2701355e8eb07ab664e398d9fc05d6c4e2e9b20e Mon Sep 17 00:00:00 2001
From: zhoulixiang <18366276315@163.com>
Date: Mon, 8 Jan 2024 16:36:27 +0800
Subject: [PATCH] fix(hydration): avoid hydration mismatch warning for styles
with different order (#10011)
close #10000
close #10006
---
.../runtime-core/__tests__/hydration.spec.ts | 32 ++++++++-
packages/runtime-core/src/hydration.ts | 65 ++++++++++++++++---
packages/runtime-dom/src/directives/vShow.ts | 6 +-
3 files changed, 92 insertions(+), 11 deletions(-)
diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index 303db51cb44..0d7df43f6aa 100644
--- a/packages/runtime-core/__tests__/hydration.spec.ts
+++ b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -1431,11 +1431,35 @@ describe('SSR hydration', () => {
mountWithHydration(`
`, () =>
h('div', { style: `color:red;` }),
)
+ mountWithHydration(
+ ``,
+ () => h('div', { style: `font-size: 12px; color:red;` }),
+ )
+ mountWithHydration(``, () =>
+ withDirectives(createVNode('div', { style: 'color: red' }, ''), [
+ [vShow, false],
+ ]),
+ )
expect(`Hydration style mismatch`).not.toHaveBeenWarned()
mountWithHydration(``, () =>
h('div', { style: { color: 'green' } }),
)
- expect(`Hydration style mismatch`).toHaveBeenWarned()
+ expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
+ })
+
+ test('style mismatch w/ v-show', () => {
+ mountWithHydration(``, () =>
+ withDirectives(createVNode('div', { style: 'color: red' }, ''), [
+ [vShow, false],
+ ]),
+ )
+ expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+ mountWithHydration(``, () =>
+ withDirectives(createVNode('div', { style: 'color: red' }, ''), [
+ [vShow, false],
+ ]),
+ )
+ expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
})
test('attr mismatch', () => {
@@ -1451,6 +1475,12 @@ describe('SSR hydration', () => {
mountWithHydration(`