From 59038c573454e1ba7d8f3c67aa842cb3de290247 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 22 Mar 2024 16:00:07 -0400 Subject: [PATCH] Include `:popover-open` in `open` variant (#13331) * Include :popover-open in open variant Co-Authored-By: Luke Warlow * Update changelog * Remove accidental package.json change * Revert playground changes --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Co-authored-by: Luke Warlow --- CHANGELOG.md | 1 + packages/tailwindcss/src/variants.test.ts | 8 ++++---- packages/tailwindcss/src/variants.ts | 2 +- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6c3a50760..f1d460b3f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Make `rotate-x/y/z-*` utilities composable ([#13319](https://github.com/tailwindlabs/tailwindcss/pull/13319)) - `@tailwind/vite` applies the Vite CSS plugin to transform Tailwind-generated CSS (e.g. inlining images) ([#13218](https://github.com/tailwindlabs/tailwindcss/pull/13218)) - Add `starting` variant for `@starting-style` ([#13329](https://github.com/tailwindlabs/tailwindcss/pull/13329)) +- Target `:popover-open` in existing `open` variant ([#13331](https://github.com/tailwindlabs/tailwindcss/pull/13331)) ### Fixed diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index 00e94740f..18ef39eeb 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -270,15 +270,15 @@ test('target', () => { test('open', () => { expect(run(['open:flex', 'group-open:flex', 'peer-open:flex'])).toMatchInlineSnapshot(` - ".group-open\\:flex:is(:where(.group)[open] *) { + ".group-open\\:flex:is(:where(.group):is([open], :popover-open) *) { display: flex; } - .peer-open\\:flex:is(:where(.peer)[open] ~ *) { + .peer-open\\:flex:is(:where(.peer):is([open], :popover-open) ~ *) { display: flex; } - .open\\:flex[open] { + .open\\:flex:is([open], :popover-open) { display: flex; }" `) @@ -1834,7 +1834,7 @@ test('variant order', () => { display: flex; } - .open\\:flex[open] { + .open\\:flex:is([open], :popover-open) { display: flex; } diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts index badc49702..25a37c948 100644 --- a/packages/tailwindcss/src/variants.ts +++ b/packages/tailwindcss/src/variants.ts @@ -292,7 +292,7 @@ export function createVariants(theme: Theme): Variants { ['visited', '&:visited'], ['target', '&:target'], - ['open', '&[open]'], + ['open', '&:is([open], :popover-open)'], // Forms ['default', '&:default'],