feat(runtime-dom): useCssVars

diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index b5b6833ea73db3fa805de3db5b72fc04f04bc541..7ba5142f0107fc3331c24ca2fa5ce6bc9058da3c 100644 (file)
--- 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 838ac604d8088fbec727a1615fee36f0d3847ca5..b54dcaf76ad92b3cbef22e918ecef903ba475735 100644 (file)
--- 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 (file)
index 0000000..bd2a7c6
--- /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 89a87c3ed8d0860af83316cb740c0570cfb21c25..faa26ea2787420d7f532d4c42cfad87f839eca3a 100644 (file)
--- 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 {