useCssVars.ts
851 Bytes
import { watchPostEffect } from '../'
import { inBrowser, warn } from 'core/util'
import { currentInstance } from '../currentInstance'
/**
* Runtime helper for SFC's CSS variable injection feature.
* @private
*/
export function useCssVars(
getter: (
vm: Record<string, any>,
setupProxy: Record<string, any>
) => Record<string, string>
) {
if (!inBrowser && !__TEST__) return
const instance = currentInstance
if (!instance) {
__DEV__ &&
warn(`useCssVars is called without current active component instance.`)
return
}
watchPostEffect(() => {
const el = instance.$el
const vars = getter(instance, instance._setupProxy!)
if (el && el.nodeType === 1) {
const style = (el as HTMLElement).style
for (const key in vars) {
style.setProperty(`--${key}`, vars[key])
}
}
})
}