fix(sfc): fix style variables injection on static vnode (#3847)

fix #3841

packages/runtime-dom/src/helpers/useCssVars.ts

@@ -4,6 +4,7 @@ import {
   warn,
   VNode,
   Fragment,
+  Static,
   onUpdated,
   watchEffect
 } from '@vue/runtime-core'
@@ -47,11 +48,24 @@ function setVarsOnVNode(vnode: VNode, vars: Record<string, string>) {
   }
 
   if (vnode.shapeFlag & ShapeFlags.ELEMENT && vnode.el) {
-    const style = vnode.el.style
+    setVarsOnNode(vnode.el as Node, vars)
+  } else if (vnode.type === Fragment) {
+    ;(vnode.children as VNode[]).forEach(c => setVarsOnVNode(c, vars))
+  } else if (vnode.type === Static) {
+    let { el, anchor } = vnode
+    while (el) {
+      setVarsOnNode(el as Node, vars)
+      if (el === anchor) break
+      el = el.nextSibling
+    }
+  }
+}
+
+function setVarsOnNode(el: Node, vars: Record<string, string>) {
+  if (el.nodeType === 1) {
+    const style = (el as HTMLElement).style
     for (const key in vars) {
       style.setProperty(`--${key}`, vars[key])
     }
-  } else if (vnode.type === Fragment) {
-    ;(vnode.children as VNode[]).forEach(c => setVarsOnVNode(c, vars))
   }
 }