CHANGELOG.md

@@ -1,6 +1,9 @@
 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 10.3 “Чести своей не отдам никому”
+* Added `::file-selector-button` support (by Luke Warlow).
+
 ## 10.2.6
 * Fixed “no prefixes needed” warning (by @Pwntheon).
 

README.md

@@ -5,7 +5,7 @@
      title="Autoprefixer logo by Anton Lovchikov">
 
 [PostCSS] plugin to parse CSS and add vendor prefixes to CSS rules using values
-from [Can I Use]. It is [recommended] by Google and used in Twitter and Alibaba.
+from [Can I Use]. It is recommended by Google and used in Twitter and Alibaba.
 
 Write your CSS rules without vendor prefixes (in fact, forget about them
 entirely):
@@ -59,7 +59,6 @@ Twitter account for news and releases: [@autoprefixer].
 
 [interactive demo]: https://autoprefixer.github.io/
 [@autoprefixer]:    https://twitter.com/autoprefixer
-[recommended]:      https://developers.google.com/web/tools/setup/setup-buildtools#dont_trip_up_with_vendor_prefixes
 [Can I Use]:        https://caniuse.com/
 [cult-img]:         http://cultofmartians.com/assets/badges/badge.svg
 [PostCSS]:          https://github.com/postcss/postcss

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)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "autoprefixer",
-  "version": "10.2.6",
+  "version": "10.3.0",
   "description": "Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website",
   "engines": {
     "node": "^10 || ^12 || >=14"
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "browserslist": "^4.16.6",
-    "caniuse-lite": "^1.0.30001230",
+    "caniuse-lite": "^1.0.30001243",
     "colorette": "^1.2.2",
     "fraction.js": "^4.1.1",
     "normalize-range": "^0.1.2",
@@ -41,31 +41,30 @@
     "chalk": false
   },
   "devDependencies": {
-    "@logux/eslint-config": "^45.4.3",
-    "@size-limit/preset-small-lib": "4.11.0",
-    "@types/jest": "^26.0.23",
-    "@typescript-eslint/eslint-plugin": "^4.25.0",
-    "@typescript-eslint/parser": "^4.25.0",
-    "check-dts": "^0.4.4",
+    "@logux/eslint-config": "^45.4.6",
+    "@size-limit/preset-small-lib": "5.0.1",
+    "@types/jest": "^26.0.24",
+    "@typescript-eslint/eslint-plugin": "^4.28.2",
+    "@typescript-eslint/parser": "^4.28.2",
+    "check-dts": "^0.5.2",
     "clean-publish": "^2.2.0",
-    "eslint": "^7.27.0",
+    "eslint": "^7.30.0",
     "eslint-config-standard": "^16.0.3",
-    "eslint-plugin-import": "^2.23.3",
+    "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jest": "^24.3.6",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prefer-let": "^1.1.0",
     "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-security": "^1.4.0",
-    "eslint-plugin-unicorn": "^32.0.1",
-    "fs-extra": "^9.1.0",
-    "jest": "^27.0.1",
+    "eslint-plugin-unicorn": "^34.0.1",
+    "jest": "^27.0.6",
     "lint-staged": "^11.0.0",
-    "postcss": "^8.3.0",
-    "prettier": "^2.3.0",
-    "simple-git-hooks": "^2.4.1",
-    "size-limit": "^4.11.0",
-    "ts-jest": "^27.0.0",
-    "typescript": "^4.2.4"
+    "postcss": "^8.3.5",
+    "prettier": "^2.3.2",
+    "simple-git-hooks": "^2.5.1",
+    "size-limit": "^5.0.1",
+    "ts-jest": "^27.0.3",
+    "typescript": "^4.3.5"
   },
   "lint-staged": {
     "*.js": [

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
+}