feat(runtime-dom): useCssVars

packages/runtime-dom/src/helpers/useCssModule.ts

@@ -0,0 +1,29 @@
+import { warn, getCurrentInstance } from '@vue/runtime-core'
+import { EMPTY_OBJ } from '@vue/shared'
+
+export function useCSSModule(name = '$style'): Record<string, string> {
+  if (!__GLOBAL__) {
+    const instance = getCurrentInstance()!
+    if (!instance) {
+      __DEV__ && warn(`useCSSModule must be called inside setup()`)
+      return EMPTY_OBJ
+    }
+    const modules = instance.type.__cssModules
+    if (!modules) {
+      __DEV__ && warn(`Current instance does not have CSS modules injected.`)
+      return EMPTY_OBJ
+    }
+    const mod = modules[name]
+    if (!mod) {
+      __DEV__ &&
+        warn(`Current instance does not have CSS module named "${name}".`)
+      return EMPTY_OBJ
+    }
+    return mod as Record<string, string>
+  } else {
+    if (__DEV__) {
+      warn(`useCSSModule() is not supported in the global build.`)
+    }
+    return EMPTY_OBJ
+  }
+}

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))
+  }
+}

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 {