From 63bb92b3b7aad960c93b98297761ceddc95dd1e3 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Thu, 8 Aug 2024 17:48:10 +0800 Subject: [PATCH 1/8] fix(runtime-dom): apply css vars before mount and before update --- packages/runtime-dom/src/helpers/useCssVars.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts index d2dcdb33f52..15ab181a6ad 100644 --- a/packages/runtime-dom/src/helpers/useCssVars.ts +++ b/packages/runtime-dom/src/helpers/useCssVars.ts @@ -4,6 +4,7 @@ import { type VNode, getCurrentInstance, onBeforeMount, + onBeforeUpdate, onMounted, onUnmounted, warn, @@ -47,6 +48,10 @@ export function useCssVars(getter: (ctx: any) => Record) { watchPostEffect(setVars) }) + onBeforeUpdate(() => { + watchPostEffect(setVars) + }) + onMounted(() => { const ob = new MutationObserver(setVars) ob.observe(instance.subTree.el!.parentNode, { childList: true }) From 3c7cdec5a62c42b438bbff87f8b59158df3c5d47 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Fri, 9 Aug 2024 10:29:08 +0800 Subject: [PATCH 2/8] chore: update --- packages/runtime-dom/src/helpers/useCssVars.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts index 15ab181a6ad..79f7e37eff1 100644 --- a/packages/runtime-dom/src/helpers/useCssVars.ts +++ b/packages/runtime-dom/src/helpers/useCssVars.ts @@ -7,6 +7,7 @@ import { onBeforeUpdate, onMounted, onUnmounted, + queuePostFlushCb, warn, watchPostEffect, } from '@vue/runtime-core' @@ -49,7 +50,7 @@ export function useCssVars(getter: (ctx: any) => Record) { }) onBeforeUpdate(() => { - watchPostEffect(setVars) + queuePostFlushCb(setVars) }) onMounted(() => { From c90fa1d6dbe6fb1bbc66af1f2130fb45a944fb41 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Fri, 9 Aug 2024 10:32:13 +0800 Subject: [PATCH 3/8] chore: update --- packages/runtime-dom/src/helpers/useCssVars.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts index 79f7e37eff1..3f35062143d 100644 --- a/packages/runtime-dom/src/helpers/useCssVars.ts +++ b/packages/runtime-dom/src/helpers/useCssVars.ts @@ -9,7 +9,6 @@ import { onUnmounted, queuePostFlushCb, warn, - watchPostEffect, } from '@vue/runtime-core' import { ShapeFlags } from '@vue/shared' @@ -46,7 +45,7 @@ export function useCssVars(getter: (ctx: any) => Record) { } onBeforeMount(() => { - watchPostEffect(setVars) + queuePostFlushCb(setVars) }) onBeforeUpdate(() => { From da120f3a19b063c7c0eb661196670dc2301ba6d1 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Fri, 9 Aug 2024 10:35:59 +0800 Subject: [PATCH 4/8] chore: revert --- packages/runtime-dom/src/helpers/useCssVars.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts index 3f35062143d..79f7e37eff1 100644 --- a/packages/runtime-dom/src/helpers/useCssVars.ts +++ b/packages/runtime-dom/src/helpers/useCssVars.ts @@ -9,6 +9,7 @@ import { onUnmounted, queuePostFlushCb, warn, + watchPostEffect, } from '@vue/runtime-core' import { ShapeFlags } from '@vue/shared' @@ -45,7 +46,7 @@ export function useCssVars(getter: (ctx: any) => Record) { } onBeforeMount(() => { - queuePostFlushCb(setVars) + watchPostEffect(setVars) }) onBeforeUpdate(() => { From b608db01ca6e5fdc3a1d3b5e0b4c091044737ea6 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Fri, 9 Aug 2024 14:36:55 +0800 Subject: [PATCH 5/8] chore: update test --- .../__tests__/helpers/useCssVars.spec.ts | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts index 9f860a5e3c3..298add44e68 100644 --- a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts +++ b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts @@ -6,6 +6,7 @@ import { createStaticVNode, h, nextTick, + onMounted, reactive, ref, render, @@ -381,4 +382,42 @@ describe('useCssVars', () => { expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('red') } }) + + 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`) + } + }) }) From 58b67d1249ddb9bac6ee94c2c79ded5f291b4a01 Mon Sep 17 00:00:00 2001 From: edison Date: Wed, 30 Oct 2024 17:31:55 +0800 Subject: [PATCH 6/8] Update useCssVars.spec.ts --- packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts index 4d80f89781b..083cdfc7e57 100644 --- a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts +++ b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts @@ -421,6 +421,7 @@ describe('useCssVars', () => { expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe(`red`) } }) + // #8826 test('with custom element', async () => { const state = reactive({ color: 'red' }) From 8239e9da0c11e16eef85eedb6ea61bcd22cf5274 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Wed, 30 Oct 2024 09:32:45 +0000 Subject: [PATCH 7/8] [autofix.ci] apply automated fixes --- packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts index 083cdfc7e57..b75aa7ecac7 100644 --- a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts +++ b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts @@ -421,7 +421,7 @@ describe('useCssVars', () => { expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe(`red`) } }) - + // #8826 test('with custom element', async () => { const state = reactive({ color: 'red' }) From 8e48b106726af9c458ad4e22bcd05846b4e93575 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Thu, 14 Nov 2024 07:56:05 +0000 Subject: [PATCH 8/8] [autofix.ci] apply automated fixes --- packages/runtime-dom/src/helpers/useCssVars.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts index 4dce8ae47dc..e2bc6de9278 100644 --- a/packages/runtime-dom/src/helpers/useCssVars.ts +++ b/packages/runtime-dom/src/helpers/useCssVars.ts @@ -48,7 +48,7 @@ export function useCssVars(getter: (ctx: any) => Record): void { } updateTeleports(vars) } - + // handle cases where child component root is affected // and triggers reflow in onMounted onBeforeUpdate(() => {