Reduce specificity of * variant

[adamwathan]

This PR reduces the specificity of the * variant so that classes directly on the child elements take precedence over the styles applied by the parent.

Previously a utility like *:flex would generate this CSS:

.\*\:flex > * {
  display: flex;
}

This selector has a specificity of 0,1,0, which is the same as the specificity for a bare utility class like flex, block, or grid.

Because variants always appear later in the CSS file than bare utilities, this means that given this HTML, the grid class on the child element would have no effect:

<div class="*:flex">
  <div>...</div>
  <div class="grid">...</div>
  <div>...</div>
</div>

After this PR, the *:flex utility generates this CSS instead:

:where(.\*\:flex > *) {
  display: flex;
}

This selector has a specificity of 0,0,0, so even though it appears later in the CSS, a bare utility with a specificity of 0,1,0 will still take precedence.

This is something we wanted to do when we first introduced the * variant in the v3 series, but couldn't because having such a low specificity meant that styles in Preflight would take precedence over utilities like *:flex, which is not would anyone would want.

We can make this change for v4 because now all of Preflight is wrapped in a dedicated @layer, and rules from later layers always take precedence over rules from earlier layers even if the rule in the later layer has a lower specificity.