Add :popover-open variant

lukewarlow · Nov 7, 2023 · 00e1cea · 00e1cea
1 parent 0b7f27c
commit 00e1cea
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -31,6 +31,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add spacing scale to `min-w-*`, `min-h-*`, and `max-w-*` utilities ([#12300](https://github.com/tailwindlabs/tailwindcss/pull/12300))
 - Add `forced-color-adjust` utilities ([#11931](https://github.com/tailwindlabs/tailwindcss/pull/11931))
 - Add `forced-colors` variant ([#11694](https://github.com/tailwindlabs/tailwindcss/pull/11694))
+- Add `:popover-open` variant ([#12148](https://github.com/tailwindlabs/tailwindcss/pull/12148))
 - [Oxide] New Rust template parsing engine ([#10252](https://github.com/tailwindlabs/tailwindcss/pull/10252))
 - [Oxide] Support `@import "tailwindcss"` using top-level `index.css` file ([#11205](https://github.com/tailwindlabs/tailwindcss/pull/11205), ([#11260](https://github.com/tailwindlabs/tailwindcss/pull/11260)))
 - [Oxide] Use `lightningcss` for nesting and vendor prefixes in PostCSS plugin ([#10399](https://github.com/tailwindlabs/tailwindcss/pull/10399))

diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -464,6 +464,10 @@ export let variantPlugins = {
   forcedColorsVariants: ({ addVariant }) => {
     addVariant('forced-colors', '@media (forced-colors: active)')
   },
+
+  popoverOpenVariant: ({ addVariant }) => {
+    addVariant('popover-open', '&:popover-open')
+  },
 }
 
 let cssTransformValue = [

diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
@@ -762,6 +762,7 @@ function resolvePlugins(context, root) {
     variantPlugins['printVariant'],
     variantPlugins['screenVariants'],
     variantPlugins['orientationVariants'],
+    variantPlugins['popoverOpenVariant'],
   ]
 
   return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins]

diff --git a/tests/plugins/variants/popoverOpenVariant.test.js b/tests/plugins/variants/popoverOpenVariant.test.js
@@ -0,0 +1,7 @@
+import { css, quickVariantPluginTest } from '../../util/run'
+
+quickVariantPluginTest('popoverOpenVariant').toMatchFormattedCss(css`
+  .popover-open\:flex:popover-open {
+    display: flex;
+  }
+`)