Merge pull request #652 from ben-rogerson/feature/open-not-open-variants

Add `open:` and `not-open:` variants
ben-rogerson · Mar 27, 2022 · 1c6a0b6 · 1c6a0b6
2 parents d6a5796 + 09fd623
commit 1c6a0b6
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 0 deletions.
diff --git a/__fixtures__/!variants.js b/__fixtures__/!variants.js
@@ -37,6 +37,8 @@ tw`placeholder-shown:flex`
 tw`not-placeholder-shown:flex`
 tw`read-only:flex`
 tw`read-write:flex`
+tw`open:flex`
+tw`not-open:flex`
 
 // Child selectors
 tw`not-disabled:flex`
@@ -104,6 +106,8 @@ tw`group-in-range:shadow-md`
 tw`group-out-of-range:shadow-md`
 tw`group-read-only:shadow-md`
 tw`group-empty:shadow-md`
+tw`group-open:shadow-md`
+tw`group-not-open:shadow-md`
 
 // Direction
 tw`rtl:shadow-md`

diff --git a/__fixtures__/peers/peers.js b/__fixtures__/peers/peers.js
@@ -28,6 +28,8 @@ tw`peer-focus:block`
 tw`peer-focus-visible:block`
 tw`peer-active:block`
 tw`peer-disabled:block`
+tw`peer-open:block`
+tw`peer-not-open:block`
 
 tw`peer-focus:peer-hover:block`
 tw`peer-disabled:peer-focus:peer-hover:first:block`

diff --git a/__snapshots__/plugin.test.js.snap b/__snapshots__/plugin.test.js.snap
@@ -1320,6 +1320,8 @@ tw\`placeholder-shown:flex\`
 tw\`not-placeholder-shown:flex\`
 tw\`read-only:flex\`
 tw\`read-write:flex\`
+tw\`open:flex\`
+tw\`not-open:flex\`
 
 // Child selectors
 tw\`not-disabled:flex\`
@@ -1387,6 +1389,8 @@ tw\`group-in-range:shadow-md\`
 tw\`group-out-of-range:shadow-md\`
 tw\`group-read-only:shadow-md\`
 tw\`group-empty:shadow-md\`
+tw\`group-open:shadow-md\`
+tw\`group-not-open:shadow-md\`
 
 // Direction
 tw\`rtl:shadow-md\`
@@ -1597,6 +1601,16 @@ tw\`xl:placeholder-red-500! first:md:block sm:disabled:flex\`
   ':read-write': {
     display: 'flex',
   },
+})
+;({
+  ':open': {
+    display: 'flex',
+  },
+})
+;({
+  ':not(:open)': {
+    display: 'flex',
+  },
 }) // Child selectors
 
 ;({
@@ -2028,6 +2042,26 @@ tw\`xl:placeholder-red-500! first:md:block sm:disabled:flex\`
     boxShadow:
       'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)',
   },
+})
+;({
+  '.group:open &': {
+    '--tw-shadow':
+      '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+    '--tw-shadow-colored':
+      '0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color)',
+    boxShadow:
+      'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)',
+  },
+})
+;({
+  '.group:not(:open) &': {
+    '--tw-shadow':
+      '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+    '--tw-shadow-colored':
+      '0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color)',
+    boxShadow:
+      'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)',
+  },
 }) // Direction
 
 ;({
@@ -36510,6 +36544,8 @@ tw\`peer-focus:block\`
 tw\`peer-focus-visible:block\`
 tw\`peer-active:block\`
 tw\`peer-disabled:block\`
+tw\`peer-open:block\`
+tw\`peer-not-open:block\`
 
 tw\`peer-focus:peer-hover:block\`
 tw\`peer-disabled:peer-focus:peer-hover:first:block\`
@@ -36658,6 +36694,16 @@ tw\`peer-focus:first:peer-hover:peer-active:block\`
     display: 'block',
   },
 })
+;({
+  '.peer:open ~ &': {
+    display: 'block',
+  },
+})
+;({
+  '.peer:not(:open) ~ &': {
+    display: 'block',
+  },
+})
 ;({
   '.peer:focus:hover ~ &': {
     display: 'block',

diff --git a/src/config/variantConfig.js b/src/config/variantConfig.js
@@ -50,6 +50,8 @@ const variantConfig = ({
   placeholder: '::placeholder',
   'read-only': ':read-only',
   'read-write': ':read-write',
+  open: ':open',
+  'not-open': ':not(:open)',
 
   // Child selectors
   'not-disabled': ':not(:disabled)',
@@ -140,6 +142,10 @@ const variantConfig = ({
     prefixDarkLightModeClass('.group:read-only &', variantData),
   'group-empty': variantData =>
     prefixDarkLightModeClass('.group:empty &', variantData),
+  'group-open': variantData =>
+    prefixDarkLightModeClass('.group:open &', variantData),
+  'group-not-open': variantData =>
+    prefixDarkLightModeClass('.group:not(:open) &', variantData),
 
   // Media types
   print: '@media print',
@@ -209,6 +215,8 @@ const variantConfig = ({
   'peer-out-of-range': createPeer('out-of-range'),
   'peer-read-only': createPeer('read-only'),
   'peer-empty': createPeer('empty'),
+  'peer-open': createPeer('open'),
+  'peer-not-open': createPeer('not(:open)'),
 
   // Selection
   selection: '::selection',