From 8eca436b3c4e67ad389271b5f28bf30b50c601d3 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 25 Jul 2024 10:09:47 -0400
Subject: [PATCH] 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 <4323180+adamwathan@users.noreply.github.com>
---
 CHANGELOG.md                              | 4 ++++
 packages/tailwindcss/src/variants.test.ts | 2 +-
 packages/tailwindcss/src/variants.ts      | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 550f2f9b5..809700aa0 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts
index d27da7638..895d444e4 100644
--- a/packages/tailwindcss/src/variants.test.ts
+++ b/packages/tailwindcss/src/variants.test.ts
@@ -14,7 +14,7 @@ test('force', () => {
 
 test('*', () => {
   expect(run(['*:flex'])).toMatchInlineSnapshot(`
-    ".\\*\\:flex > * {
+    ":where(.\\*\\:flex > *) {
       display: flex;
     }"
   `)
diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts
index 8a08bb787..4a05b9adc 100644
--- a/packages/tailwindcss/src/variants.ts
+++ b/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