autoprefixer 9.4.10 → 9.6.1

package/CHANGELOG.md

@@ -1,6 +1,23 @@
 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 9.6.1
+* Fix `-webkit-line-clamp` truncating multi-line text support.
+
+## 9.6 “Nunc id vides, nunc ne vides”
+* Show warning about Browserslist config on `browser` option.
+* Add warning-less `overrideBrowserslist` option.
+* Add `text-orientation` support.
+* Add `min-resolution: 2x` alias support.
+* Add `.github/CONTRIBUTING.md` (by Juan Martin Marco).
+
+## 9.5.1
+* Fix `backdrop-filter` for Edge (by Oleh Aloshkin).
+* Fix `min-resolution` media query support in Firefox < 16.
+
+## 9.5 “Draco dormiens nunquam titillandus”
+* Add `mask-composite` support (by Semen Levenson).
+
 ## 9.4.10
 * Add warning for named Grid rows.
 

package/README.md

@@ -14,6 +14,15 @@ entirely):
 ::placeholder {
   color: gray;
 }
+
+.image {
+  background-image: url(image@1x.png);
+}
+@media (min-resolution: 2dppx) {
+  .image {
+    background-image: url(image@2x.png);
+  }
+}
 ```
 
 Autoprefixer will use the data based on current browser popularity and property
@@ -24,6 +33,9 @@ of Autoprefixer.
 ::-webkit-input-placeholder {
   color: gray;
 }
+::-moz-placeholder {
+  color: gray;
+}
 :-ms-input-placeholder {
   color: gray;
 }
@@ -33,6 +45,17 @@ of Autoprefixer.
 ::placeholder {
   color: gray;
 }
+
+.image {
+  background-image: url(image@1x.png);
+}
+@media (-webkit-min-device-pixel-ratio: 2),
+       (-o-min-device-pixel-ratio: 2/1),
+       (min-resolution: 2dppx) {
+  .image {
+    background-image: url(image@2x.png);
+  }
+}
 ```
 
 Twitter account for news and releases: [@autoprefixer].
