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

Author: lukewarlow

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')
 

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

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/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')
   })

test/cases/file-selector-button.css

@@ -0,0 +1,3 @@
+::file-selector-button {
+  background: black
+}

test/cases/file-selector-button.out.css

@@ -0,0 +1,6 @@
+::-webkit-file-upload-button {
+  background: black
+}
+::file-selector-button {
+  background: black
+}