Reduce specificity of * variant (#14056)

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:

```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:

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

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

```css
: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.

---------

Co-authored-by: Adam Wathan <[email protected]>

Author: adamwathan

CHANGELOG.md

@@ -24,6 +24,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `@variant` at-rule for defining custom variants in CSS ([#13992](https://github.com/tailwindlabs/tailwindcss/pull/13992), [#14008](https://github.com/tailwindlabs/tailwindcss/pull/14008))
 - Add `@utility` at-rule for defining custom utilities in CSS ([#14044](https://github.com/tailwindlabs/tailwindcss/pull/14044))
 
+### Changed
+
+- Reduce the specificity of the `*` variant so those styles can be overridden by child elements ([#14056](https://github.com/tailwindlabs/tailwindcss/pull/14056))
+
 ## [4.0.0-alpha.17] - 2024-07-04
 
 ### Added

packages/tailwindcss/src/variants.test.ts

@@ -14,7 +14,7 @@ test('force', () => {
 
 test('*', () => {
   expect(run(['*:flex'])).toMatchInlineSnapshot(`
-    ".\\*\\:flex > * {
+    ":where(.\\*\\:flex > *) {
       display: flex;
     }"
   `)

packages/tailwindcss/src/variants.ts

@@ -201,7 +201,7 @@ export function createVariants(theme: Theme): Variants {
   }
 
   variants.static('force', () => {}, { compounds: false })
-  staticVariant('*', ['& > *'], { compounds: false })
+  staticVariant('*', [':where(& > *)'], { compounds: false })
 
   variants.compound('not', (ruleNode, variant) => {
     if (variant.modifier) return null