56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import {
|
|
getCurrentInstance,
|
|
onMounted,
|
|
warn,
|
|
VNode,
|
|
Fragment,
|
|
onUpdated,
|
|
watchEffect
|
|
} from '@vue/runtime-core'
|
|
import { ShapeFlags } from '@vue/shared'
|
|
|
|
/**
|
|
* Runtime helper for SFC's CSS variable injection feature.
|
|
* @private
|
|
*/
|
|
export function useCssVars(getter: (ctx: any) => Record<string, string>) {
|
|
const instance = getCurrentInstance()
|
|
/* istanbul ignore next */
|
|
if (!instance) {
|
|
__DEV__ &&
|
|
warn(`useCssVars is called without current active component instance.`)
|
|
return
|
|
}
|
|
|
|
const setVars = () =>
|
|
setVarsOnVNode(instance.subTree, getter(instance.proxy!))
|
|
onMounted(() => watchEffect(setVars, { flush: 'post' }))
|
|
onUpdated(setVars)
|
|
}
|
|
|
|
function setVarsOnVNode(vnode: VNode, vars: Record<string, string>) {
|
|
if (__FEATURE_SUSPENSE__ && vnode.shapeFlag & ShapeFlags.SUSPENSE) {
|
|
const suspense = vnode.suspense!
|
|
vnode = suspense.activeBranch!
|
|
if (suspense.pendingBranch && !suspense.isHydrating) {
|
|
suspense.effects.push(() => {
|
|
setVarsOnVNode(suspense.activeBranch!, vars)
|
|
})
|
|
}
|
|
}
|
|
|
|
// 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))
|
|
}
|
|
}
|