wip: simplify useCssVars

packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap

@@ -5,8 +5,8 @@ exports[`CSS vars injection codegen <script> w/ default export 1`] = `
 import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
 _useCssVars(_ctx => ({
-  color: (_ctx.color)
+  \\"xxxxxxxx-color\\": (_ctx.color)
-}), \\"xxxxxxxx\\")}
+}))}
 const __setup__ = __default__.setup
 __default__.setup = __setup__
   ? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }
@@ -22,8 +22,8 @@ exports[`CSS vars injection codegen <script> w/ default export in strings/commen
 import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
 _useCssVars(_ctx => ({
-  color: (_ctx.color)
+  \\"xxxxxxxx-color\\": (_ctx.color)
-}), \\"xxxxxxxx\\")}
+}))}
 const __setup__ = __default__.setup
 __default__.setup = __setup__
   ? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }
@@ -37,8 +37,8 @@ const __default__ = {}
 import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
 _useCssVars(_ctx => ({
-  color: (_ctx.color)
+  \\"xxxxxxxx-color\\": (_ctx.color)
-}), \\"xxxxxxxx\\")}
+}))}
 const __setup__ = __default__.setup
 __default__.setup = __setup__
   ? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }
@@ -54,8 +54,8 @@ export default {
   setup(__props) {
 
 _useCssVars(_ctx => ({
-  color: (color)
+  \\"xxxxxxxx-color\\": (color)
-}), \\"xxxxxxxx\\")
+}))
 const color = 'red'
 return { color }
 }
@@ -69,9 +69,9 @@ const __default__ = {}
 import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
 _useCssVars(_ctx => ({
-  color: (_ctx.color),
+  \\"xxxxxxxx-color\\": (_ctx.color),
-  font_size: (_ctx.font.size)
+  \\"xxxxxxxx-font_size\\": (_ctx.font.size)
-}), \\"xxxxxxxx\\")}
+}))}
 const __setup__ = __default__.setup
 __default__.setup = __setup__
   ? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }
@@ -91,10 +91,10 @@ export default {
   setup(__props) {
 
 _useCssVars(_ctx => ({
-  color: (color),
+  \\"xxxxxxxx-color\\": (color),
-  size: (_unref(size)),
+  \\"xxxxxxxx-size\\": (_unref(size)),
-  foo: (__props.foo)
+  \\"xxxxxxxx-foo\\": (__props.foo)
-}), \\"xxxxxxxx\\")
+}))
 
         const color = 'red'
         const size = ref('10px')

packages/compiler-sfc/__tests__/cssVars.spec.ts

@@ -1,5 +1,5 @@
 import { compileStyle } from '../src'
