wip: simplify useCssVars

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(
-        `red`
-      )
+      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe(`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(
-        'green'
-      )
+      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('green')
     }
   }
 
@@ -37,12 +32,9 @@ describe('useCssVars', () => {
     await assertCssVars(state => ({
       setup() {
         // test receiving render context
-        useCssVars(
-          (ctx: any) => ({
-            color: ctx.color
-          }),
-          id
-        )
+        useCssVars((ctx: any) => ({
+          color: ctx.color
+        }))
         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(
-        `red`
-      )
+      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe(`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(
-        `red`
-      )
+      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe(`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(
-        'green'
-      )
+      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('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(
-        `red`
-      )
+      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe(`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(
-        'red'
-      )
+      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('red')
     }
   })
 })