From b8d329dafea98766a8a419fa1c38ccc1ae449429 Mon Sep 17 00:00:00 2001 From: daiwei Date: Sat, 29 May 2021 15:10:50 +0800 Subject: [PATCH 1/3] fix(runtime-dom): useCssVars work with createStaticVNode chore: improve code chore: improve code --- .../__tests__/helpers/useCssVars.spec.ts | 23 +++++++++++++++++++ .../runtime-dom/src/helpers/useCssVars.ts | 21 +++++++++++++++++ 2 files changed, 44 insertions(+) diff --git a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts index ae86e57ba5d..a72d0a9c2df 100644 --- a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts +++ b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts @@ -2,6 +2,7 @@ import { ref, render, useCssVars, + createStaticVNode, h, reactive, nextTick, @@ -140,4 +141,26 @@ describe('useCssVars', () => { expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('red') } }) + + test('with createStaticVNode', async () => { + const state = reactive({ color: 'red' }) + const root = document.createElement('div') + + const App = { + setup() { + useCssVars(() => state) + return () => [ + h('div'), + createStaticVNode('
1
2
', 2), + h('div') + ] + } + } + + render(h(App), root) + await nextTick() + for (const c of [].slice.call(root.children as any)) { + expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('red') + } + }) }) diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts index 82c48e33a04..e6fd33e3174 100644 --- a/packages/runtime-dom/src/helpers/useCssVars.ts +++ b/packages/runtime-dom/src/helpers/useCssVars.ts @@ -4,6 +4,7 @@ import { warn, VNode, Fragment, + Static, onUpdated, watchEffect } from '@vue/runtime-core' @@ -53,5 +54,25 @@ function setVarsOnVNode(vnode: VNode, vars: Record) { } } else if (vnode.type === Fragment) { ;(vnode.children as VNode[]).forEach(c => setVarsOnVNode(c, vars)) + } else if (vnode.type === Static) { + const { el, anchor } = vnode + let current: HTMLElement | null = el as HTMLElement + while (current) { + setVarsOnElement(current, vars) + if (current === anchor) break + current = current.nextSibling as HTMLElement + } + } + + function setVarsOnElement(el: HTMLElement, vars: Record) { + const style = el.style + for (const key in vars) { + style.setProperty(`--${key}`, vars[key]) + } + + for (var i = 0; i < el.children.length; i++) { + const n = el.children[i] + setVarsOnElement(n as HTMLElement, vars) + } } } From c55711229c727cb259b40d499cf044f57e8e00e6 Mon Sep 17 00:00:00 2001 From: daiwei Date: Tue, 1 Jun 2021 09:03:23 +0800 Subject: [PATCH 2/3] chore: improve code --- .../runtime-dom/src/helpers/useCssVars.ts | 30 ++++++++++--------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts index e6fd33e3174..d1d051377cb 100644 --- a/packages/runtime-dom/src/helpers/useCssVars.ts +++ b/packages/runtime-dom/src/helpers/useCssVars.ts @@ -48,13 +48,12 @@ function setVarsOnVNode(vnode: VNode, vars: Record) { } if (vnode.shapeFlag & ShapeFlags.ELEMENT && vnode.el) { - const style = vnode.el.style - for (const key in vars) { - style.setProperty(`--${key}`, vars[key]) - } + setStyle(vnode.el as HTMLElement, vars) } else if (vnode.type === Fragment) { ;(vnode.children as VNode[]).forEach(c => setVarsOnVNode(c, vars)) - } else if (vnode.type === Static) { + } + // #3841 + else if (vnode.type === Static) { const { el, anchor } = vnode let current: HTMLElement | null = el as HTMLElement while (current) { @@ -63,16 +62,19 @@ function setVarsOnVNode(vnode: VNode, vars: Record) { current = current.nextSibling as HTMLElement } } +} - function setVarsOnElement(el: HTMLElement, vars: Record) { - const style = el.style - for (const key in vars) { - style.setProperty(`--${key}`, vars[key]) - } +function setStyle(el: HTMLElement, vars: Record) { + const style = el.style + for (const key in vars) { + style.setProperty(`--${key}`, vars[key]) + } +} - for (var i = 0; i < el.children.length; i++) { - const n = el.children[i] - setVarsOnElement(n as HTMLElement, vars) - } +function setVarsOnElement(el: HTMLElement, vars: Record) { + setStyle(el, vars) + for (var i = 0; i < el.children.length; i++) { + const n = el.children[i] + setVarsOnElement(n as HTMLElement, vars) } } From 3d01d0dea0648e10681c2ab4295e6588d58aedae Mon Sep 17 00:00:00 2001 From: Evan You Date: Wed, 14 Jul 2021 18:04:13 -0400 Subject: [PATCH 3/3] Update useCssVars.ts --- .../runtime-dom/src/helpers/useCssVars.ts | 35 +++++++------------ 1 file changed, 13 insertions(+), 22 deletions(-) diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts index d1d051377cb..3253dd22731 100644 --- a/packages/runtime-dom/src/helpers/useCssVars.ts +++ b/packages/runtime-dom/src/helpers/useCssVars.ts @@ -48,33 +48,24 @@ function setVarsOnVNode(vnode: VNode, vars: Record) { } if (vnode.shapeFlag & ShapeFlags.ELEMENT && vnode.el) { - setStyle(vnode.el as HTMLElement, vars) + setVarsOnNode(vnode.el as Node, vars) } else if (vnode.type === Fragment) { ;(vnode.children as VNode[]).forEach(c => setVarsOnVNode(c, vars)) - } - // #3841 - else if (vnode.type === Static) { - const { el, anchor } = vnode - let current: HTMLElement | null = el as HTMLElement - while (current) { - setVarsOnElement(current, vars) - if (current === anchor) break - current = current.nextSibling as HTMLElement + } else if (vnode.type === Static) { + let { el, anchor } = vnode + while (el) { + setVarsOnNode(el as Node, vars) + if (el === anchor) break + el = el.nextSibling } } } -function setStyle(el: HTMLElement, vars: Record) { - const style = el.style - for (const key in vars) { - style.setProperty(`--${key}`, vars[key]) - } -} - -function setVarsOnElement(el: HTMLElement, vars: Record) { - setStyle(el, vars) - for (var i = 0; i < el.children.length; i++) { - const n = el.children[i] - setVarsOnElement(n as HTMLElement, vars) +function setVarsOnNode(el: Node, vars: Record) { + if (el.nodeType === 1) { + const style = (el as HTMLElement).style + for (const key in vars) { + style.setProperty(`--${key}`, vars[key]) + } } }