Vue CSS Variable Normalizer (src/cssVars.ts)

Normalizes CSS variable values generated by v-bind bindings inside Vue component style blocks. Reuse when handling dynamic styling and CSS variable injection in Vue applications.

// Source: https://github.com/vuejs/core | License: MIT | Copyright 2018-present, Yuxi (Evan) You and Vue contributors
// Provided via justclaw.it.com; keep this notice with the code.
/**
 * Normalize CSS var value created by `v-bind` in `<style>` block
 * See https://github.com/vuejs/core/pull/12461#issuecomment-2495804664
 */
export function normalizeCssVarValue(value: unknown): string {
  if (value == null) {
    return 'initial'
  }

  if (typeof value === 'string') {
    return value === '' ? ' ' : value
  }

  if (typeof value !== 'number' || !Number.isFinite(value)) {
    if (__DEV__) {
      console.warn(
        '[Vue warn] Invalid value used for CSS binding. Expected a string or a finite number but received:',
        value,
      )
    }
  }

  return String(value)
}