This module provides functions for querying and manipulating CSS variables on HTML and SVG elements.

The API for working with CSS variables is slightly different from the rest of the modules. Instead of specifying a target as the first argument, you specify it as the last argument.

Note

In my experience, CSS variables are normally stored on the :root element, so omitting the target argument uses the :root element.

See the getCssVar function as an example.

Classes

InvalidCssVarError

Error thrown if an operation on a CSS variable (i.e. custom property) fails.

Type Aliases

ClassArray

Array of class names that can be used as clsx inputs.

ClassDict

Object with key of class name and value of truthy/falsy condition. The object is passed into the clsx function.

ClassValue

Possible values for input to the clsx function.

CssSelector

CSS selector string. Note that no validation is performed on the selector, so this could represent any string value (even if it is not a valid CSS selector).

CssVarName

Valid name for a CSS variable.

CssVars

Represents an object with key of CssVarName and value of CssVarValue.

CssVarsSearch

Search criteria for checking if CSS variables are present in an element. You can use an array of CSS variable names to check only if the CSS variables are present, or an object to search for specific values. Use null for the value if you only care about the presence of a CSS variable.

CssVarValue

Valid value for a CSS variable.

Functions

clsx

A tiny (239B) utility for constructing className strings conditionally. Also serves as a faster & smaller drop-in replacement for the classnames package.

getCssVar

Attempts to get the value associated with CSS variable name from the target.

getCssVars

Builds an object with the keys equal to the CSS variable names and the value equal to the corresponding variable value in the target.

hasAllCssVars

Checks if all of the CSS variables match the search criteria in the target.

hasCssVar

Checks if the target has the CSS variable with name. If a value is specified, checks that the values match.

hasSomeCssVars

Checks if some of the CSS variables match the search criteria in the target.

removeCssVar

Removes the CSS variable name from the optionally specified target.

removeCssVars

Removes the CSS variables with names from the optionally specified target.

setCssVar

Sets the CSS variable name to value in the optionally specified target.

setCssVars

Sets the CSS vars on the optionally specified target.