From 9f706a9f5ee52c8256c52111da4271bf43b811ab Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 9 Jul 2020 16:25:29 -0400
Subject: [PATCH] feat(runtime-dom): useCssVars

---
 packages/runtime-core/src/index.ts            |  2 -
 .../src/helpers/useCssModule.ts               |  5 +--
 .../runtime-dom/src/helpers/useCssVars.ts     | 41 +++++++++++++++++++
 packages/runtime-dom/src/index.ts             |  4 ++
 4 files changed, 47 insertions(+), 5 deletions(-)
 rename packages/{runtime-core => runtime-dom}/src/helpers/useCssModule.ts (82%)
 create mode 100644 packages/runtime-dom/src/helpers/useCssVars.ts

diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index b5b6833ea..7ba5142f0 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -65,8 +65,6 @@ export {
 } from './components/BaseTransition'
 // For using custom directives
 export { withDirectives } from './directives'
-// SFC CSS Modules
-export { useCSSModule } from './helpers/useCssModule'
 // SSR context
 export { useSSRContext, ssrContextKey } from './helpers/useSsrContext'
 
diff --git a/packages/runtime-core/src/helpers/useCssModule.ts b/packages/runtime-dom/src/helpers/useCssModule.ts
similarity index 82%
rename from packages/runtime-core/src/helpers/useCssModule.ts
rename to packages/runtime-dom/src/helpers/useCssModule.ts
index 838ac604d..b54dcaf76 100644
--- a/packages/runtime-core/src/helpers/useCssModule.ts
+++ b/packages/runtime-dom/src/helpers/useCssModule.ts
@@ -1,8 +1,7 @@
-import { getCurrentInstance } from '../component'
+import { warn, getCurrentInstance } from '@vue/runtime-core'
 import { EMPTY_OBJ } from '@vue/shared'
-import { warn } from '../warning'
 
-export const useCSSModule = (name = '$style'): Record<string, string> => {
+export function useCSSModule(name = '$style'): Record<string, string> {
   if (!__GLOBAL__) {
     const instance = getCurrentInstance()!
     if (!instance) {
diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts
new file mode 100644
index 000000000..bd2a7c6c2
--- /dev/null
+++ b/packages/runtime-dom/src/helpers/useCssVars.ts
@@ -0,0 +1,41 @@
+import {
+  ComponentPublicInstance,
+  getCurrentInstance,
+  onMounted,
+  watchEffect,
+  warn,
+  VNode,
+  Fragment
+} from '@vue/runtime-core'
+import { ShapeFlags } from '@vue/shared/src'
+
+export function useCSSVars(
+  getter: (ctx: ComponentPublicInstance) => Record<string, string>
+) {
+  const instance = getCurrentInstance()
+  if (!instance) {
+    __DEV__ &&
+      warn(`useCssVars is called without current active component instance.`)
+    return
+  }
+  onMounted(() => {
+    watchEffect(() => {
+      setVarsOnVNode(instance.vnode, getter(instance.proxy!))
+    })
+  })
+}
+
+function setVarsOnVNode(vnode: VNode, vars: Record<string, string>) {
+  // drill down HOCs until it's a non-component vnode
+  while (vnode.component) {
+    vnode = vnode.component.subTree
+  }
+  if (vnode.shapeFlag & ShapeFlags.ELEMENT && vnode.el) {
+    const style = vnode.el.style
+    for (const key in vars) {
+      style.setProperty(`--${key}`, vars[key])
+    }
+  } else if (vnode.type === Fragment) {
+    ;(vnode.children as VNode[]).forEach(c => setVarsOnVNode(c, vars))
+  }
+}
diff --git a/packages/runtime-dom/src/index.ts b/packages/runtime-dom/src/index.ts
index 89a87c3ed..faa26ea27 100644
--- a/packages/runtime-dom/src/index.ts
+++ b/packages/runtime-dom/src/index.ts
@@ -113,6 +113,10 @@ function normalizeContainer(container: Element | string): Element | null {
   return container
 }
 
+// SFC CSS utilities
+export { useCSSModule } from './helpers/useCssModule'
+export { useCSSVars } from './helpers/useCssVars'
+
 // DOM-only components
 export { Transition, TransitionProps } from './components/Transition'
 export {