From: underfin <likui6666666@gmail.com>
Date: Tue, 13 Oct 2020 19:37:45 +0000 (+0800)
Subject: fix(sfc/style-vars): should attach css vars while `subtree` changed (#2178)
X-Git-Tag: v3.0.1~22
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=408a8cad48f5fe0854c83a979ff98f03738fbfba;p=thirdparty%2Fvuejs%2Fcore.git

fix(sfc/style-vars): should attach css vars while `subtree` changed (#2178)

* fix(cssVars): should attach css vars while `subtree` changed

fix #2177

* fix: fix test
---

diff --git a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
index 293dc70499..0766bda806 100644
--- a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
+++ b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
@@ -1,4 +1,5 @@
 import {
+  ref,
   render,
   useCssVars,
   h,
@@ -125,4 +126,29 @@ describe('useCssVars', () => {
       id
     )
   })
+
+  test('with subTree changed', async () => {
+    const state = reactive({ color: 'red' })
+    const value = ref(true)
+    const root = document.createElement('div')
+
+    const App = {
+      setup() {
+        useCssVars(() => state)
+        return () => (value.value ? [h('div')] : [h('div'), h('div')])
+      }
+    }
+
+    render(h(App), root)
+    // 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`)
+    }
+
+    value.value = false
+    await nextTick()
+    for (const c of [].slice.call(root.children as any)) {
+      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('red')
+    }
+  })
 })
diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts
index 86d571c2c3..ff90ec8ce6 100644
--- a/packages/runtime-dom/src/helpers/useCssVars.ts
+++ b/packages/runtime-dom/src/helpers/useCssVars.ts
@@ -2,11 +2,12 @@ import {
   ComponentPublicInstance,
   getCurrentInstance,
   onMounted,
-  watchEffect,
   warn,
   VNode,
   Fragment,
-  unref
+  unref,
+  onUpdated,
+  watchEffect
 } from '@vue/runtime-core'
 import { ShapeFlags } from '@vue/shared'
 
@@ -27,11 +28,10 @@ export function useCssVars(
       ? `${instance.type.__scopeId.replace(/^data-v-/, '')}-`
       : ``
 
-  onMounted(() => {
-    watchEffect(() => {
-      setVarsOnVNode(instance.subTree, getter(instance.proxy!), prefix)
-    })
-  })
+  const setVars = () =>
+    setVarsOnVNode(instance.subTree, getter(instance.proxy!), prefix)
+  onMounted(() => watchEffect(setVars))
+  onUpdated(setVars)
 }
 
 function setVarsOnVNode(