@@ -55,8 +78,6 @@ Twitter account for news and releases: [@autoprefixer].
 - [Browsers](#browsers)
 - [FAQ](#faq)
     - [Does Autoprefixer polyfill Grid Layout for IE?](#does-autoprefixer-polyfill-grid-layout-for-ie)
-    - [No prefixes in production](#no-prefixes-in-production)
-    - [What is the unprefixed version of `-webkit-min-device-pixel-ratio`?](#what-is-the-unprefixed-version-of--webkit-min-device-pixel-ratio)
     - [Does it add polyfills?](#does-it-add-polyfills)
     - [Why doesn’t Autoprefixer add prefixes to `border-radius`?](#why-doesnt-autoprefixer-add-prefixes-to-border-radius)
     - [Why does Autoprefixer use unprefixed properties in `@-webkit-keyframes`?](#why-does-autoprefixer-use-unprefixed-properties-in--webkit-keyframes)
@@ -123,25 +144,25 @@ to use Autoprefixer is by using  `grid-template` or `grid-template-areas`.
 
 ```css
 .page {
-    display: grid;
-    grid-gap: 33px;
-    grid-template:
-        "head head  head" 1fr
-        "nav  main  main" minmax(100px, 1fr)
-        "nav  foot  foot" 2fr /
-        1fr   100px 1fr;
+  display: grid;
+  grid-gap: 33px;
+  grid-template:
+    "head head  head" 1fr
+    "nav  main  main" minmax(100px, 1fr)
+    "nav  foot  foot" 2fr /
+    1fr   100px 1fr;
 }
 .page__head {
-    grid-area: head;
+  grid-area: head;
 }
 .page__nav {
-    grid-area: nav;
+  grid-area: nav;
 }
 .page__main {
-    grid-area: main;
+  grid-area: main;
 }
 .page__footer {
-    grid-area: foot;
+  grid-area: foot;
 }
 ```
 
@@ -157,44 +178,6 @@ See also:
 [`postcss-gap-properties`]:                     https://github.com/jonathantneal/postcss-gap-properties
 [`postcss-grid-kiss`]:                          https://github.com/sylvainpolletvillard/postcss-grid-kiss
 
-### No prefixes in production
-
-Many other tools contain Autoprefixer. For example, webpack uses Autoprefixer
-to minify CSS by cleaning unnecessary prefixes.
-
-If you pass your browsers to Autoprefixer using its `browsers` option, the other
-tools will use their own config, leading webpack to remove the prefixes that
-the first Autoprefixer added.
-
-To avoid this, ensure you use either the [browserslist config file] or
-`browsers` key in your `package.json`, so that all tools (Autoprefixer,
-cssnano, doiuse, cssnext, etc) use the same browsers list.
-
-[browserslist config file]: https://github.com/ai/browserslist#config-file
-
-
-### What is the unprefixed version of `-webkit-min-device-pixel-ratio`?
-
-```css
-@media (min-resolution: 2dppx) {
-    .image {
-        background-image: url(image@2x.png);
-    }
-}
-```
-
-Will be compiled to:
-
-```css
-@media (-webkit-min-device-pixel-ratio: 2),
-       (-o-min-device-pixel-ratio: 2/1),
-       (min-resolution: 2dppx) {
-    .image {
-        background-image: url(image@2x.png);
-    }
-}
-```
-
 
 ### Does it add polyfills?
 
@@ -247,8 +230,7 @@ Use [postcss-unprefix] before Autoprefixer.
 ### Does Autoprefixer add `-epub-` prefix?
 
 No, Autoprefixer works only with browsers prefixes from Can I Use.
-But you can use [postcss-epub]
-for prefixing ePub3 properties.
+But you can use [postcss-epub] for prefixing ePub3 properties.
 
 [postcss-epub]: https://github.com/Rycochet/postcss-epub
 
@@ -269,17 +251,17 @@ future-proof. You can use [postcss-font-family-system-ui] to transform
 In Gulp you can use [gulp-postcss] with `autoprefixer` npm package.
 
 ```js
-gulp.task('autoprefixer', function () {
-    var postcss      = require('gulp-postcss');
-    var sourcemaps   = require('gulp-sourcemaps');
-    var autoprefixer = require('autoprefixer');
-
-    return gulp.src('./src/*.css')
-        .pipe(sourcemaps.init())
-        .pipe(postcss([ autoprefixer() ]))
-        .pipe(sourcemaps.write('.'))
-        .pipe(gulp.dest('./dest'));
-});
+gulp.task('autoprefixer', () => {
+  const autoprefixer = require('autoprefixer')
+  const sourcemaps = require('gulp-sourcemaps')
+  const postcss = require('gulp-postcss')
+
+  return gulp.src('./src/*.css')
+    .pipe(sourcemaps.init())
+    .pipe(postcss([ autoprefixer() ]))
+    .pipe(sourcemaps.write('.'))
+    .pipe(gulp.dest('./dest'))
+})
 ```
 
 With `gulp-postcss` you also can combine Autoprefixer
@@ -296,14 +278,14 @@ and [other PostCSS plugins].
 
 ```js
 module.exports = {
-    module: {
-        rules: [
-            {
-                test: /\.css$/,
-                use: ["style-loader", "css-loader", "postcss-loader"]
-            }
-        ]
-    }
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader", "postcss-loader"]
+      }
+    ]
+  }
 }
 ```
 
@@ -414,15 +396,15 @@ You can use Autoprefixer with [PostCSS] in your Node.js application
 or if you want to develop an Autoprefixer plugin for a new environment.
 
 ```js
-var autoprefixer = require('autoprefixer');
-var postcss      = require('postcss');
-
-postcss([ autoprefixer ]).process(css).then(function (result) {
-    result.warnings().forEach(function (warn) {
-        console.warn(warn.toString());
-    });
-    console.log(result.css);
-});
+const autoprefixer = require('autoprefixer')
+const postcss = require('postcss')
+
+postcss([ autoprefixer ]).process(css).then(result => {
+  result.warnings().forEach(warn => {
+    console.warn(warn.toString())
+  })
+  console.log(result.css)
+})
 ```
 
 There is also a [standalone build] for the browser or for a non-Node.js runtime.
@@ -467,9 +449,9 @@ problems in your CSS:
 You can get warnings from `result.warnings()`:
 
 ```js
-result.warnings().forEach(function (warn) {
-    console.warn(warn.toString());
-});
+result.warnings().forEach(warn => {
+  console.warn(warn.toString())
+})
 ```
 
 Every Autoprefixer runner should display these warnings.
@@ -487,8 +469,8 @@ after the unprefixed one.
 
 ```css
 a {
-    transform: scale(0.5);
-    -moz-transform: scale(0.6);
+  transform: scale(0.5);
+  -moz-transform: scale(0.6);
 }
 ```
 
@@ -512,7 +494,7 @@ You can use these plugin options to control some of Autoprefixer’s features.
 You should set them inside the plugin like so:
 
 ```js
-autoprefixer({ grid: "autoplace" });
+autoprefixer({ grid: 'autoplace' })
 ```
 
 
@@ -523,18 +505,18 @@ you can use control comments to disable Autoprefixer.
 
 ```css
 .a {
-    transition: 1s; /* will be prefixed */
+  transition: 1s; /* will be prefixed */
 }
 
 .b {
-    /* autoprefixer: off */
-    transition: 1s; /* will not be prefixed */
+  /* autoprefixer: off */
+  transition: 1s; /* will not be prefixed */
 }
 
 .c {
-    /* autoprefixer: ignore next */
-    transition: 1s; /* will not be prefixed */
-    mask: url(image.png); /* will be prefixed */
+  /* autoprefixer: ignore next */
+  transition: 1s; /* will not be prefixed */
+  mask: url(image.png); /* will be prefixed */
 }
 ```
 
@@ -546,20 +528,20 @@ There are three types of control comments:
   or next rule selector or at-rule parameters (but not rule/at‑rule body).
 * `/* autoprefixer grid: (autoplace|no-autoplace|off) */`: control how Autoprefixer handles
   grid translations for the whole block:
-    * `autoplace`: enable grid translations with autoplacement support.
-    * `no-autoplace`: enable grid translations with autoplacement support *disabled*.
-      (alias for deprecated value `on`)
-    * `off`: disable all grid translations.
+  * `autoplace`: enable grid translations with autoplacement support.
+  * `no-autoplace`: enable grid translations with autoplacement
+    support *disabled* (alias for deprecated value `on`).
+  * `off`: disable all grid translations.
 
 You can also use comments recursively:
 
 ```css
 /* autoprefixer: off */
 @supports (transition: all) {
-    /* autoprefixer: on */
-    a {
-        /* autoprefixer: off */
-    }
+  /* autoprefixer: on */
+  a {
+    /* autoprefixer: off */
+  }
 }
 ```
 
@@ -570,10 +552,10 @@ block twice:
 /* How not to use block level control comments */
 
 .do-not-do-this {
-    /* autoprefixer: off */
-    transition: 1s;
-    /* autoprefixer: on */
-    transform: rotate(20deg);
+  /* autoprefixer: off */
+  transition: 1s;
+  /* autoprefixer: on */
+  transform: rotate(20deg);
 }
 ```
 
@@ -613,13 +595,13 @@ Available options are:
       (alias for the deprecated `true` value)
 * `stats` (object): custom [usage statistics] for `> 10% in my stats`
   browsers query.
-* `browsers` (array): list of queries for target browsers. Try to not use it.
-  The best practice is to use `.browserslistrc` config
+* `overrideBrowserslist` (array): list of queries for target browsers.
+  Try to not use it. The best practice is to use `.browserslistrc` config
   or `browserslist` key in `package.json` to share target browsers
   with Babel, ESLint and Stylelint. See [Browserslist docs]
   for available queries and default value.
 * `ignoreUnknownVersions` (boolean): do not raise error on unknown browser
-  version in Browserslist config or `browsers` option. Default is `false`.
+  version in Browserslist config. Default is `false`.
 
 Plugin object has `info()` method for debugging purpose.
 
@@ -643,10 +625,10 @@ Autoprefixer supports autoplacement by using `nth-child` CSS selectors. It creat
 /* autoprefixer grid: autoplace */
 
 .autoplacement-example {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto auto;
-    grid-gap: 20px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto auto;
+  grid-gap: 20px;
 }
 ```
 
@@ -656,33 +638,33 @@ Autoprefixer supports autoplacement by using `nth-child` CSS selectors. It creat
 /* autoprefixer grid: autoplace */
 
 .autoplacement-example {
-    display: -ms-grid;
-    display: grid;
-    -ms-grid-columns: 1fr 20px 1fr;
-    grid-template-columns: 1fr 1fr;
-    -ms-grid-rows: auto 20px auto;
-    grid-template-rows: auto auto;
-    grid-gap: 20px;
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: 1fr 20px 1fr;
+  grid-template-columns: 1fr 1fr;
+  -ms-grid-rows: auto 20px auto;
+  grid-template-rows: auto auto;
+  grid-gap: 20px;
 }
 
 .autoplacement-example > *:nth-child(1) {
-    -ms-grid-row: 1;
-    -ms-grid-column: 1;
+  -ms-grid-row: 1;
+  -ms-grid-column: 1;
 }
 
 .autoplacement-example > *:nth-child(2) {
-    -ms-grid-row: 1;
-    -ms-grid-column: 3;
+  -ms-grid-row: 1;
+  -ms-grid-column: 3;
 }
 
 .autoplacement-example > *:nth-child(3) {
-    -ms-grid-row: 3;
-    -ms-grid-column: 1;
+  -ms-grid-row: 3;
+  -ms-grid-column: 1;
 }
 
 .autoplacement-example > *:nth-child(4) {
-    -ms-grid-row: 3;
-    -ms-grid-column: 3;
+  -ms-grid-row: 3;
+  -ms-grid-column: 3;
 }
 ```
 
@@ -705,14 +687,14 @@ The following CSS will not work as expected with the autoplacement feature enabl
 /* Unsafe CSS when Autoplacement is enabled */
 
 .grid-cell {
-    grid-column: 2;
-    grid-row: 2;
+  grid-column: 2;
+  grid-row: 2;
 }
 
 .grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(3, 1fr);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
 }
 ```
 
@@ -722,14 +704,14 @@ Swapping the rules around will not fix the issue either:
 /* Also unsafe to use this CSS */
 
 .grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(3, 1fr);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
 }
 
 .grid-cell {
-    grid-column: 2;
-    grid-row: 2;
+  grid-column: 2;
+  grid-row: 2;
 }
 ```
 
@@ -740,15 +722,15 @@ grid-declaration rule:
 /* Disable autoplacement to fix the issue */
 
 .grid {
-    /* autoprefixer grid: no-autoplace */
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(3, 1fr);
+  /* autoprefixer grid: no-autoplace */
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
 }
 
 .grid-cell {
-    grid-column: 2;
-    grid-row: 2;
+  grid-column: 2;
+  grid-row: 2;
 }
 ```
 
@@ -762,21 +744,21 @@ when needed. This method is far less likely to cause something on the site to br
 
 /* Old code will function the same way it always has */
 .old-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(3, 1fr);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
 }
 .old-grid-cell {
-    grid-column: 2;
-    grid-row: 2;
+  grid-column: 2;
+  grid-row: 2;
 }
 
 /* Enable autoplacement when you want to use it in new code */
 .new-autoplace-friendly-grid {
-    /* autoprefixer grid: autoplace */
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(3, auto);
+  /* autoprefixer grid: autoplace */
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, auto);
 }
 ```
 
@@ -795,14 +777,14 @@ so that Autoprefixer knows how many `nth-child` selectors to generate.
 
 ```css
 .not-allowed {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
 }
 
 .is-allowed {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(10, auto);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(10, auto);
 }
 ```
 
@@ -815,8 +797,8 @@ so unfortunately this little snippet will _never_ be IE friendly.
 
 ```css
 .grid {
-    /* This will never be IE friendly */
-    grid-template-columns: repeat(auto-fit, min-max(200px, 1fr))
+  /* This will never be IE friendly */
+  grid-template-columns: repeat(auto-fit, min-max(200px, 1fr))
 }
 ```
 
@@ -830,27 +812,23 @@ autoplacement grid is planned for a future release.
 
 ```css
 .autoplacement-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(3, auto);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, auto);
 }
 
-/*
-    grid cells placed inside the explicit grid
-    will break the layout in IE
-*/
+/* Grid cells placed inside the explicit grid
+   will break the layout in IE */
 .not-permitted-grid-cell {
-    grid-column: 1;
-    grid-row: 1;
+  grid-column: 1;
+  grid-row: 1;
 }
 
-/*
-    grid cells placed outside the
-    explicit grid will work in IE
-*/
+/* Grid cells placed outside the
+   explicit grid will work in IE */
 .permitted-grid-cell {
-    grid-column: 1 / span 2;
-    grid-row: 4;
+  grid-column: 1 / span 2;
+  grid-row: 4;
 }
 ```
 
@@ -859,25 +837,25 @@ If manual cell placement is required, we recommend using `grid-template` or
 
 ```css
 .page {
-    display: grid;
-    grid-gap: 30px;
-    grid-template:
-        "head head"
-        "nav  main" minmax(100px, 1fr)
-        "foot foot" /
-        200px 1fr;
+  display: grid;
+  grid-gap: 30px;
+  grid-template:
+      "head head"
+      "nav  main" minmax(100px, 1fr)
+      "foot foot" /
+      200px 1fr;
 }
 .page__head {
-    grid-area: head;
+  grid-area: head;
 }
 .page__nav {
-    grid-area: nav;
+  grid-area: nav;
 }
 .page__main {
-    grid-area: main;
+  grid-area: main;
 }
 .page__footer {
-    grid-area: foot;
+  grid-area: foot;
 }
 ```
 
@@ -887,7 +865,7 @@ Let's say you have this HTML:
 
 ```html
 <div class="grid">
-    <div class="grid-cell"></div>
+  <div class="grid-cell"></div>
 </div>
 ```
 
@@ -895,17 +873,17 @@ And you write this CSS:
 
 ```css
 .grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto;
 }
 
 .grid::before {
-    content: 'before';
+  content: 'before';
 }
 
 .grid::after {
-    content: 'after';
+  content: 'after';
 }
 ```
 
@@ -913,31 +891,31 @@ This will be the output:
 
 ```css
 .grid {
-    display: -ms-grid;
-    display: grid;
-    -ms-grid-columns: 1fr 1fr;
-    grid-template-columns: 1fr 1fr;
-    -ms-grid-rows: auto;
-    grid-template-rows: auto;
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
+  -ms-grid-rows: auto;
+  grid-template-rows: auto;
 }
 
 .grid > *:nth-child(1) {
-    -ms-grid-row: 1;
-    -ms-grid-column: 1;
+  -ms-grid-row: 1;
+  -ms-grid-column: 1;
 }
 
 
 .grid > *:nth-child(2) {
-    -ms-grid-row: 1;
-    -ms-grid-column: 2;
+  -ms-grid-row: 1;
+  -ms-grid-column: 2;
 }
 
 .grid::before {
-    content: 'before';
+  content: 'before';
 }
 
 .grid::after {
-    content: 'after';
+  content: 'after';
 }
 ```
 
@@ -957,47 +935,47 @@ If you wish to change the size of a `grid-gap`, you will need to redeclare the g
 
 ```css
 .grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto;
-    grid-gap: 50px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto;
+  grid-gap: 50px;
 }
 
 /* This will *NOT* work in IE */
 @media (max-width: 600px) {
-    .grid {
-        grid-gap: 20px;
-    }
+  .grid {
+    grid-gap: 20px;
+  }
 }
 
 /* This will *NOT* work in IE */
 .grid.small-gap {
-    grid-gap: 20px;
+  grid-gap: 20px;
 }
 ```
 
 ```css
 .grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto;
-    grid-gap: 50px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto;
+  grid-gap: 50px;
 }
 
 /* This *WILL* work in IE */
 @media (max-width: 600px) {
-    .grid {
-        grid-template-columns: 1fr 1fr;
-        grid-template-rows: auto;
-        grid-gap: 20px;
-    }
+  .grid {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto;
+    grid-gap: 20px;
+  }
 }
 
 /* This *WILL* work in IE */
 .grid.small-gap {
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto;
-    grid-gap: 20px;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto;
+  grid-gap: 20px;
 }
 ```
 
@@ -1039,6 +1017,13 @@ Properties:
 JS API is also available:
 
 ```js
