Skip to content

Commit

Permalink
fix(hydration): fix css vars hydration mismatch false positive on att…
Browse files Browse the repository at this point in the history
…r-fallthrough (#11190)

close #11188
  • Loading branch information
yangxiuxiu1115 authored Jun 22, 2024
1 parent 80ba50d commit 7ad67ce
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 16 deletions.
21 changes: 21 additions & 0 deletions packages/runtime-core/__tests__/hydration.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1674,5 +1674,26 @@ describe('SSR hydration', () => {
app.mount(container)
expect(`Hydration style mismatch`).not.toHaveBeenWarned()
})

// #11188
test('css vars support fallthrough', () => {
const container = document.createElement('div')
container.innerHTML = `<div style="padding: 4px;--foo:red;"></div>`
const app = createSSRApp({
setup() {
useCssVars(() => ({
foo: 'red',
}))
return () => h(Child)
},
})
const Child = {
setup() {
return () => h('div', { style: 'padding: 4px' })
},
}
app.mount(container)
expect(`Hydration style mismatch`).not.toHaveBeenWarned()
})
})
})
43 changes: 27 additions & 16 deletions packages/runtime-core/src/hydration.ts
Original file line number Diff line number Diff line change
Expand Up @@ -766,18 +766,8 @@ function propHasMismatch(
}
}

// eslint-disable-next-line no-restricted-syntax
const root = instance?.subTree
if (
vnode === root ||
// eslint-disable-next-line no-restricted-syntax
(root?.type === Fragment && (root.children as VNode[]).includes(vnode))
) {
// eslint-disable-next-line no-restricted-syntax
const cssVars = instance?.getCssVars?.()
for (const key in cssVars) {
expectedMap.set(`--${key}`, String(cssVars[key]))
}
if (instance) {
resolveCssVars(instance, vnode, expectedMap)
}

if (!isMapEqual(actualMap, expectedMap)) {
Expand Down Expand Up @@ -854,10 +844,8 @@ function toStyleMap(str: string): Map<string, string> {
const styleMap: Map<string, string> = new Map()
for (const item of str.split(';')) {
let [key, value] = item.split(':')
// eslint-disable-next-line no-restricted-syntax
key = key?.trim()
// eslint-disable-next-line no-restricted-syntax
value = value?.trim()
key = key.trim()
value = value && value.trim()
if (key && value) {
styleMap.set(key, value)
}
Expand All @@ -876,3 +864,26 @@ function isMapEqual(a: Map<string, string>, b: Map<string, string>): boolean {
}
return true
}

function resolveCssVars(
instance: ComponentInternalInstance,
vnode: VNode,
expectedMap: Map<string, string>,
) {
const root = instance.subTree
if (
instance.getCssVars &&
(vnode === root ||
(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 (vnode === root && instance.parent) {
resolveCssVars(instance.parent, instance.vnode, expectedMap)
}
}

0 comments on commit 7ad67ce

Please sign in to comment.