From 97da59fcd358b592645f582c5e835ae16a79c256 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 8 Nov 2024 16:19:55 +0100 Subject: [PATCH] Increase specificity of `*` and `**` variants (#14920) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- CHANGELOG.md | 1 + packages/tailwindcss/src/variants.test.ts | 4 ++-- packages/tailwindcss/src/variants.ts | 4 ++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e0887e203e63..a345e26cd821 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index fc0c9856f546..54cbe2dbf5d0 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/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; }" `) diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts index 81be83326141..7174323eb92a 100644 --- a/packages/tailwindcss/src/variants.ts +++ b/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) => {