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 286a4176076889d7ebacc8a97f0a7c64dff79514..d2dcdb33f5297fd19e128593bf542b247a9e708d 100644 (file)
--- 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())