Autoprefix the file-selector-button pseudo-element

data/prefixes.js

@@ -36,6 +36,47 @@ function f(data, opts, callback) {
   callback(need.sort(browsersSort))
 }
 
+// Convert MDN data
+function f2(data, opts, callback) {
+  data = data.__compat
+
+  if (!callback) {
+    ;[callback, opts] = [opts, {}]
+  }
+
+  let need = []
+
+  for (let browser in data.support) {
+    let versions = data.support[browser]
+
+    if (Array.isArray(versions)) {
+      versions = versions[0]
+    }
+
+    let versionAdded = versions.version_added
+
+    if (versionAdded) {
+      if (browser === 'samsunginternet_android') {
+        browser = 'samsung'
+      } else if (browser === 'safari_ios') {
+        browser = 'ios_saf'
+      } else if (browser === 'opera_android') {
+        browser = 'op_mob'
+      } else if (browser === 'chrome_android') {
+        browser = 'and_chr'
+      } else if (browser === 'firefox_android') {
+        browser = 'and_ff'
+      } else if (browser === 'webview_android') {
+        browser = 'android'
+      }
+
+      need.push(browser + ' ' + versionAdded)
+    }
+  }
+
+  callback(need.sort(browsersSort))
+}
+
 // Add data for all properties
 let result = {}
 
@@ -521,6 +562,17 @@ f(prefixFullscreen, { match: /x(\s#2|$)/ }, browsers =>
   })
 )
 
+// File selector button
+const bcd = require('@mdn/browser-compat-data')
+
+f2(bcd.css.selectors['file-selector-button'], browsers =>
+  prefix(['::file-selector-button'], {
+    selector: true,
+    feature: 'fullscreen',
+    browsers
+  })
+)
+
 // 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)

package.json

@@ -29,6 +29,7 @@
     "postcss": "^8.1.0"
   },
   "dependencies": {
+    "@mdn/browser-compat-data": "^3.3.10",
     "browserslist": "^4.16.6",
     "caniuse-lite": "^1.0.30001230",
     "colorette": "^1.2.2",

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

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,7 @@
+::-webkit-file-upload-button {
+  background: black
+}
+
+::file-selector-button {
+  background: black
+}