Repository: postcss/autoprefixer (js)

Issue:
`::file-selector-button` support
It seems [`::file-selector-button`](https://caniuse.com/?search=file-selector-button) isn't automatically prefixed using autoprefixer v10.0.2.

Opening the issue as a feature request to add support for it.

Thanks in advance!

Pull request:
Autoprefix the file-selector-button pseudo-element
Closes #1374 

~~This is prototype implementation using MDN compat data as a fallback because caniuse doesn't have this feature.~~

Edit: This has been changed to hard code support values instead of using the mdn lib due to its size.

Patch:
diff --git a/data/prefixes.js b/data/prefixes.js
index 0a062ff..e0d3c72 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 0000000..d98df51
--- /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 716b63f..59e7f56 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)


Test patch:
diff --git a/test/autoprefixer.test.ts b/test/autoprefixer.test.ts
index e9075c5..0844732 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 0000000..ebf76b4
--- /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 0000000..58e621e
--- /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
+}