-var info = autoprefixer().info();
-console.log(info);
+console.log(autoprefixer().info())
 ```
+
+
+## Security Contact
+
+To report a security vulnerability, please use the [Tidelift security contact].
+Tidelift will coordinate the fix and disclosure.
+
+[Tidelift security contact]: https://tidelift.com/security

package/data/prefixes.js

@@ -1,5 +1,6 @@
 "use strict";
 
+/* eslint-disable import-helpers/order-imports */
 var unpack = require('caniuse-lite').feature;
 
 function browsersSort(a, b) {
@@ -196,7 +197,11 @@ f(require('caniuse-lite/data/features/css-filter-function'), function (browsers)
   });
 }); // Backdrop-filter
 
-f(require('caniuse-lite/data/features/css-backdrop-filter'), function (browsers) {
+var backdrop = require('caniuse-lite/data/features/css-backdrop-filter');
+
+f(backdrop, {
+  match: /y\sx|y\s#2/
+}, function (browsers) {
   return prefix(['backdrop-filter'], {
     feature: 'css-backdrop-filter',
     browsers: browsers
@@ -498,7 +503,7 @@ f(require('caniuse-lite/data/features/css-deviceadaptation'), function (browsers
 var resolut = require('caniuse-lite/data/features/css-media-resolution');
 
 f(resolut, {
-  match: /( x($| )|a #3)/
+  match: /( x($| )|a #2)/
 }, function (browsers) {
   return prefix(['@resolution'], {
     feature: 'css-media-resolution',
@@ -698,4 +703,11 @@ f(require('caniuse-lite/data/features/css-color-adjust'), function (browsers) {
     feature: 'css-color-adjust',
     browsers: browsers
   });
+}); // text-orientation
+
+f(require('caniuse-lite/data/features/css-text-orientation'), function (browsers) {
+  return prefix(['text-orientation'], {
+    feature: 'css-text-orientation',
+    browsers: browsers
+  });
 });

package/lib/autoprefixer.js

@@ -6,6 +6,8 @@ var postcss = require('postcss');
 
 var agents = require('caniuse-lite').agents;
 
+var chalk = require('chalk');
+
 var Browsers = require('./browsers');
 
 var Prefixes = require('./prefixes');
@@ -14,6 +16,8 @@ var data = require('../data/prefixes');
 
 var info = require('./info');
 
+var WARNING = '\n' + '  Replace Autoprefixer `browsers` option to Browserslist config.\n' + '  Use `browserslist` key in `package.json` or `.browserslistrc` file.\n' + '\n' + '  Using `browsers` option cause some error. Browserslist config \n' + '  can be used for Babel, Autoprefixer, postcss-normalize and other tools.\n' + '\n' + '  If you really need to use option, rename it to `overrideBrowserslist`.\n' + '\n' + '  Learn more at:\n' + '  https://github.com/browserslist/browserslist#readme\n' + '  https://twitter.com/browserslist\n' + '\n';
+
 function isPlainObject(obj) {
   return Object.prototype.toString.apply(obj) === '[object Object]';
 }
@@ -62,12 +66,24 @@ module.exports = postcss.plugin('autoprefixer', function () {
   }
 
   if (options.browser) {
-    throw new Error('Change `browser` option to `browsers` in Autoprefixer');
+    throw new Error('Change `browser` option to `overrideBrowserslist` in Autoprefixer');
   } else if (options.browserslist) {
-    throw new Error('Change `browserslist` option to `browsers` in Autoprefixer');
+    throw new Error('Change `browserslist` option to `overrideBrowserslist` in Autoprefixer');
   }
 
-  if (options.browsers) {
+  if (options.overrideBrowserslist) {
+    reqs = options.overrideBrowserslist;
+  } else if (options.browsers) {
+    if (typeof console !== 'undefined' && console.warn) {
+      if (chalk && chalk.red) {
+        console.warn(chalk.red(WARNING.replace(/`[^`]+`/g, function (i) {
+          return chalk.yellow(i.slice(1, -1));
+        })));
+      } else {
+        console.warn(WARNING);
+      }
+    }
+
     reqs = options.browsers;
   }
 

