Skip to content

⬅️ Back to Table of Contents

📄 useCssVar

📊 Analysis Summary

Metric Count
🔧 Functions 2
📦 Imports 10
🟢 Vue Composition API 3
📐 Interfaces 1

📚 Table of Contents

🛠️ File Location:

📂 packages/core/useCssVar/index.ts

📦 Imports

Name Source
MaybeRefOrGetter vue
ConfigurableWindow ../_configurable
MaybeElementRef ../unrefElement
computed vue
shallowRef vue
toValue vue
watch vue
defaultWindow ../_configurable
unrefElement ../unrefElement
useMutationObserver ../useMutationObserver

Vue Composition API

Name Type Reactive Variables Composables
computed computed none none
watch watch none none
watch watch none none

Functions

useCssVar(prop: MaybeRefOrGetter<string | null | undefi…, target: MaybeElementRef, options: UseCssVarOptions): any

Manipulate CSS variables.

Parameters:

  • prop any: No description
  • target any: No description
  • options any: No description

See: https://vueuse.org/useCssVar

Raw JSDoc 
/**
 * Manipulate CSS variables.
 *
 * @see https://vueuse.org/useCssVar
 * @param prop
 * @param target
 * @param options
 */

Calls:

  • shallowRef (from vue)
  • computed (from vue)
  • unrefElement (from ../unrefElement)
  • toValue (from vue)
  • window.getComputedStyle(el).getPropertyValue(key)?.trim
  • useMutationObserver (from ../useMutationObserver)
  • watch (from vue)
  • old[0].style.removeProperty
  • updateCssVar
  • el.style.removeProperty
  • el.style.setProperty
Code 
export function useCssVar(
  prop: MaybeRefOrGetter<string | null | undefined>,
  target?: MaybeElementRef,
  options: UseCssVarOptions = {},
) {
  const { window = defaultWindow, initialValue, observe = false } = options
  const variable = shallowRef(initialValue)
  const elRef = computed(() => unrefElement(target) || window?.document?.documentElement)

  function updateCssVar() {
    const key = toValue(prop)
    const el = toValue(elRef)
    if (el && window && key) {
      const value = window.getComputedStyle(el).getPropertyValue(key)?.trim()
      variable.value = value || variable.value || initialValue
    }
  }

  if (observe) {
    useMutationObserver(elRef, updateCssVar, {
      attributeFilter: ['style', 'class'],
      window,
    })
  }

  watch(
    [elRef, () => toValue(prop)],
    (_, old) => {
      if (old[0] && old[1])
        old[0].style.removeProperty(old[1])
      updateCssVar()
    },
    { immediate: true },
  )

  watch(
    [variable, elRef],
    ([val, el]) => {
      const raw_prop = toValue(prop)
      if (el?.style && raw_prop) {
        if (val == null)
          el.style.removeProperty(raw_prop)
        else
          el.style.setProperty(raw_prop, val)
      }
    },
    { immediate: true },
  )

  return variable
}

Internal helpers

Declared inside another function in this file.

updateCssVar(): void

Returns: void

Calls:

  • toValue (from vue)
  • window.getComputedStyle(el).getPropertyValue(key)?.trim
Code 
function updateCssVar() {
    const key = toValue(prop)
    const el = toValue(elRef)
    if (el && window && key) {
      const value = window.getComputedStyle(el).getPropertyValue(key)?.trim()
      variable.value = value || variable.value || initialValue
    }
  }

Interfaces

UseCssVarOptions

Interface Code 
export interface UseCssVarOptions extends ConfigurableWindow {
  initialValue?: string
  /**
   * Use MutationObserver to monitor variable changes
   * @default false
   */
  observe?: boolean
}

Properties

Name Type Optional Description
initialValue string ✓ not shown
observe boolean ✓ not shown

Generated by Syntax Scribe