-import { compileSFCScript, assertCode } from './utils'
+import { mockId, compileSFCScript, assertCode } from './utils'
 
 describe('CSS vars injection', () => {
   test('generating correct code for nested paths', () => {
@@ -11,8 +11,8 @@ describe('CSS vars injection', () => {
         }</style>`
     )
     expect(content).toMatch(`_useCssVars(_ctx => ({
-  color: (_ctx.color),
+  "${mockId}-color": (_ctx.color),
-  font_size: (_ctx.font.size)
+  "${mockId}-font_size": (_ctx.font.size)
 })`)
     assertCode(content)
   })
@@ -42,9 +42,9 @@ describe('CSS vars injection', () => {
     // 2. local potential ref bindings
     // 3. props bindings (analyzed)
     expect(content).toMatch(`_useCssVars(_ctx => ({
-  color: (color),
+  "${mockId}-color": (color),
-  size: (_unref(size)),
+  "${mockId}-size": (_unref(size)),
-  foo: (__props.foo)
+  "${mockId}-foo": (__props.foo)
 })`)
     expect(content).toMatch(
       `import { useCssVars as _useCssVars, unref as _unref } from 'vue'`

packages/compiler-sfc/__tests__/utils.ts

@@ -2,6 +2,8 @@ import { parse, SFCScriptCompileOptions, compileScript } from '../src'
 import { parse as babelParse } from '@babel/parser'
 import { babelParserDefaultPlugins } from '@vue/shared'
 
+export const mockId = 'xxxxxxxx'
+
 export function compileSFCScript(
   src: string,
   options?: Partial<SFCScriptCompileOptions>
@@ -9,7 +11,7 @@ export function compileSFCScript(
   const { descriptor } = parse(src)
   return compileScript(descriptor, {
     ...options,
-    id: 'xxxxxxxx'
+    id: mockId
   })
 }
 

packages/compiler-sfc/src/cssVars.ts

@@ -52,7 +52,7 @@ export function genCssVarsCode(
   id: string
 ) {
   const varsExp = `{\n  ${vars
-    .map(v => `${convertCssVarCasing(v)}: (${v})`)
+    .map(v => `"${id}-${convertCssVarCasing(v)}": (${v})`)
     .join(',\n  ')}\n}`
   const exp = createSimpleExpression(varsExp, false)
   const context = createTransformContext(createRoot([]), {
@@ -72,7 +72,7 @@ export function genCssVarsCode(
           })
           .join('')
 
-  return `_${CSS_VARS_HELPER}(_ctx => (${transformedString}), "${id}")`
+  return `_${CSS_VARS_HELPER}(_ctx => (${transformedString}))`
 }
 
 // <script setup> already gets the calls injected as part of the transform

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

@@ -10,7 +10,6 @@ import {
 } from '@vue/runtime-dom'
 
 describe('useCssVars', () => {
-  const id = 'xxxxxx'
   async function assertCssVars(getApp: (state: any) => ComponentOptions) {
     const state = reactive({ color: 'red' })
     const App = getApp(state)
@@ -19,17 +18,13 @@ describe('useCssVars', () => {
     render(h(App), root)
     await nextTick()
     for (const c of [].slice.call(root.children as any)) {
-      expect((c as HTMLElement).style.getPropertyValue(`--${id}-color`)).toBe(
+      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe(`red`)
-        `red`
-      )
     }
 
     state.color = 'green'
     await nextTick()
     for (const c of [].slice.call(root.children as any)) {
-      expect((c as HTMLElement).style.getPropertyValue(`--${id}-color`)).toBe(
+      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('green')
-        'green'
-      )
     }
   }
 
@@ -37,12 +32,9 @@ describe('useCssVars', () => {
     await assertCssVars(state => ({
       setup() {
         // test receiving render context
-        useCssVars(
+        useCssVars((ctx: any) => ({
-          (ctx: any) => ({
           color: ctx.color
-          }),
+        }))
-          id
-        )
         return state
       },
       render() {
@@ -54,7 +46,7 @@ describe('useCssVars', () => {
   test('on fragment root', async () => {
     await assertCssVars(state => ({
       setup() {
-        useCssVars(() => state, id)
+        useCssVars(() => state)
         return () => [h('div'), h('div')]
       }
     }))
@@ -65,7 +57,7 @@ describe('useCssVars', () => {
 
     await assertCssVars(state => ({
       setup() {
-        useCssVars(() => state, id)
+        useCssVars(() => state)
         return () => h(Child)
       }
     }))
@@ -91,7 +83,7 @@ describe('useCssVars', () => {
 
     const App = {
       setup() {
-        useCssVars(() => state, id)
+        useCssVars(() => state)
         return () =>
           h(Suspense, null, {
             default: h(AsyncComp),
@@ -104,9 +96,7 @@ describe('useCssVars', () => {
     await nextTick()
     // css vars use with fallback tree
     for (const c of [].slice.call(root.children as any)) {
-      expect((c as HTMLElement).style.getPropertyValue(`--${id}-color`)).toBe(
+      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe(`red`)
-        `red`
-      )
     }
     // AsyncComp resolve
     resolveAsync()
@@ -115,30 +105,16 @@ describe('useCssVars', () => {
     await nextTick()
     // css vars use with default tree
     for (const c of [].slice.call(root.children as any)) {
-      expect((c as HTMLElement).style.getPropertyValue(`--${id}-color`)).toBe(
+      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe(`red`)
-        `red`
-      )
     }
 
     state.color = 'green'
     await nextTick()
     for (const c of [].slice.call(root.children as any)) {
-      expect((c as HTMLElement).style.getPropertyValue(`--${id}-color`)).toBe(
+      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('green')
-        'green'
-      )
     }
   })
 
-  test('with <style scoped>', async () => {
-    await assertCssVars(state => ({
-      __scopeId: id,
-      setup() {
-        useCssVars(() => state, id)
-        return () => h('div')
-      }
-    }))
-  })
-
   test('with subTree changed', async () => {
     const state = reactive({ color: 'red' })
     const value = ref(true)
@@ -146,7 +122,7 @@ describe('useCssVars', () => {
 
     const App = {
       setup() {
-        useCssVars(() => state, id)
+        useCssVars(() => state)
         return () => (value.value ? [h('div')] : [h('div'), h('div')])
       }
     }
@@ -155,17 +131,13 @@ describe('useCssVars', () => {
     await nextTick()
     // css vars use with fallback tree
     for (const c of [].slice.call(root.children as any)) {
-      expect((c as HTMLElement).style.getPropertyValue(`--${id}-color`)).toBe(
+      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe(`red`)
-        `red`
-      )
     }
 
     value.value = false
     await nextTick()
     for (const c of [].slice.call(root.children as any)) {
-      expect((c as HTMLElement).style.getPropertyValue(`--${id}-color`)).toBe(
+      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('red')
-        'red'
-      )
     }
   })
 })

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

@@ -15,8 +15,7 @@ import { ShapeFlags } from '@vue/shared'
  * @private
  */
 export function useCssVars(
-  getter: (ctx: ComponentPublicInstance) => Record<string, string>,
+  getter: (ctx: ComponentPublicInstance) => Record<string, string>
-  scopeId: string
 ) {
   const instance = getCurrentInstance()
   /* istanbul ignore next */
@@ -27,22 +26,18 @@ export function useCssVars(
   }
 
   const setVars = () =>
-    setVarsOnVNode(instance.subTree, getter(instance.proxy!), scopeId)
+    setVarsOnVNode(instance.subTree, getter(instance.proxy!))
   onMounted(() => watchEffect(setVars, { flush: 'post' }))
   onUpdated(setVars)
 }
 
-function setVarsOnVNode(
+function setVarsOnVNode(vnode: VNode, vars: Record<string, string>) {
-  vnode: VNode,
-  vars: Record<string, 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, scopeId)
+        setVarsOnVNode(suspense.activeBranch!, vars)
       })
     }
   }
@@ -55,9 +50,9 @@ function setVarsOnVNode(
   if (vnode.shapeFlag & ShapeFlags.ELEMENT && vnode.el) {
     const style = vnode.el.style
     for (const key in vars) {
-      style.setProperty(`--${scopeId}-${key}`, vars[key])
+      style.setProperty(`--${key}`, vars[key])
     }
   } else if (vnode.type === Fragment) {
-    ;(vnode.children as VNode[]).forEach(c => setVarsOnVNode(c, vars, scopeId))
+    ;(vnode.children as VNode[]).forEach(c => setVarsOnVNode(c, vars))
   }
 }