Increase specificity of * and ** variants (#14920)

Increase the specificity of the `*` and `**` variants. This will now use
`:is(…)` instead of `:where(…)`.

In Tailwind CSS v3 we used `& > *` instead of `:where(& > *)` which
means that this isn't a breaking change anymore.

This also allows us to use codemod things like `[&>[data-visible]]:flex`
and `[&_[data-visible]]:flex` to `*:data-visible:flex` and
`**:data-visible:flex` respectively.

---------

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>

CHANGELOG.md

@@ -56,6 +56,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Rename `--transition-timing-function-*` variables to `--ease-*` ([#14886](https://github.com/tailwindlabs/tailwindcss/pull/14886))
 - Rename `--width-*` variables to `--container-*` ([#14898](https://github.com/tailwindlabs/tailwindcss/pull/14898))
 - Rename `--font-size-*` variables to `--text-*` ([#14909](https://github.com/tailwindlabs/tailwindcss/pull/14909))
+- Revert specificity of `*` variant to match v3 behavior ([#14920](https://github.com/tailwindlabs/tailwindcss/pull/14920))
 
 ## [4.0.0-alpha.31] - 2024-10-29
 

packages/tailwindcss/src/variants.test.ts

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

packages/tailwindcss/src/variants.ts

@@ -363,8 +363,8 @@ export function createVariants(theme: Theme): Variants {
   }
 
   variants.static('force', () => {}, { compounds: Compounds.Never })
-  staticVariant('*', [':where(& > *)'], { compounds: Compounds.Never })
-  staticVariant('**', [':where(& *)'], { compounds: Compounds.Never })
+  staticVariant('*', [':is(& > *)'], { compounds: Compounds.Never })
+  staticVariant('**', [':is(& *)'], { compounds: Compounds.Never })
 
   function negateConditions(ruleName: string, conditions: string[]) {
     return conditions.map((condition) => {