From 3b5d12eee53e1982a5bfab3957742b62a73a516c Mon Sep 17 00:00:00 2001
From: Luke Warlow <projects@warlow.dev>
Date: Fri, 9 Jul 2021 17:47:12 +0100
Subject: [PATCH] Add variant for file-selector-button pseudo element

Also includes fallback styles for -webkit-file-upload-button for fuller browser support.
---
 src/jit/corePlugins.js       | 19 +++++++++++++++++++
 tests/jit/variants.test.css  | 16 ++++++++++++++++
 tests/jit/variants.test.html |  1 +
 3 files changed, 36 insertions(+)

diff --git a/src/jit/corePlugins.js b/src/jit/corePlugins.js
index 054d57f48561..8bc78f6aa5d4 100644
--- a/src/jit/corePlugins.js
+++ b/src/jit/corePlugins.js
@@ -61,6 +61,25 @@ export default {
       }),
     ])
 
+    addVariant('file-selector-button', [
+      transformAllSelectors((selector) => {
+        return updateAllClasses(selector, (className, { withPseudo }) => {
+          return withPseudo(
+            `file-selector-button${config('separator')}${className}`,
+            '::-webkit-file-upload-button'
+          )
+        })
+      }),
+      transformAllSelectors((selector) => {
+        return updateAllClasses(selector, (className, { withPseudo }) => {
+          return withPseudo(
+            `file-selector-button${config('separator')}${className}`,
+            '::file-selector-button'
+          )
+        })
+      }),
+    ])
+
     addVariant(
       'before',
       transformAllSelectors(
diff --git a/tests/jit/variants.test.css b/tests/jit/variants.test.css
index cfe240b75b7f..228f072dbcb7 100644
--- a/tests/jit/variants.test.css
+++ b/tests/jit/variants.test.css
@@ -156,6 +156,22 @@
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
+.file-selector-button\:bg-blue-500::-webkit-file-upload-button {
+  --tw-bg-opacity: 1;
+  background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
+}
+.file-selector-button\:text-white::-webkit-file-upload-button {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+.file-selector-button\:bg-blue-500::file-selector-button {
+  --tw-bg-opacity: 1;
+  background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
+}
+.file-selector-button\:text-white::file-selector-button {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
 .before\:block::before {
   content: '';
   display: block;
diff --git a/tests/jit/variants.test.html b/tests/jit/variants.test.html
index 9fb44452efeb..5ca8135cf04e 100644
--- a/tests/jit/variants.test.html
+++ b/tests/jit/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>