From: linzhe <40790268+linzhe141@users.noreply.github.com>
Date: Wed, 7 Aug 2024 03:51:44 +0000 (+0800)
Subject: fix(runtime-dom): apply css vars before mount (#11538)
X-Git-Tag: v3.4.37~17
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=fdc2a31dbd4196d6432be16767a1bfdab1240d49;p=thirdparty%2Fvuejs%2Fcore.git

fix(runtime-dom): apply css vars before mount (#11538)

fix #11533
---

diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts
index 286a417607..d2dcdb33f5 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,
@@ -42,8 +43,11 @@ export function useCssVars(getter: (ctx: any) => Record<string, string>) {
     updateTeleports(vars)
   }
 
-  onMounted(() => {
+  onBeforeMount(() => {
     watchPostEffect(setVars)
+  })
+
+  onMounted(() => {
     const ob = new MutationObserver(setVars)
     ob.observe(instance.subTree.el!.parentNode, { childList: true })
     onUnmounted(() => ob.disconnect())