Add support for custom variants via CSS

[RobinMalfait]

This PR adds support for custom variants, both via CSS and JS.

We can define simple variants:

Via CSS:

@variant foo (.foo &);

Or via JS:

addVariant('foo', '.foo &')

We can define simple parallel variants:

Via CSS:

@variant hocus (&:focus, &:hover);

Or via JS:

addVariant('hocus', ['&:focus', '&:hover'])

But we can also define more complex variants where you might want to use media queries and selectors and nesting and anything you want.

This also introduces a placeholder value named @slot that you can use to mark a specific spot where existing utilities and/or variants will be injected.

Via CSS:

@variant strict-hover {
  @media (hover: hover) {
    &:hover {
      @slot;
    }
  }
}

Or via JS:

addVariant('strict-hover', {
  '@media (hover: hover)': {
    '&:hover': '@slot',
  }
})