Skip to content

Commit

Permalink
fix(sfc/style-vars): should attach css vars while subtree changed (#…
Browse files Browse the repository at this point in the history
…2178)

* fix(cssVars): should attach css vars while `subtree` changed

fix #2177

* fix: fix test
  • Loading branch information
underfin authored Oct 13, 2020
1 parent bac4d22 commit 408a8ca
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 7 deletions.
26 changes: 26 additions & 0 deletions packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {
ref,
render,
useCssVars,
h,
Expand Down Expand Up @@ -125,4 +126,29 @@ describe('useCssVars', () => {
id
)
})

test('with subTree changed', async () => {
const state = reactive({ color: 'red' })
const value = ref(true)
const root = document.createElement('div')

const App = {
setup() {
useCssVars(() => state)
return () => (value.value ? [h('div')] : [h('div'), h('div')])
}
}

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`)
}

value.value = false
await nextTick()
for (const c of [].slice.call(root.children as any)) {
expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('red')
}
})
})
14 changes: 7 additions & 7 deletions packages/runtime-dom/src/helpers/useCssVars.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@ import {
ComponentPublicInstance,
getCurrentInstance,
onMounted,
watchEffect,
warn,
VNode,
Fragment,
unref
unref,
onUpdated,
watchEffect
} from '@vue/runtime-core'
import { ShapeFlags } from '@vue/shared'

Expand All @@ -27,11 +28,10 @@ export function useCssVars(
? `${instance.type.__scopeId.replace(/^data-v-/, '')}-`
: ``

onMounted(() => {
watchEffect(() => {
setVarsOnVNode(instance.subTree, getter(instance.proxy!), prefix)
})
})
const setVars = () =>
setVarsOnVNode(instance.subTree, getter(instance.proxy!), prefix)
onMounted(() => watchEffect(setVars))
onUpdated(setVars)
}

function setVarsOnVNode(
Expand Down

0 comments on commit 408a8ca

Please sign in to comment.