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

[linzhe141]

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	100 kB (+16 B)	38 kB (+6 B)	34.2 kB (+11 B)
vue.global.prod.js	159 kB (+16 B)	58 kB (+8 B)	51.5 kB (+6 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	47 kB	18.3 kB	16.7 kB
createApp	55.1 kB	21.3 kB	19.5 kB
createSSRApp	59.1 kB	23 kB	20.9 kB
defineCustomElement	59.9 kB	22.9 kB	20.8 kB
overall	68.8 kB	26.4 kB	23.9 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!!!!!!

[pkg-pr-new]

Open in Stackblitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@11561

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@11561

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@11561

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@11561

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@11561

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@11561

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@11561

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@11561

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@11561

vue

pnpm add https://pkg.pr.new/vue@11561

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@11561

commit: 8e48b10

[yyx990803]

This actually seems to be fixing a difference case from #11533
In #11533 the styles are applied by the child on mount, whereas this PR fixes the case where the styles are applied by the parent on update.

#11533 is fixed by 2d5c5e2, but this PR is also a legit fix for the different test case it demonstrated.