Skip to content

Commit

Permalink
fix(hydration): handle edge case of style mismatch without style attr…
Browse files Browse the repository at this point in the history
…ibute

ref #10786
  • Loading branch information
yyx990803 committed May 6, 2024
1 parent 481b1b6 commit f2c1412
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 3 deletions.
7 changes: 7 additions & 0 deletions packages/runtime-core/__tests__/hydration.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1527,6 +1527,13 @@ describe('SSR hydration', () => {
expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
})

test('style mismatch when no style attribute is present', () => {
mountWithHydration(`<div></div>`, () =>
h('div', { style: { color: 'red' } }),
)
expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
})

test('style mismatch w/ v-show', () => {
mountWithHydration(`<div style="color:red;display:none"></div>`, () =>
withDirectives(createVNode('div', { style: 'color: red' }, ''), [
Expand Down
6 changes: 3 additions & 3 deletions packages/runtime-core/src/hydration.ts
Original file line number Diff line number Diff line change
Expand Up @@ -727,8 +727,8 @@ function propHasMismatch(
): boolean {
let mismatchType: string | undefined
let mismatchKey: string | undefined
let actual: any
let expected: any
let actual: string | boolean | null | undefined
let expected: string | boolean | null | undefined
if (key === 'class') {
// classes might be in different order, but that doesn't affect cascade
// so we just need to check if the class lists contain the same classes.
Expand All @@ -739,7 +739,7 @@ function propHasMismatch(
}
} else if (key === 'style') {
// style might be in different order, but that doesn't affect cascade
actual = el.getAttribute('style')
actual = el.getAttribute('style') || ''
expected = isString(clientValue)
? clientValue
: stringifyStyle(normalizeStyle(clientValue))
Expand Down

0 comments on commit f2c1412

Please sign in to comment.