useCssVars.ts — vue Source File

Architecture documentation for useCssVars.ts, a typescript file in the vue codebase. 3 imports, 0 dependents.

File typescript CompilerSFC StyleProcessor 3 imports 1 functions

Entity Profile

CompilerSFC→ StyleProcessor→ useCssVars.ts — vue Source File

Dependency Diagram

graph LR
  67a194e4_a410_0dbd_e240_af7947944cfb["useCssVars.ts"]
  657ce01c_3889_5cf9_e516_4335861b36f0["../"]
  67a194e4_a410_0dbd_e240_af7947944cfb --> 657ce01c_3889_5cf9_e516_4335861b36f0
  08d717e5_b9dd_701c_e7a2_51d83681d28a["currentInstance.ts"]
  67a194e4_a410_0dbd_e240_af7947944cfb --> 08d717e5_b9dd_701c_e7a2_51d83681d28a
  8a5fb776_a8f4_ce8a_8549_67af07f2e1e9["util"]
  67a194e4_a410_0dbd_e240_af7947944cfb --> 8a5fb776_a8f4_ce8a_8549_67af07f2e1e9
  style 67a194e4_a410_0dbd_e240_af7947944cfb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

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