From 926206a6e95ab14fd7f9810bf49a196b395c5349 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Wed, 7 Aug 2024 11:42:49 +0800 Subject: [PATCH 1/2] fix: cssvars correctly handles execution time --- packages/runtime-dom/src/helpers/useCssVars.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts index 286a4176076..2f6f0a6d8e0 100644 --- a/packages/runtime-dom/src/helpers/useCssVars.ts +++ b/packages/runtime-dom/src/helpers/useCssVars.ts @@ -3,6 +3,7 @@ import { Static, type VNode, getCurrentInstance, + onBeforeMount, onMounted, onUnmounted, warn, @@ -41,9 +42,10 @@ export function useCssVars(getter: (ctx: any) => Record) { setVarsOnVNode(instance.subTree, vars) updateTeleports(vars) } - - onMounted(() => { + onBeforeMount(() => { watchPostEffect(setVars) + }) + onMounted(() => { const ob = new MutationObserver(setVars) ob.observe(instance.subTree.el!.parentNode, { childList: true }) onUnmounted(() => ob.disconnect()) From 5d0ba635a934d75e23a3b4a57e42460576e38109 Mon Sep 17 00:00:00 2001 From: Evan You Date: Wed, 7 Aug 2024 11:49:26 +0800 Subject: [PATCH 2/2] Update useCssVars.ts --- packages/runtime-dom/src/helpers/useCssVars.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts index 2f6f0a6d8e0..d2dcdb33f52 100644 --- a/packages/runtime-dom/src/helpers/useCssVars.ts +++ b/packages/runtime-dom/src/helpers/useCssVars.ts @@ -42,9 +42,11 @@ export function useCssVars(getter: (ctx: any) => Record) { setVarsOnVNode(instance.subTree, vars) updateTeleports(vars) } + onBeforeMount(() => { watchPostEffect(setVars) }) + onMounted(() => { const ob = new MutationObserver(setVars) ob.observe(instance.subTree.el!.parentNode, { childList: true })