Style Objects

At it's simplest, a style object is an object of CSS properites and values. For ease of use, CSS property names are camel-cased.

const button = css({
  backgroundColor: 'gainsboro',
  borderRadius: '9999px',
  fontSize: '13px',
  border: '0',
})

.button {
    background-color: gainsboro;
    border-radius: 9999px;
    font-size: 13px;
    border: 0;
}

Numeric values

Hypergood CSS converts numeric values to px, if the CSS property doesn't accept unitless values.

const button = css({
  backgroundColor: 'gainsboro',
  borderRadius: 9999,
  fontSize: 13,
  border: 0,
})

.button {
    background-color: gainsboro;
    border-radius: 9999px;
    font-size: 13px;
    border: 0;
}

Pseudo-class

const button = css({
  ':hover': {
    backgroundColor: 'lightgray',
  },
})

.button:hover {
    background-color: lightgrey;
}

Pseudo-element

const button = css({
  '::before': {
    content: `''`,
    display: 'block',
    backgroundImage: 'linear-gradient(to right, #1fa2ff, #12d8fa, #a6ffcb)',
    position: 'absolute',
    top: '-3px',
    left: '-3px',
    width: 'calc(100% + 6px)',
    height: 'calc(100% + 6px)',
    borderRadius: 'inherit',
    zIndex: -1,
  },
})

.button::before {
    content: '';
    display: block;
    background-image: linear-gradient(to right, #1fa2ff, #12d8fa, #a6ffcb);
    position: absolute;
    top: -3px;
    left: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    border-radius: inherit;
    z-index: -1;
}

Class selector

const button = css({
  '.custom-class': {
    boxShadow: '0 0 0 3px blueviolet',
  },
})

.button.custom-class {
    box-shadow: 0 0 0 3px blueviolet;
}

In addition to the class selector, you can style all other available basic selectors such as ID selectors, attribute selectors, universal selectors, and type selectors.

Attribute selector

const button = css({
  '[data-pressed]': {
    boxShadow: '0 0 0 3px royalblue',
  },
})

.button[data-pressed] {
    box-shadow: 0 0 0 3px royalblue;
}

Descendant selector

const button = css({
  'svg': {
    display: 'inline-block',
    verticalAlign: 'bottom',
    height: '13px',
    marginLeft: '5px',
  },
})

.button svg {
    display: inline-block;
    vertical-align: bottom;
    height: 13px;
    margin-left: 5px;
}

Combinator selectors

const button = css({
  '& + button': {
    marginLeft: '10px',
  },
})

.button + button {
    margin-left: 10px;
}

You can create any combination of selectors using the & character.

At-rule statements

const button = css({
  '@media (prefers-reduced-motion)': {
    transition: 'none',
  },
})

@media (prefers-reduced-motion) {
    .button {
        transition: none;
    }
}

Supports rule

const button = css({
  '@supports (display: grid)': {
    display: 'grid',
  },
})

@supports (display: grid) {
    .button {
        display: grid;
    }
}