css

Define and inject CSS rules from JS objects.

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

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

const className = css({
  color: 'red',
  ':hover': {
    color: 'blue'
  },
  $span: {
    color: 'green'
  },
  '@media (max-width: 600px)': {
    color: 'purple'
  }
}, {
  name: 'my-class', // optional custom class name
  global: true // injects styles globally, no class name generate
  scoped: ".my-scope" // injects styles scoped to a specific element
});

const className = css({
  color: 'red',
  ':hover': {
    color: 'blue'
  },
  $span: {
    color: 'green'
  },
  '@media (max-width: 600px)': {
    color: 'purple'
  }
}, {
  global: true // injects styles globally, no class name generate
});

This injects:

```css
.c1 {
  color: red;
}
.c1:hover {
  color: blue;
}
.c1 span {
  color: green;
}
@media (max-width: 600px) {
  .c1 {
    color: purple;
  }
}

Element Children

Use the $tag pattern to target HTML elements as descendants of your generated class:

const className = css({
  color: 'red',
  $span: {
    color: 'green'
  },
  $div: {
    background: 'yellow'
  }
});

This injects:

.c1 {
  color: red;
}
.c1 span {
  color: green;
}
.c1 div {
  background: yellow;
}

Use & in keys to reference the current class for more complex selectors:

const className = css({
  color: 'red',
  '&.foo, &.bar': {
    color: 'purple'
  },
});

This injects:

.c1 {
  color: red;
}
.c1.foo {
  color: purple;
}
.c1.bar {
  color: purple;
}

Return Value

Returns the generated class name (unless global option is set):

const className = css({
  color: 'red'
});
console.log(className); // e.g. 'c1'

Remove & Reset

const obj = css({
  color: 'red'
});
css.remove(obj);

cssReset();