feat(compiler-sfc): new SFC css varaible injection implementation

ref: https://github.com/vuejs/rfcs/pull/231

packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts

@@ -10,28 +10,26 @@ import {
 } from '@vue/runtime-dom'
 
 describe('useCssVars', () => {
-  async function assertCssVars(
-    getApp: (state: any) => ComponentOptions,
-    scopeId?: string
-  ) {
+  const id = 'xxxxxx'
+  async function assertCssVars(getApp: (state: any) => ComponentOptions) {
     const state = reactive({ color: 'red' })
     const App = getApp(state)
     const root = document.createElement('div')
-    const prefix = scopeId ? `${scopeId.replace(/^data-v-/, '')}-` : ``
 
     render(h(App), root)
+    await nextTick()
     for (const c of [].slice.call(root.children as any)) {
-      expect(
-        (c as HTMLElement).style.getPropertyValue(`--${prefix}color`)
-      ).toBe(`red`)
+      expect((c as HTMLElement).style.getPropertyValue(`--${id}-color`)).toBe(
+        `red`
+      )
     }
 
     state.color = 'green'
     await nextTick()
     for (const c of [].slice.call(root.children as any)) {
-      expect(
-        (c as HTMLElement).style.getPropertyValue(`--${prefix}color`)
-      ).toBe('green')
+      expect((c as HTMLElement).style.getPropertyValue(`--${id}-color`)).toBe(
+        'green'
+      )
     }
   }
 
@@ -39,9 +37,12 @@ describe('useCssVars', () => {
     await assertCssVars(state => ({
       setup() {
         // test receiving render context
-        useCssVars((ctx: any) => ({
-          color: ctx.color
-        }))
+        useCssVars(
+          (ctx: any) => ({
+            color: ctx.color
+          }),
+          id
+        )
         return state
       },
       render() {
@@ -53,7 +54,7 @@ describe('useCssVars', () => {
   test('on fragment root', async () => {
     await assertCssVars(state => ({
       setup() {
-        useCssVars(() => state)
+        useCssVars(() => state, id)
         return () => [h('div'), h('div')]
       }
     }))
@@ -64,7 +65,7 @@ describe('useCssVars', () => {
 
     await assertCssVars(state => ({
       setup() {
-        useCssVars(() => state)
+        useCssVars(() => state, id)
         return () => h(Child)
       }
     }))
@@ -74,15 +75,23 @@ describe('useCssVars', () => {
     const state = reactive({ color: 'red' })
     const root = document.createElement('div')
 
+    let resolveAsync: any
+    let asyncPromise: any
+
     const AsyncComp = {
-      async setup() {
-        return () => h('p', 'default')
+      setup() {
+        asyncPromise = new Promise(r => {
+          resolveAsync = () => {
+            r(() => h('p', 'default'))
+          }
+        })
+        return asyncPromise
       }
     }
 
     const App = {
       setup() {
-        useCssVars(() => state)
+        useCssVars(() => state, id)
         return () =>
           h(Suspense, null, {
             default: h(AsyncComp),
@@ -92,39 +101,42 @@ describe('useCssVars', () => {
     }
 
     render(h(App), root)
+    await nextTick()
     // 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`)
+      expect((c as HTMLElement).style.getPropertyValue(`--${id}-color`)).toBe(
+        `red`
+      )
     }
     // AsyncComp resolve
-    await nextTick()
+    resolveAsync()
+    await asyncPromise.then(() => {})
     // 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`)
+      expect((c as HTMLElement).style.getPropertyValue(`--${id}-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')
+      expect((c as HTMLElement).style.getPropertyValue(`--${id}-color`)).toBe(
+        'green'
+      )
     }
   })
 
   test('with <style scoped>', async () => {
-    const id = 'data-v-12345'
-
-    await assertCssVars(
-      state => ({
-        __scopeId: id,
-        setup() {
-          useCssVars(() => state, true)
-          return () => h('div')
-        }
-      }),
-      id
-    )
+    await assertCssVars(state => ({
+      __scopeId: id,
+      setup() {
+        useCssVars(() => state, id)
+        return () => h('div')
+      }
+    }))
   })
 
   test('with subTree changed', async () => {
@@ -134,21 +146,26 @@ describe('useCssVars', () => {
 
     const App = {
       setup() {
-        useCssVars(() => state)
+        useCssVars(() => state, id)
         return () => (value.value ? [h('div')] : [h('div'), h('div')])
       }
     }
 
     render(h(App), root)
+    await nextTick()
     // 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`)
+      expect((c as HTMLElement).style.getPropertyValue(`--${id}-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')
+      expect((c as HTMLElement).style.getPropertyValue(`--${id}-color`)).toBe(
+        'red'
+      )
     }
   })
 })

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

@@ -5,15 +5,18 @@ import {
   warn,
   VNode,
   Fragment,
-  unref,
   onUpdated,
   watchEffect
 } from '@vue/runtime-core'
 import { ShapeFlags } from '@vue/shared'
 
+/**
+ * Runtime helper for SFC's CSS variable injection feature.
+ * @private
+ */
 export function useCssVars(
   getter: (ctx: ComponentPublicInstance) => Record<string, string>,
-  scoped = false
+  scopeId: string
 ) {
   const instance = getCurrentInstance()
   /* istanbul ignore next */
@@ -23,13 +26,8 @@ export function useCssVars(
     return
   }
 
-  const prefix =
-    scoped && instance.type.__scopeId
-      ? `${instance.type.__scopeId.replace(/^data-v-/, '')}-`
-      : ``
-
   const setVars = () =>
-    setVarsOnVNode(instance.subTree, getter(instance.proxy!), prefix)
+    setVarsOnVNode(instance.subTree, getter(instance.proxy!), scopeId)
   onMounted(() => watchEffect(setVars, { flush: 'post' }))
   onUpdated(setVars)
 }
@@ -37,14 +35,14 @@ export function useCssVars(
 function setVarsOnVNode(
   vnode: VNode,
   vars: Record<string, string>,
-  prefix: string
+  scopeId: string
 ) {
   if (__FEATURE_SUSPENSE__ && vnode.shapeFlag & ShapeFlags.SUSPENSE) {
     const suspense = vnode.suspense!
     vnode = suspense.activeBranch!
     if (suspense.pendingBranch && !suspense.isHydrating) {
       suspense.effects.push(() => {
-        setVarsOnVNode(suspense.activeBranch!, vars, prefix)
+        setVarsOnVNode(suspense.activeBranch!, vars, scopeId)
       })
     }
   }
@@ -57,9 +55,9 @@ function setVarsOnVNode(
   if (vnode.shapeFlag & ShapeFlags.ELEMENT && vnode.el) {
     const style = vnode.el.style
     for (const key in vars) {
-      style.setProperty(`--${prefix}${key}`, unref(vars[key]))
+      style.setProperty(`--${scopeId}-${key}`, vars[key])
     }
   } else if (vnode.type === Fragment) {
-    ;(vnode.children as VNode[]).forEach(c => setVarsOnVNode(c, vars, prefix))
+    ;(vnode.children as VNode[]).forEach(c => setVarsOnVNode(c, vars, scopeId))
   }
 }