Add :popover-open variant

Author: lukewarlow

CHANGELOG.md

@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Don’t crash when important and parent selectors are equal in `@apply` ([#12112](https://github.com/tailwindlabs/tailwindcss/pull/12112))
 - Eliminate irrelevant rules when applying variants ([#12113](https://github.com/tailwindlabs/tailwindcss/pull/12113))
 - Improve RegEx parser, reduce possibilities as the key for arbitrary properties ([#12121](https://github.com/tailwindlabs/tailwindcss/pull/12121))
+- Add `:popover-open` variant ([#12148](https://github.com/tailwindlabs/tailwindcss/pull/12148))
 
 ### Added
 

src/corePlugins.js

@@ -460,6 +460,10 @@ export let variantPlugins = {
     addVariant('contrast-more', '@media (prefers-contrast: more)')
     addVariant('contrast-less', '@media (prefers-contrast: less)')
   },
+
+  popoverOpenVariant: ({ addVariant }) => {
+    addVariant('popover-open', '&:popover-open')
+  },
 }
 
 let cssTransformValue = [

src/lib/setupContextUtils.js

@@ -761,6 +761,7 @@ function resolvePlugins(context, root) {
     variantPlugins['printVariant'],
     variantPlugins['screenVariants'],
     variantPlugins['orientationVariants'],
+    variantPlugins['popoverOpenVariant'],
   ]
 
   return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins]

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;
+  }
+`)