.github/workflows/test.yml

@@ -2,8 +2,6 @@ name: Test
 on:
   push:
   pull_request:
-env:
-  FORCE_COLOR: 2
 jobs:
   full:
     name: Node.js 16 Full
@@ -15,10 +13,13 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: 16
+          cache: yarn
       - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+        run: yarn install --frozen-lockfile
       - name: Run tests
         run: yarn test
+        env:
+          FORCE_COLOR: 2
   short:
     runs-on: ubuntu-latest
     strategy:
@@ -35,9 +36,10 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node-version }}
+          cache: yarn
       - name: Install dependencies
-        uses: bahmutov/npm-install@v1
-        with:
-          install-command: yarn --frozen-lockfile --ignore-engines
+        run: yarn install --frozen-lockfile --ignore-engines
       - name: Run unit tests
         run: npx jest
+        env:
+          FORCE_COLOR: 2

.npmignore

@@ -9,3 +9,4 @@ coverage/
 .github/
 logo.svg
 AUTHORS
+tsconfig.json

CHANGELOG.md

@@ -1,6 +1,9 @@
 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 10.4 “ǃke e꞉ ǀxarra ǁke”
+* Added `:autofill` support (by Luke Warlow).
+
 ## 10.3.7
 * Replaced `nanocolors` to `picocolors`.
 

data/prefixes.js

