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

---
 src/corePlugins.js       | 12 ++++++++++++
 tests/variants.test.css  |  8 ++++++++
 tests/variants.test.html |  1 +
 3 files changed, 21 insertions(+)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index f9a9a97cbabb..d2fe7e0ecff0 100644
--- a/src/corePlugins.js
+++ b/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(
diff --git a/tests/variants.test.css b/tests/variants.test.css
index 300d8c798e29..6eb2c1340d74 100644
--- a/tests/variants.test.css
+++ b/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;
diff --git a/tests/variants.test.html b/tests/variants.test.html
index 9fb44452efeb..5ca8135cf04e 100644
--- a/tests/variants.test.html
+++ b/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>
 

From fcd5f2b84e393715dd39d3baed0bd1ec106347d8 Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Thu, 23 Sep 2021 15:35:38 -0400
Subject: [PATCH 2/2] Rename `file-selector-button` variant to `file`

Co-Authored-By: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
---
 src/corePlugins.js       | 7 ++-----
 tests/variants.test.css  | 8 ++++++--
 tests/variants.test.html | 3 ++-
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index d2fe7e0ecff0..19eca2acb295 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -73,13 +73,10 @@ export let pseudoElementVariants = ({ config, addVariant }) => {
   ])
 
   addVariant(
-    'file-selector-button',
+    'file',
     transformAllSelectors((selector) => {
       return updateAllClasses(selector, (className, { withPseudo }) => {
-        return withPseudo(
-          `file-selector-button${config('separator')}${className}`,
-          '::file-selector-button'
-        )
+        return withPseudo(`file${config('separator')}${className}`, '::file-selector-button')
       })
     })
   )
diff --git a/tests/variants.test.css b/tests/variants.test.css
index 6eb2c1340d74..41e1b08f64e6 100644
--- a/tests/variants.test.css
+++ b/tests/variants.test.css
@@ -52,11 +52,11 @@
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
-.file-selector-button\:bg-blue-500::file-selector-button {
+.file\: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 {
+.file\:text-white::file-selector-button {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
@@ -197,6 +197,10 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.file\:hover\:bg-blue-600::file-selector-button:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+}
 .focus\:shadow-md:focus {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
diff --git a/tests/variants.test.html b/tests/variants.test.html
index 5ca8135cf04e..70e1c1409c4d 100644
--- a/tests/variants.test.html
+++ b/tests/variants.test.html
@@ -45,7 +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="file:bg-blue-500 file:text-white"></div>
     <div class="before:block before:bg-red-500"></div>
     <div class="after:flex after:uppercase"></div>
 
@@ -128,6 +128,7 @@
     <div class="2xl:shadow-md"></div>
 
     <!-- Stacked variants -->
+    <div class="file:hover:bg-blue-600"></div>
     <div class="focus:hover:shadow-md"></div>
     <div class="sm:active:shadow-md"></div>
     <div class="md:group-focus:shadow-md"></div>