From f50030c8486b6a2d624d4efd7207bc8800105e85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?=
 <32354856+baiwusanyu-c@users.noreply.github.com>
Date: Mon, 15 Apr 2024 20:23:28 +0800
Subject: [PATCH] fix(runtime-dom): fix css v-bind for suspensed components
 (#8523)

close #8520
---
 .../__tests__/helpers/useCssVars.spec.ts      | 57 +++++++++++++++++++
 .../runtime-dom/src/helpers/useCssVars.ts     |  3 +-
 2 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
index e26b9dfb45e..9f860a5e3c3 100644
--- a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
+++ b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
@@ -118,6 +118,63 @@ describe('useCssVars', () => {
     }
   })
 
+  test('with v-if & async component & suspense', async () => {
+    const state = reactive({ color: 'red' })
+    const root = document.createElement('div')
+    const show = ref(false)
+    let resolveAsync: any
+    let asyncPromise: any
+
+    const AsyncComp = {
+      setup() {
+        useCssVars(() => state)
+        asyncPromise = new Promise(r => {
+          resolveAsync = () => {
+            r(() => h('p', 'default'))
+          }
+        })
+        return asyncPromise
+      },
+    }
+
+    const App = {
+      setup() {
+        return () =>
+          h(Suspense, null, {
+            default: h('div', {}, show.value ? h(AsyncComp) : h('p')),
+          })
+      },
+    }
+
+    render(h(App), root)
+    await nextTick()
+    // AsyncComp resolve
+    show.value = true
+    await nextTick()
+    resolveAsync()
+    await asyncPromise.then(() => {})
+    // Suspense effects flush
+    await nextTick()
+    // css vars use with default tree
+    for (const c of [].slice.call(root.children as any)) {
+      expect(
+        ((c as any).children[0] as HTMLElement).style.getPropertyValue(
+          `--color`,
+        ),
+      ).toBe(`red`)
+    }
+
+    state.color = 'green'
+    await nextTick()
+    for (const c of [].slice.call(root.children as any)) {
+      expect(
+        ((c as any).children[0] as HTMLElement).style.getPropertyValue(
+          `--color`,
+        ),
+      ).toBe('green')
+    }
+  })
+
   test('with subTree changed', async () => {
     const state = reactive({ color: 'red' })
     const value = ref(true)
diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts
index 1666e3cb3dc..286a4176076 100644
--- a/packages/runtime-dom/src/helpers/useCssVars.ts
+++ b/packages/runtime-dom/src/helpers/useCssVars.ts
@@ -42,9 +42,8 @@ export function useCssVars(getter: (ctx: any) => Record<string, string>) {
     updateTeleports(vars)
   }
 
-  watchPostEffect(setVars)
-
   onMounted(() => {
+    watchPostEffect(setVars)
     const ob = new MutationObserver(setVars)
     ob.observe(instance.subTree.el!.parentNode, { childList: true })
     onUnmounted(() => ob.disconnect())