@@ -524,7 +524,7 @@ f(prefixFullscreen, { match: /x(\s#2|$)/ }, browsers =>
 // File selector button
 prefix(['::file-selector-button'], {
   selector: true,
-  feature: 'fullscreen',
+  feature: 'file-selector-button',
   browsers: [
     'chrome 89',
     'edge 89',
@@ -540,6 +540,17 @@ prefix(['::file-selector-button'], {
   ]
 })
 
+// :autofill
+let prefixAutofill = require('caniuse-lite/data/features/css-autofill')
+
+f(prefixAutofill, browsers =>
+  prefix([':autofill'], {
+    selector: true,
+    feature: 'css-autofill',
+    browsers
+  })
+)
+
 // Tab size
 let prefixTabsize = require('caniuse-lite/data/features/css3-tabsize')
 

lib/hacks/autofill.js

@@ -0,0 +1,30 @@
+let Selector = require('../selector')
+let utils = require('../utils')
+
+class Autofill extends Selector {
+  constructor(name, prefixes, all) {
+    super(name, prefixes, all)
+
+    if (this.prefixes) {
+      this.prefixes = utils.uniq(
+        this.prefixes.map(i => {
+          return '-webkit-'
+        })
+      )
+    }
+  }
+
+  /**
+   * Return different selectors depend on prefix
+   */
+  prefixed(prefix) {
+    if (prefix === '-webkit-') {
+      return ':-webkit-autofill'
+    }
+    return `:${prefix}autofill`
+  }
+}
+
+Autofill.names = [':autofill']
+
+module.exports = Autofill

lib/prefixes.js

@@ -65,7 +65,9 @@ let hackCrossFade = require('./hacks/cross-fade')
 let hackDisplayFlex = require('./hacks/display-flex')
 let hackDisplayGrid = require('./hacks/display-grid')
 let hackFilterValue = require('./hacks/filter-value')
+let hackAutofill = require('./hacks/autofill')
 
+Selector.hack(hackAutofill)
 Selector.hack(hackFullscreen)
 Selector.hack(hackPlaceholder)
 Selector.hack(hackPlaceholderShown)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "autoprefixer",
-  "version": "10.3.7",
+  "version": "10.4.0",
   "description": "Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website",
   "engines": {
     "node": "^10 || ^12 || >=14"
@@ -32,38 +32,38 @@
     "postcss": "^8.1.0"
   },
   "dependencies": {
-    "browserslist": "^4.17.3",
-    "caniuse-lite": "^1.0.30001264",
+    "browserslist": "^4.17.5",
+    "caniuse-lite": "^1.0.30001272",
     "fraction.js": "^4.1.1",
     "normalize-range": "^0.1.2",
-    "picocolors": "^0.2.1",
+    "picocolors": "^1.0.0",
     "postcss-value-parser": "^4.1.0"
   },
   "devDependencies": {
-    "@logux/eslint-config": "^45.4.8",
-    "@size-limit/preset-small-lib": "5.0.5",
+    "@logux/eslint-config": "^46.0.1",
+    "@size-limit/preset-small-lib": "6.0.3",
     "@types/jest": "^27.0.2",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
-    "check-dts": "^0.5.6",
-    "clean-publish": "^3.0.3",
-    "eslint": "^7.32.0",
+    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/parser": "^5.2.0",
+    "check-dts": "^0.6.2",
+    "clean-publish": "^3.4.2",
+    "eslint": "^8.1.0",
     "eslint-config-standard": "^16.0.3",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jest": "^24.5.2",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-jest": "^25.2.2",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prefer-let": "^1.1.0",
-    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-prefer-let": "^3.0.0",
+    "eslint-plugin-promise": "^5.1.1",
     "eslint-plugin-security": "^1.4.0",
-    "eslint-plugin-unicorn": "^36.0.0",
-    "jest": "^27.2.4",
-    "lint-staged": "^11.2.0",
-    "postcss": "^8.3.9",
+    "eslint-plugin-unicorn": "^37.0.1",
+    "jest": "^27.3.1",
+    "lint-staged": "^11.2.6",
+    "postcss": "^8.3.11",
     "prettier": "^2.4.1",
-    "simple-git-hooks": "^2.6.1",
-    "size-limit": "^5.0.5",
-    "ts-jest": "^27.0.5",
-    "typescript": "^4.4.3"
+    "simple-git-hooks": "^2.7.0",
+    "size-limit": "^6.0.3",
+    "ts-jest": "^27.0.7",
+    "typescript": "^4.4.4"
   },
   "lint-staged": {
     "*.js": [

test/autoprefixer.test.ts

@@ -86,6 +86,9 @@ let clipper = autoprefixer({
 let example = autoprefixer({
   overrideBrowserslist: ['defaults']
 })
+let autofiller = autoprefixer({
+  overrideBrowserslist: ['Chrome > 90', 'Firefox >= 82']
+})
 let content = autoprefixer({
   overrideBrowserslist: [
     '> 2%',
@@ -137,6 +140,8 @@ function prefixer(name: string): Plugin {
     return selectorer
   } else if (name === 'selectors' || name === 'file-selector-button') {
     return fileSelectorButtoner
+  } else if (name === 'selectors' || name === 'autofill') {
+    return autofiller
   } else if (name === 'placeholder-shown') {
     return placeholderShowner
   } else if (name === 'backdrop-filter' || name === 'overscroll-behavior') {
@@ -562,7 +567,7 @@ it('takes values from other PostCSS plugins', () => {
     })
   }
   let result = postcss([plugin, compiler]).process('a{width:0/**/0}')
-  expect(result.css).toEqual('a{width:-webkit-calc(0);width:calc(0)}')
+  expect(result.css).toBe('a{width:-webkit-calc(0);width:calc(0)}')
 })
 
 it('has option to disable @supports support', () => {
@@ -768,9 +773,7 @@ describe('hacks', () => {
   it('supports appearance for IE', () => {
     let instance = autoprefixer({ overrideBrowserslist: 'Edge 15' })
     let result = postcss([instance]).process('a { appearance: none }')
-    expect(result.css).toEqual(
-      'a { -webkit-appearance: none; appearance: none }'
-    )
+    expect(result.css).toBe('a { -webkit-appearance: none; appearance: none }')
   })
 
   it('changes angle in gradient', () => {
@@ -796,7 +799,7 @@ describe('hacks', () => {
 
   it('warns on old flexbox display', () => {
     let result = postcss([flexboxer]).process('a{ display: box; }')
-    expect(result.css).toEqual('a{ display: box; }')
+    expect(result.css).toBe('a{ display: box; }')
     expect(result.warnings().map(i => i.toString())).toEqual([
       'autoprefixer: <css input>:1:4: You should write display: flex ' +
         'by final spec instead of display: box'

test/brackets.test.js

@@ -20,15 +20,15 @@ describe('.parse()', () => {
 
 describe('.stringify()', () => {
   it('stringifies simple string', () => {
-    expect(brackets.stringify(['test'])).toEqual('test')
+    expect(brackets.stringify(['test'])).toBe('test')
   })
 
   it('stringifies brackets', () => {
-    expect(brackets.stringify(['a ', ['b'], ' a'])).toEqual('a (b) a')
+    expect(brackets.stringify(['a ', ['b'], ' a'])).toBe('a (b) a')
   })
 
   it('stringifies many brackets', () => {
-    expect(brackets.stringify(['a ', ['b ', [''], ''], ' a'])).toEqual(
+    expect(brackets.stringify(['a ', ['b ', [''], ''], ' a'])).toBe(
       'a (b ()) a'
     )
   })

test/browsers.test.js

@@ -52,15 +52,15 @@ describe('parse()', () => {
 describe('prefix()', () => {
   it('returns browser prefix', () => {
     let browsers = new Browsers(data, ['chrome 30'])
-    expect(browsers.prefix('chrome 30')).toEqual('-webkit-')
+    expect(browsers.prefix('chrome 30')).toBe('-webkit-')
   })
 
   it('returns right prefix for Operas', () => {
     let browsers = new Browsers(data, ['last 1 opera version'])
-    expect(browsers.prefix('opera 12')).toEqual('-o-')
-    expect(browsers.prefix(browsers.selected[0])).toEqual('-webkit-')
-    expect(browsers.prefix('op_mob 12')).toEqual('-o-')
-    expect(browsers.prefix(browsers.selected[0])).toEqual('-webkit-')
+    expect(browsers.prefix('opera 12')).toBe('-o-')
+    expect(browsers.prefix(browsers.selected[0])).toBe('-webkit-')
+    expect(browsers.prefix('op_mob 12')).toBe('-o-')
+    expect(browsers.prefix(browsers.selected[0])).toBe('-webkit-')
   })
 })
 

test/cases/autofill.css

@@ -0,0 +1,3 @@
+input:autofill {
+  background-color: red;
+}

test/cases/autofill.out.css

@@ -0,0 +1,7 @@
+input:-webkit-autofill {
+  background-color: red;
+}
+
+input:autofill {
+  background-color: red;
+}

test/declaration.test.js

@@ -45,15 +45,15 @@ describe('maxPrefixed()', () => {
   it('returns max prefix length', () => {
     let decl = parse('a { tab-size: 4 }').first.first
     let list = ['-webkit-', '-webkit- old', '-moz-']
-    expect(tabsize.maxPrefixed(list, decl)).toEqual(8)
+    expect(tabsize.maxPrefixed(list, decl)).toBe(8)
   })
 })
 
 describe('calcBefore()', () => {
   it('returns before with cascade', () => {
     let decl = parse('a { tab-size: 4 }').first.first
     let list = ['-webkit-', '-moz- old', '-moz-']
-    expect(tabsize.calcBefore(list, decl, '-moz- old')).toEqual('    ')
+    expect(tabsize.calcBefore(list, decl, '-moz- old')).toBe('    ')
   })
 })
 
@@ -62,45 +62,45 @@ describe('restoreBefore()', () => {
     let css = parse('a {\n' + '  -moz-tab-size: 4;\n' + '       tab-size: 4 }')
     let decl = css.first.nodes[1]
     tabsize.restoreBefore(decl)
-    expect(decl.raws.before).toEqual('\n  ')
+    expect(decl.raws.before).toBe('\n  ')
   })
 })
 
 describe('prefixed()', () => {
   it('returns prefixed property', () => {
     let css = parse('a { tab-size: 2 }')
     let decl = css.first.first
-    expect(tabsize.prefixed(decl.prop, '-moz-')).toEqual('-moz-tab-size')
+    expect(tabsize.prefixed(decl.prop, '-moz-')).toBe('-moz-tab-size')
   })
 })
 
 describe('normalize()', () => {
   it('returns property name by specification', () => {
-    expect(tabsize.normalize('tab-size')).toEqual('tab-size')
+    expect(tabsize.normalize('tab-size')).toBe('tab-size')
   })
 })
 
 describe('process()', () => {
   it('adds prefixes', () => {
     let css = parse('a { -moz-tab-size: 2; tab-size: 2 }')
     tabsize.process(css.first.nodes[1])
-    expect(css.toString()).toEqual(
+    expect(css.toString()).toBe(
       'a { -moz-tab-size: 2; -ms-tab-size: 2; tab-size: 2 }'
     )
   })
 
   it('checks parents prefix', () => {
     let css = parse('::-moz-selection a { tab-size: 2 }')
     tabsize.process(css.first.first)
-    expect(css.toString()).toEqual(
+    expect(css.toString()).toBe(
       '::-moz-selection a { -moz-tab-size: 2; tab-size: 2 }'
     )
   })
 
   it('checks value for prefixes', () => {
     let css = parse('a { tab-size: -ms-calc(2) }')
     tabsize.process(css.first.first)
-    expect(css.toString()).toEqual(
+    expect(css.toString()).toBe(
       'a { -ms-tab-size: -ms-calc(2); tab-size: -ms-calc(2) }'
     )
   })

test/info.test.js

@@ -118,5 +118,5 @@ it('returns string for empty prefixes', () => {
 it('returns string for empty browsers', () => {
   let browsers = new Browsers(data.browsers, [])
   let prefixes = new Prefixes(data.prefixes, browsers)
-  expect(info(prefixes)).toEqual('No browsers selected')
+  expect(info(prefixes)).toBe('No browsers selected')
 })

test/postcss.test.js

@@ -27,7 +27,5 @@ it('works with other PostCSS plugins', () => {
     from: 'a.css'
   })
 
-  expect(result.css).toEqual(
-    'b{ -webkit-user-select: none; user-select: none; }'
-  )
+  expect(result.css).toBe('b{ -webkit-user-select: none; user-select: none; }')
 })