Add experimental labels for variants

[RobinMalfait]

This PR adds a new API where we can use a label in the new matchVariant API. This will allowed us to implement the "named group" feature a lot of people wanted.

This PR also implements the group and peer utilities using the new matchVariant API, which also allows us to have arbitrary variants for group and peer.

Here is an example:

<div>
  <div class="group">
    <!-- Default group usage -->
    <div class="group-hover:underline"></div>

    <!-- Arbitrary variants with pseudo class for group -->
    <!-- With & -->
    <div class="group-[&:focus]:underline"></div>
    <!-- Without & -->
    <div class="group-[:hover]:underline"></div>

    <!-- Arbitrary variants with attributes selectors for group -->
    <!-- With & -->
    <div class="group-[&[data-open]]:underline"></div>
    <!-- Without & -->
    <div class="group-[[data-open]]:underline"></div>

    <!-- Arbitrary variants with other selectors -->
    <!-- With & -->
    <div class="group-[.in-foo_&]:underline"></div>
    <!-- Without & -->
    <div class="group-[.in-foo]:underline"></div>
  </div>

  <!-- The same as above, but with labels -->
  <div class="group<foo>">
    <div class="group<foo>-hover:underline"></div>

    <div class="group<foo>-[&:focus]:underline"></div>
    <div class="group<foo>-[:hover]:underline"></div>

    <div class="group<foo>-[&[data-open]]:underline"></div>
    <div class="group<foo>-[[data-open]]:underline"></div>

    <div class="group<foo>-[.in-foo_&]:underline"></div>
    <div class="group<foo>-[.in-foo]:underline"></div>
  </div>
</div>

Which generates the following CSS:

.group:hover .group-hover\:underline {
  text-decoration-line: underline;
}
.group\<foo\>:hover .group\<foo\>-hover\:underline {
  text-decoration-line: underline;
}
.group:focus .group-\[\&\:focus\]\:underline {
  text-decoration-line: underline;
}
.group:hover .group-\[\:hover\]\:underline {
  text-decoration-line: underline;
}
.group[data-open] .group-\[\&\[data-open\]\]\:underline {
  text-decoration-line: underline;
}
.group[data-open] .group-\[\[data-open\]\]\:underline {
  text-decoration-line: underline;
}
.in-foo .group .group-\[\.in-foo_\&\]\:underline {
  text-decoration-line: underline;
}
.group.in-foo .group-\[\.in-foo\]\:underline {
  text-decoration-line: underline;
}
.group\<foo\>:focus .group\<foo\>-\[\&\:focus\]\:underline {
  text-decoration-line: underline;
}
.group\<foo\>:hover .group\<foo\>-\[\:hover\]\:underline {
  text-decoration-line: underline;
}
.group\<foo\>[data-open] .group\<foo\>-\[\&\[data-open\]\]\:underline {
  text-decoration-line: underline;
}
.group\<foo\>[data-open] .group\<foo\>-\[\[data-open\]\]\:underline {
  text-decoration-line: underline;
}
.in-foo .group\<foo\> .group\<foo\>-\[\.in-foo_\&\]\:underline {
  text-decoration-line: underline;
}
.group\<foo\>.in-foo .group\<foo\>-\[\.in-foo\]\:underline {
  text-decoration-line: underline;
}

This is currently an experimental / preview feature and is currently not covered by semver, and may be improved in breaking ways at any time.