From 5468c9f109240747715a28539077ad6088e36380 Mon Sep 17 00:00:00 2001
From: Luke Warlow <projects@warlow.dev>
Date: Sat, 10 Jul 2021 11:54:23 +0100
Subject: [PATCH] Autoprefix the file-selector-button pseudo-element (#1412)

* Autoprefix the file-selector-button pseudo-element

Prototype using MDN compat data where caniuse is not usable.

* Hardcode data instead of using MDN

* Add test to hacks block
---
 data/prefixes.js                        | 19 +++++++++++++++++++
 lib/hacks/file-selector-button.js       | 17 +++++++++++++++++
 lib/prefixes.js                         |  2 ++
 test/autoprefixer.test.ts               |  8 ++++++++
 test/cases/file-selector-button.css     |  3 +++
 test/cases/file-selector-button.out.css |  6 ++++++
 6 files changed, 55 insertions(+)
 create mode 100644 lib/hacks/file-selector-button.js
 create mode 100644 test/cases/file-selector-button.css
 create mode 100644 test/cases/file-selector-button.out.css

diff --git a/data/prefixes.js b/data/prefixes.js
index 0a062ffdf..e0d3c72bc 100644
--- a/data/prefixes.js
+++ b/data/prefixes.js
@@ -521,6 +521,25 @@ f(prefixFullscreen, { match: /x(\s#2|$)/ }, browsers =>
   })
 )
 
+// File selector button
+prefix(['::file-selector-button'], {
+  selector: true,
+  feature: 'fullscreen',
+  browsers: [
+    'chrome 89',
+    'edge 89',
+    'firefox 82',
+    'opera 75',
+    'safari 14.1',
+    'android 89',
+    'and_chr 89',
+    'op_mob 63',
+    'and_ff 82',
+    'ios_saf 14.5',
+    'samsung 15.0'
+  ]
+})
+
 // Tab size
 let prefixTabsize = require('caniuse-lite/data/features/css3-tabsize')
 
diff --git a/lib/hacks/file-selector-button.js b/lib/hacks/file-selector-button.js
new file mode 100644
index 000000000..d98df51e3
--- /dev/null
+++ b/lib/hacks/file-selector-button.js
@@ -0,0 +1,17 @@
+let Selector = require('../selector')
+
+class FileSelectorButton extends Selector {
+  /**
+   * Return different selectors depend on prefix
+   */
+  prefixed(prefix) {
+    if (prefix === '-webkit-') {
+      return '::-webkit-file-upload-button'
+    }
+    return `::file-selector-button`
+  }
+}
+
+FileSelectorButton.names = ['::file-selector-button']
+
+module.exports = FileSelectorButton
diff --git a/lib/prefixes.js b/lib/prefixes.js
index 716b63f28..59e7f56e2 100644
--- a/lib/prefixes.js
+++ b/lib/prefixes.js
@@ -12,6 +12,7 @@ let utils = require('./utils')
 let hackFullscreen = require('./hacks/fullscreen')
 let hackPlaceholder = require('./hacks/placeholder')
 let hackPlaceholderShown = require('./hacks/placeholder-shown')
+let hackFileSelectorButton = require('./hacks/file-selector-button')
 let hackFlex = require('./hacks/flex')
 let hackOrder = require('./hacks/order')
 let hackFilter = require('./hacks/filter')
@@ -68,6 +69,7 @@ let hackFilterValue = require('./hacks/filter-value')
 Selector.hack(hackFullscreen)
 Selector.hack(hackPlaceholder)
 Selector.hack(hackPlaceholderShown)
+Selector.hack(hackFileSelectorButton)
 Declaration.hack(hackFlex)
 Declaration.hack(hackOrder)
 Declaration.hack(hackFilter)
diff --git a/test/autoprefixer.test.ts b/test/autoprefixer.test.ts
index e9075c5a1..0844732b1 100644
--- a/test/autoprefixer.test.ts
+++ b/test/autoprefixer.test.ts
@@ -56,6 +56,9 @@ let ffgradienter = autoprefixer({
 let selectorer = autoprefixer({
   overrideBrowserslist: ['Chrome 25', 'Firefox > 17', 'IE 10', 'Edge 12']
 })
+let fileSelectorButtoner = autoprefixer({
+  overrideBrowserslist: ['Chrome > 25', 'Firefox > 85']
+})
 let placeholderShowner = autoprefixer({
   overrideBrowserslist: ['IE >= 10']
 })
@@ -123,6 +126,8 @@ function prefixer(name: string): Plugin {
     return intrinsicer
   } else if (name === 'selectors' || name === 'placeholder') {
     return selectorer
+  } else if (name === 'selectors' || name === 'file-selector-button') {
+    return fileSelectorButtoner
   } else if (name === 'placeholder-shown') {
     return placeholderShowner
   } else if (name === 'backdrop-filter' || name === 'overscroll-behavior') {
@@ -680,6 +685,9 @@ describe('hacks', () => {
   it('supports all fullscreens', () => {
     check('fullscreen')
   })
+  it('supports file-selector-button', () => {
+    check('file-selector-button')
+  })
   it('supports custom prefixes', () => {
     check('custom-prefix')
   })
diff --git a/test/cases/file-selector-button.css b/test/cases/file-selector-button.css
new file mode 100644
index 000000000..ebf76b40c
--- /dev/null
+++ b/test/cases/file-selector-button.css
@@ -0,0 +1,3 @@
+::file-selector-button {
+  background: black
+}
diff --git a/test/cases/file-selector-button.out.css b/test/cases/file-selector-button.out.css
new file mode 100644
index 000000000..58e621eac
--- /dev/null
+++ b/test/cases/file-selector-button.out.css
@@ -0,0 +1,6 @@
+::-webkit-file-upload-button {
+  background: black
+}
+::file-selector-button {
+  background: black
+}