Implement @variant

[RobinMalfait]

This PR replaces @variant with @custom-variant for registering custom variants via your CSS.

In addition, this PR introduces @variant that can be used in your CSS to use a variant while writing custom CSS.

E.g.:

.btn {
  background: white;

  @variant dark {
    background: black;
  }
}

Compiles to:

.btn {
  background: white;
}

@media (prefers-color-scheme: dark) {
  .btn {
    background: black;
  }
}

For backwards compatibility, the @variant rules that don't have a body and are
defined inline:

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

And @variant rules that are defined with a body and a @slot:

@variant hocus {
  &:hover, &:focus {
    @slot;
  }
}

Will automatically be upgraded to @custom-variant internally, so no breaking changes are introduced with this PR.

---

TODO:

• Decide whether we want to allow multiple variants and if so, what syntax should be used. If not, nesting @variant <variant> {} will be the way to go. Only a single @variant <variant> can be used, if you want to use multiple, nesting should be used:

.foo {
  @variant hover {
    @variant focus {
      color: red;
    }
  }
}

[RobinMalfait]

Just an optimization to flatten:

.foo {
  & {
    color: red;
  }
}

Into:

.foo {
  color: red;
}

Which is more relevant when introducing this new @variant you can use.

[thecrypticace]

Could someone theoretically register a hover:focus variant through configs and then try using that with @variant?

We might want explicitly to error on uses of : if that's possible

[RobinMalfait]

So you can technically add a custom variant with a :, but you will never be able to use it because we split it on : anyway.

Added some validation (relatively strict) which we can loosen up down the line if needed.

[philipp-spiess]

Awesome!