Function hasAllCssVars

hasAllCssVars(search: CssVarsSearch, target?: null | Target): boolean

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

If no target is specified, uses documentElement (i.e. :root).

Parameters

search: CssVarsSearch
Array of CSS variable names or CSS variables filter to check for.
Optionaltarget: null | Target = document.documentElement
Optional Element, EventTarget, or CSS selector.

Returns boolean

true if the target matches all search criteria.

Throws

elements!InvalidElementError if the specified target wasn't found.

Example

HTML

<style>
  :root {
    --color-fg: green;
    --padding-small: "24px";
    --is-small: true;
  }
</style>

<button id="example" style="--color-bg: blue; --is-big: true;">Example</button>

Check Element

const element = findElement("#example")!;

hasAllCssVars(["--color-bg", "--is-big"] , element);
// true

hasAllCssVars({
  "--color-bg": "blue",
  "--is-big": true,
}, element);
// true

hasAllCssVars({
  "--color-bg": "blue",
  "--missing": true,
}, element);
// false

Check :root

hasAllCssVars(["--color-fg", "--padding-small"]);
// true

hasAllCssVars({
  "--color-fg": "green",
  "--is-small": "true",
});
// false ("true" cannot be a string, must be the boolean value `true`)

hasAllCssVars({
  "--color-fg": "green",
  "--is-small": false,
});
// false (`--is-small` is `true`)