cssVars

Define and inject CSS variables from JS objects.

Use css to generate styles. Supports nesting, pseudo-selectors, and media queries.

import { cssVars } from '@hellajs/dom/css';

cssVars({
  primary: '#0070f3',
  borderRadius: '8px',
  theme: {
    accent: 'hotpink',
    spacing: 4
  }
});

This injects:

:root {
  --primary: #0070f3;
  --borderRadius: 8px;
  --theme-accent: hotpink;
  --theme-spacing: 4;
}

Return Value

Returns an object mapping each key to its var(--key) reference:

const vars = cssVars({ foo: 'red' });
console.log(vars.foo); // 'var(--foo)'

const styles = css({
  color: vars.foo
});

Reset

import { cssVarsReset } from '@hellajs/dom/css';
cssVarsReset();