68 lines
1.6 KiB
TypeScript
68 lines
1.6 KiB
TypeScript
import {
|
|
ComponentPublicInstance,
|
|
getCurrentInstance,
|
|
onMounted,
|
|
watchEffect,
|
|
warn,
|
|
VNode,
|
|
Fragment,
|
|
unref
|
|
} from '@vue/runtime-core'
|
|
import { ShapeFlags } from '@vue/shared'
|
|
|
|
export function useCssVars(
|
|
getter: (ctx: ComponentPublicInstance) => Record<string, string>,
|
|
scoped = false
|
|
) {
|
|
const instance = getCurrentInstance()
|
|
/* istanbul ignore next */
|
|
if (!instance) {
|
|
__DEV__ &&
|
|
warn(`useCssVars is called without current active component instance.`)
|
|
return
|
|
}
|
|
|
|
const prefix =
|
|
scoped && instance.type.__scopeId
|
|
? `${instance.type.__scopeId.replace(/^data-v-/, '')}-`
|
|
: ``
|
|
|
|
onMounted(() => {
|
|
watchEffect(() => {
|
|
setVarsOnVNode(instance.subTree, getter(instance.proxy!), prefix)
|
|
})
|
|
})
|
|
}
|
|
|
|
function setVarsOnVNode(
|
|
vnode: VNode,
|
|
vars: Record<string, string>,
|
|
prefix: string
|
|
) {
|
|
if (__FEATURE_SUSPENSE__ && vnode.shapeFlag & ShapeFlags.SUSPENSE) {
|
|
const { isResolved, isHydrating, fallbackTree, subTree } = vnode.suspense!
|
|
if (isResolved || isHydrating) {
|
|
vnode = subTree
|
|
} else {
|
|
vnode.suspense!.effects.push(() => {
|
|
setVarsOnVNode(subTree, vars, prefix)
|
|
})
|
|
vnode = fallbackTree
|
|
}
|
|
}
|
|
|
|
// 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(`--${prefix}${key}`, unref(vars[key]))
|
|
}
|
|
} else if (vnode.type === Fragment) {
|
|
;(vnode.children as VNode[]).forEach(c => setVarsOnVNode(c, vars, prefix))
|
|
}
|
|
}
|