Merge pull request #570 from ben-rogerson/feature/not-placeholder-shown

Add not-placeholder-shown variants
ben-rogerson · Mar 25, 2022 · 0d640f8 · 0d640f8
2 parents 1fe7475 + 1f3bf39
commit 0d640f8
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 0 deletions.
diff --git a/__fixtures__/!variants.js b/__fixtures__/!variants.js
@@ -34,6 +34,7 @@ tw`out-of-range:flex`
 tw`required:flex`
 tw`placeholder:flex`
 tw`placeholder-shown:flex`
+tw`not-placeholder-shown:flex`
 tw`read-only:flex`
 tw`read-write:flex`
 

diff --git a/__fixtures__/peers/peers.js b/__fixtures__/peers/peers.js
@@ -13,6 +13,7 @@ tw`peer-default:block`
 tw`peer-checked:block`
 tw`peer-indeterminate:block`
 tw`peer-placeholder-shown:block`
+tw`peer-not-placeholder-shown:block`
 tw`peer-autofill:block`
 tw`peer-required:block`
 tw`peer-valid:block`

diff --git a/__snapshots__/plugin.test.js.snap b/__snapshots__/plugin.test.js.snap
@@ -1317,6 +1317,7 @@ tw\`out-of-range:flex\`
 tw\`required:flex\`
 tw\`placeholder:flex\`
 tw\`placeholder-shown:flex\`
+tw\`not-placeholder-shown:flex\`
 tw\`read-only:flex\`
 tw\`read-write:flex\`
 
@@ -1582,6 +1583,11 @@ tw\`xl:placeholder-red-500! first:md:block sm:disabled:flex\`
     display: 'flex',
   },
 })
+;({
+  ':not(:placeholder-shown)': {
+    display: 'flex',
+  },
+})
 ;({
   ':read-only': {
     display: 'flex',
@@ -36489,6 +36495,7 @@ tw\`peer-default:block\`
 tw\`peer-checked:block\`
 tw\`peer-indeterminate:block\`
 tw\`peer-placeholder-shown:block\`
+tw\`peer-not-placeholder-shown:block\`
 tw\`peer-autofill:block\`
 tw\`peer-required:block\`
 tw\`peer-valid:block\`
@@ -36576,6 +36583,11 @@ tw\`peer-focus:first:peer-hover:peer-active:block\`
     display: 'block',
   },
 })
+;({
+  '.peer:not(:placeholder-shown) ~ &': {
+    display: 'block',
+  },
+})
 ;({
   '.peer:autofill ~ &': {
     display: 'block',

diff --git a/src/config/variantConfig.js b/src/config/variantConfig.js
@@ -46,6 +46,7 @@ const variantConfig = ({
   'out-of-range': ':out-of-range',
   required: ':required',
   'placeholder-shown': ':placeholder-shown',
+  'not-placeholder-shown': ':not(:placeholder-shown)',
   placeholder: '::placeholder',
   'read-only': ':read-only',
   'read-write': ':read-write',
@@ -197,6 +198,7 @@ const variantConfig = ({
   'peer-checked': createPeer('checked'),
   'peer-indeterminate': createPeer('indeterminate'),
   'peer-placeholder-shown': createPeer('placeholder-shown'),
+  'peer-not-placeholder-shown': createPeer('not(:placeholder-shown)'),
   'peer-autofill': createPeer('autofill'),
   'peer-focus-within': createPeer('focus-within'),
   'peer-focus-visible': createPeer('focus-visible'),