[quickthrower2]

I didn't mean JSX. Here is an example:

  import {
    css,
    classes,
  } from "https://unpkg.com/stylewars@1.6.0/dist/bundle.esm.min.js";

  const buttonStyles = css`
    & {
      border-radius: 4px;
      background: #587894;
      color: white;
      border: none;
      padding: 0.5em 2em;
    }

    &:hover {
      background: #89a2b9;
    }
  `;

  document.getElementById('root').classList.add(buttonStyles);

VERSUS

  const buttonStyles = {
    borderRadius: '4px',
    background: '#587894',
    color: 'white',
    border: 'none',
    padding: '0.5em 2em'
  }

  Object.assign(document.getElementById('root').style,buttonStyles);

Admittedly I don't know how to cover hover but I'm sure it could be figured out, or just use JS events.