Skip to content

Commit

Permalink
fix(style-vars): fix css vars on component with suspense as root (#1718)
Browse files Browse the repository at this point in the history
  • Loading branch information
underfin authored Jul 28, 2020
1 parent 58b4a38 commit 07ece2e
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 1 deletion.
45 changes: 44 additions & 1 deletion packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import {
h,
reactive,
nextTick,
ComponentOptions
ComponentOptions,
Suspense
} from '@vue/runtime-dom'

describe('useCssVars', () => {
Expand Down Expand Up @@ -68,6 +69,48 @@ describe('useCssVars', () => {
}))
})

test('on suspense root', async () => {
const state = reactive({ color: 'red' })
const root = document.createElement('div')

const AsyncComp = {
async setup() {
return () => h('p', 'default')
}
}

const App = {
setup() {
useCssVars(() => state)
return () =>
h(Suspense, null, {
default: h(AsyncComp),
fallback: h('div', 'fallback')
})
}
}

render(h(App), root)
// css vars use with fallback tree
for (const c of [].slice.call(root.children as any)) {
expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe(`red`)
}
// AsyncComp resolve
await nextTick()
// Suspense effects flush
await nextTick()
// css vars use with default tree
for (const c of [].slice.call(root.children as any)) {
expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe(`red`)
}

state.color = 'green'
await nextTick()
for (const c of [].slice.call(root.children as any)) {
expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('green')
}
})

test('with <style scoped>', async () => {
const id = 'data-v-12345'

Expand Down
13 changes: 13 additions & 0 deletions packages/runtime-dom/src/helpers/useCssVars.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,23 @@ function setVarsOnVNode(
vars: Record<string, string>,
prefix: string
) {
if (__FEATURE_SUSPENSE__ && vnode.shapeFlag & ShapeFlags.SUSPENSE) {
const { isResolved, isHydrating, fallbackTree, subTree } = vnode.suspense!
if (isResolved || isHydrating) {
vnode = subTree
} else {
vnode.suspense!.effects.push(() => {
setVarsOnVNode(subTree, vars, prefix)
})
vnode = fallbackTree
}
}

// drill down HOCs until it's a non-component vnode
while (vnode.component) {
vnode = vnode.component.subTree
}

if (vnode.shapeFlag & ShapeFlags.ELEMENT && vnode.el) {
const style = vnode.el.style
for (const key in vars) {
Expand Down

0 comments on commit 07ece2e

Please sign in to comment.