fix(runtime-dom): before update should also set css vars

[linzhe141]

close #11533

before update should also set css vars

this pr playground case1

this pr playground case2

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	98.8 kB (+16 B)	37.4 kB (+7 B)	33.7 kB (-36 B)
vue.global.prod.js	156 kB (+16 B)	57.2 kB (+7 B)	50.8 kB (-55 B)

Usages

Name	Size	Gzip	Brotli
createApp	54.2 kB	21 kB	19.1 kB
createSSRApp	58.1 kB	22.6 kB	20.6 kB
defineCustomElement	58.8 kB	22.5 kB	20.5 kB
overall	67.8 kB	26 kB	23.7 kB

[yyx990803]

Should just call setVars and not create another watcher on each update.

[linzhe141]

When I just call setVars before update, the vnode is still a v-if comment, and it doesn't make sense to set custom properties for this comment.

But when I combine it with watchPostEffect, the vnode is correct.

[edison1105]

or use queuePostFlushCb instead?

[linzhe141]

thanks

[edison1105]

Maybe we should add corresponding test cases to prevent regression.
Could you please try to add one?

[linzhe141]

Maybe we should add corresponding test cases to prevent regression. Could you please try to add one?

Of course, I'll add the necessary test cases to prevent any regression.

[linzhe141]

Maybe we should add corresponding test cases to prevent regression. Could you please try to add one?

If I want to reproduce this issue through single test, it seems that I can only do it through e2e test, and simple unit test does not seem to be able to reproduce it.

[edison1105]

@linzhe141
only need to check if css vars is set in onMounted

// useCssVars.spec.ts
test('with delay mount child', async () => {
    const state = reactive({ color: 'red' })
    const value = ref(false)
    const root = document.createElement('div')

    const Child = {
      setup(){
        onMounted(()=>{
          const childEl = root.children[0]
          expect(getComputedStyle(childEl!).getPropertyValue(`--color`)).toBe(`red`)
        })
        return () => h('div',{id:'childId'})
      }
    }
    const App = {
      setup() {
        useCssVars(() => state)
        return () => value.value ? h(Child) :[h('span')]
      },
    }

    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`)
    }

    // mount child
    value.value = true
    await nextTick()
    for (const c of [].slice.call(root.children as any)) {
      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe(`red`)
    }
  })

[linzhe141]

@linzhe141 only need to check if css vars is set in onMounted

// useCssVars.spec.ts
test('with delay mount child', async () => {
    const state = reactive({ color: 'red' })
    const value = ref(false)
    const root = document.createElement('div')

    const Child = {
      setup(){
        onMounted(()=>{
          const childEl = root.children[0]
          expect(getComputedStyle(childEl!).getPropertyValue(`--color`)).toBe(`red`)
        })
        return () => h('div',{id:'childId'})
      }
    }
    const App = {
      setup() {
        useCssVars(() => state)
        return () => value.value ? h(Child) :[h('span')]
      },
    }

    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`)
    }

    // mount child
    value.value = true
    await nextTick()
    for (const c of [].slice.call(root.children as any)) {
      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe(`red`)
    }
  })

thanks!!!!!!