package/lib/hacks/backdrop-filter.js

@@ -0,0 +1,37 @@
+"use strict";
+
+function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _defaults(subClass, superClass); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var Declaration = require('../declaration');
+
+var utils = require('../utils');
+
+var BackdropFilter =
+/*#__PURE__*/
+function (_Declaration) {
+  _inheritsLoose(BackdropFilter, _Declaration);
+
+  function BackdropFilter(name, prefixes, all) {
+    var _this;
+
+    _this = _Declaration.call(this, name, prefixes, all) || this;
+
+    if (_this.prefixes) {
+      _this.prefixes = utils.uniq(_this.prefixes.map(function (i) {
+        return i === '-ms-' ? '-webkit-' : i;
+      }));
+    }
+
+    return _this;
+  }
+
+  return BackdropFilter;
+}(Declaration);
+
+_defineProperty(BackdropFilter, "names", ['backdrop-filter']);
+
+module.exports = BackdropFilter;

package/lib/hacks/background-clip.js

@@ -22,11 +22,7 @@ function (_Declaration) {
 
     if (_this.prefixes) {
       _this.prefixes = utils.uniq(_this.prefixes.map(function (i) {
-        if (i === '-ms-') {
-          return '-webkit-';
-        }
-
-        return i;
+        return i === '-ms-' ? '-webkit-' : i;
       }));
     }
 

package/lib/hacks/border-radius.js

@@ -47,13 +47,10 @@ _defineProperty(BorderRadius, "toMozilla", {});
 
 _defineProperty(BorderRadius, "toNormal", {});
 
-var _arr = ['top', 'bottom'];
-
-for (var _i = 0; _i < _arr.length; _i++) {
+for (var _i = 0, _arr = ['top', 'bottom']; _i < _arr.length; _i++) {
   var ver = _arr[_i];
-  var _arr2 = ['left', 'right'];
 
-  for (var _i2 = 0; _i2 < _arr2.length; _i2++) {
+  for (var _i2 = 0, _arr2 = ['left', 'right']; _i2 < _arr2.length; _i2++) {
     var hor = _arr2[_i2];
     var normal = "border-" + ver + "-" + hor + "-radius";
     var mozilla = "border-radius-" + ver + hor;

package/lib/hacks/cross-fade.js

@@ -6,10 +6,10 @@ function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.crea
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var Value = require('../value');
-
 var list = require('postcss').list;
 
+var Value = require('../value');
+
 var CrossFade =
 /*#__PURE__*/
 function (_Value) {

package/lib/hacks/flex.js

@@ -6,12 +6,12 @@ function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.crea
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+var list = require('postcss').list;
+
 var flexSpec = require('./flex-spec');
 
 var Declaration = require('../declaration');
 
-var list = require('postcss').list;
-
 var Flex =
 /*#__PURE__*/
 function (_Declaration) {

package/lib/hacks/gradient.js

@@ -8,16 +8,16 @@ function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.crea
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+var parser = require('postcss-value-parser');
+
+var range = require('normalize-range');
+
 var OldValue = require('../old-value');
 
 var Value = require('../value');
 
 var utils = require('../utils');
 
-var parser = require('postcss-value-parser');
-
-var range = require('normalize-range');
-
 var IS_DIRECTION = /top|left|right|bottom/gi;
 
 var Gradient =
@@ -398,8 +398,8 @@ function (_Value) {
     this.colorStops(params);
     node.nodes = [];
 
-    for (var _i5 = 0; _i5 < params.length; _i5++) {
-      var param = params[_i5];
+    for (var _i5 = 0, _params = params; _i5 < _params.length; _i5++) {
+      var param = _params[_i5];
       node.nodes = node.nodes.concat(param);
     }
 

package/lib/hacks/mask-composite.js

@@ -0,0 +1,106 @@
+"use strict";
+
+function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _defaults(subClass, superClass); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var Declaration = require('../declaration');
+
+var MaskComposite =
+/*#__PURE__*/
+function (_Declaration) {
+  _inheritsLoose(MaskComposite, _Declaration);
+
+  function MaskComposite() {
+    return _Declaration.apply(this, arguments) || this;
+  }
+
+  var _proto = MaskComposite.prototype;
+
+  /**
+   * Prefix mask-composite for webkit
+   */
+  _proto.insert = function insert(decl, prefix, prefixes) {
+    var isCompositeProp = decl.prop === 'mask-composite';
+    var compositeValues;
+
+    if (isCompositeProp) {
+      compositeValues = decl.value.split(',');
+    } else {
+      compositeValues = decl.value.match(MaskComposite.regexp) || [];
+    }
+
+    compositeValues = compositeValues.map(function (el) {
+      return el.trim();
+    }).filter(function (el) {
+      return el;
+    });
+    var hasCompositeValues = compositeValues.length;
+    var compositeDecl;
+
+    if (hasCompositeValues) {
+      compositeDecl = this.clone(decl);
+      compositeDecl.value = compositeValues.map(function (value) {
+        return MaskComposite.oldValues[value] || value;
+      }).join(', ');
+
+      if (compositeValues.includes('intersect')) {
+        compositeDecl.value += ', xor';
+      }
+
+      compositeDecl.prop = prefix + 'mask-composite';
+    }
+
+    if (isCompositeProp) {
+      if (!hasCompositeValues) {
+        return undefined;
+      }
+
+      if (this.needCascade(decl)) {
+        compositeDecl.raws.before = this.calcBefore(prefixes, decl, prefix);
+      }
+
+      return decl.parent.insertBefore(decl, compositeDecl);
+    }
+
+    var cloned = this.clone(decl);
+    cloned.prop = prefix + cloned.prop;
+
+    if (hasCompositeValues) {
+      cloned.value = cloned.value.replace(MaskComposite.regexp, '');
+    }
+
+    if (this.needCascade(decl)) {
+      cloned.raws.before = this.calcBefore(prefixes, decl, prefix);
+    }
+
+    decl.parent.insertBefore(decl, cloned);
+
+    if (!hasCompositeValues) {
+      return decl;
+    }
+
+    if (this.needCascade(decl)) {
+      compositeDecl.raws.before = this.calcBefore(prefixes, decl, prefix);
+    }
+
+    return decl.parent.insertBefore(decl, compositeDecl);
+  };
+
+  return MaskComposite;
+}(Declaration);
+
+_defineProperty(MaskComposite, "names", ['mask', 'mask-composite']);
+
+_defineProperty(MaskComposite, "oldValues", {
+  add: 'source-over',
+  substract: 'source-out',
+  intersect: 'source-in',
+  exclude: 'xor'
+});
+
+_defineProperty(MaskComposite, "regexp", new RegExp("\\s+(" + Object.keys(MaskComposite.oldValues).join('|') + ")\\b(?!\\))\\s*(?=[,])", 'ig'));
+
+module.exports = MaskComposite;

package/lib/prefixer.js

@@ -1,10 +1,10 @@
 "use strict";
 
+var vendor = require('postcss').vendor;
+
 var Browsers = require('./browsers');
 
 var utils = require('./utils');
-
-var vendor = require('postcss').vendor;
 /**
  * Recursively clone objects
  */
@@ -13,10 +13,8 @@ var vendor = require('postcss').vendor;
 function _clone(obj, parent) {
   var cloned = new obj.constructor();
 
-  var _arr = Object.keys(obj || {});
-
-  for (var _i = 0; _i < _arr.length; _i++) {
-    var i = _arr[_i];
+  for (var _i = 0, _Object$keys = Object.keys(obj || {}); _i < _Object$keys.length; _i++) {
+    var i = _Object$keys[_i];
     var value = obj[i];
 
     if (i === 'parent' && typeof value === 'object') {

package/lib/prefixes.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var vendor = require('postcss').vendor;
+
 var Declaration = require('./declaration');
 
 var Resolution = require('./resolution');
@@ -20,8 +22,6 @@ var Value = require('./value');
 
 var utils = require('./utils');
 
-var vendor = require('postcss').vendor;
-
 Selector.hack(require('./hacks/fullscreen'));
 Selector.hack(require('./hacks/placeholder'));
 Declaration.hack(require('./hacks/flex'));
@@ -39,6 +39,7 @@ Declaration.hack(require('./hacks/align-self'));
 Declaration.hack(require('./hacks/appearance'));
 Declaration.hack(require('./hacks/flex-basis'));
 Declaration.hack(require('./hacks/mask-border'));
+Declaration.hack(require('./hacks/mask-composite'));
 Declaration.hack(require('./hacks/align-items'));
 Declaration.hack(require('./hacks/flex-shrink'));
 Declaration.hack(require('./hacks/break-props'));
@@ -54,6 +55,7 @@ Declaration.hack(require('./hacks/grid-row-align'));
 Declaration.hack(require('./hacks/transform-decl'));
 Declaration.hack(require('./hacks/flex-direction'));
 Declaration.hack(require('./hacks/image-rendering'));
+Declaration.hack(require('./hacks/backdrop-filter'));
 Declaration.hack(require('./hacks/background-clip'));
 Declaration.hack(require('./hacks/text-decoration'));
 Declaration.hack(require('./hacks/justify-content'));

package/lib/processor.js

@@ -441,6 +441,16 @@ function () {
           notHack = true;
         }
 
+        if (decl.prop === '-webkit-box-orient') {
+          var hacks = {
+            'flex-direction': true,
+            'flex-flow': true
+          };
+          if (!decl.parent.some(function (j) {
+            return hacks[j.prop];
+          })) return;
+        }
+
         if (notHack && !_this2.withHackValue(decl)) {
           if (decl.raw('before').indexOf('\n') > -1) {
             _this2.reduceSpaces(decl);

package/lib/resolution.js

@@ -4,14 +4,14 @@ function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaul
 
 function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _defaults(subClass, superClass); }
 
+var n2f = require('num2fraction');
+
 var Prefixer = require('./prefixer');
 
 var utils = require('./utils');
 
-var n2f = require('num2fraction');
-
-var REGEXP = /(min|max)-resolution\s*:\s*\d*\.?\d+(dppx|dpi)/gi;
-var SPLIT = /(min|max)-resolution(\s*:\s*)(\d*\.?\d+)(dppx|dpi)/i;
+var REGEXP = /(min|max)-resolution\s*:\s*\d*\.?\d+(dppx|dpi|x)/gi;
+var SPLIT = /(min|max)-resolution(\s*:\s*)(\d*\.?\d+)(dppx|dpi|x)/i;
 
 var Resolution =
 /*#__PURE__*/

package/lib/supports.js

@@ -1,5 +1,9 @@
 "use strict";
 
+var postcss = require('postcss');
+
+var data = require('caniuse-lite').feature(require('caniuse-lite/data/features/css-featurequeries.js'));
+
 var Browsers = require('./browsers');
 
 var brackets = require('./brackets');
@@ -8,12 +12,8 @@ var Value = require('./value');
 
 var utils = require('./utils');
 
-var postcss = require('postcss');
-
 var supported = [];
 
-var data = require('caniuse-lite').feature(require('caniuse-lite/data/features/css-featurequeries.js'));
-
 for (var browser in data.stats) {
   var versions = data.stats[browser];
 

package/lib/value.js

@@ -4,14 +4,14 @@ function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaul
 
 function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _defaults(subClass, superClass); }
 
+var vendor = require('postcss').vendor;
+
 var Prefixer = require('./prefixer');
 
 var OldValue = require('./old-value');
 
 var utils = require('./utils');
 
-var vendor = require('postcss').vendor;
-
 var Value =
 /*#__PURE__*/
 function (_Prefixer) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autoprefixer",
-  "version": "9.4.10",
+  "version": "9.6.1",
   "description": "Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website",
   "keywords": ["autoprefixer", "css", "prefix", "postcss", "postcss-plugin"],
   "author": "Andrey Sitnik <andrey@sitnik.ru>",
@@ -10,15 +10,19 @@
     "node": ">=6.0.0"
   },
   "dependencies": {
-    "browserslist": "^4.4.2",
-    "caniuse-lite": "^1.0.30000940",
+    "browserslist": "^4.6.3",
+    "caniuse-lite": "^1.0.30000980",
+    "chalk": "^2.4.2",
     "normalize-range": "^0.1.2",
     "num2fraction": "^1.2.2",
-    "postcss": "^7.0.14",
-    "postcss-value-parser": "^3.3.1"
+    "postcss": "^7.0.17",
+    "postcss-value-parser": "^4.0.0"
   },
   "bin": {
     "autoprefixer": "./bin/autoprefixer"
   },
+  "browser": {
+    "chalk": false
+  },
   "main": "lib/autoprefixer"
 }