CSS Variable Helper (styled-system/css-var.ts)

chakra-ui · ui, UI / Frontend, css, variable, styled-system, utility, typescript

Generates escaped, dash‑cased CSS variable names and reference strings with optional fallback and prefix support.

// Source: https://github.com/mperkins0155/chakra-ui | License: MIT | Copyright 2019 Chakra Systems Inc
// Provided via justclaw.it.com; keep this notice with the code.
const escRegex = /[^a-zA-Z0-9_\u0081-\uffff-]/g
function esc(string: string) {
  return `${string}`.replace(escRegex, (s) => `\\${s}`)
}

const dashCaseRegex = /[A-Z]/g
function dashCase(string: string) {
  return string.replace(dashCaseRegex, (match) => `-${match.toLowerCase()}`)
}

export interface CssVar {
  var: string
  ref: string
}

export interface CssVarOptions {
  fallback?: string | undefined
  prefix?: string | undefined
}

export function cssVar(name: string, options: CssVarOptions = {}): CssVar {
  const { fallback = "", prefix = "" } = options

  const variable = dashCase(["-", prefix, esc(name)].filter(Boole

... (truncated -- full source via MCP)

See the full source, get the GitHub permalink, and search 40K more like it.

Get a free API key