fix(runtime-dom): useCssVars work with createStaticVNode

chore: improve code

chore: improve code

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('<div>1</div><div><span>2</span></div>', 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')
+ }
+ })
 })

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<string, string>) {
  }
  } 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<string, string>) {
+ 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)
+ }
  }
 }