Add variant for file-selector-button pseudo element

Author: lukewarlow

src/corePlugins.js

@@ -72,6 +72,18 @@ export let pseudoElementVariants = ({ config, addVariant }) => {
     }),
   ])
 
+  addVariant(
+    'file-selector-button',
+    transformAllSelectors((selector) => {
+      return updateAllClasses(selector, (className, { withPseudo }) => {
+        return withPseudo(
+          `file-selector-button${config('separator')}${className}`,
+          '::file-selector-button'
+        )
+      })
+    })
+  )
+
   addVariant(
     'before',
     transformAllSelectors(

tests/variants.test.css

@@ -52,6 +52,14 @@
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
+.file-selector-button\:bg-blue-500::file-selector-button {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+.file-selector-button\:text-white::file-selector-button {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
 .before\:block::before {
   content: '';
   display: block;

tests/variants.test.html

@@ -45,6 +45,7 @@
       <li class="marker:text-red-500 marker:text-lg"></li>
     </ul>
     <div class="selection:bg-blue-500 selection:text-white"></div>
+    <div class="file-selector-button:bg-blue-500 file-selector-button:text-white"></div>
     <div class="before:block before:bg-red-500"></div>
     <div class="after:flex after:uppercase"></div>