autoprefixer 8.1.0 → 8.4.1

package/CHANGELOG.md

@@ -1,6 +1,19 @@
 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 8.4.1
+* Fix working in old PostCSS versions (by Diablohu).
+
+## 8.4 “Non in aves, sed in angues”
+* Add `/* autoprefixer: ignore next */` control comment (by Pavel Vostrikov).
+
+## 8.3 “Benigno Numine”
+* Add `@media` support to `grid-template` (by Evgeny Petukhov).
+* Fix `radial-gradient` direction warning (by Gustavo Real).
+
+## 8.2 “Ad Astra per Aspera”
+* Add `color-adjust` (by Sergey Lysenko, Stanislav Botev, and Yuriy Alekseyev).
+
 ## 8.1 “Rex, Familia et Ultio”
 * Add `overscroll-behavior` support.
 * Add `grid-template` shortcut support (by Evgeny Petukhov).

package/README.md

@@ -66,33 +66,6 @@ Because Autoprefixer is a postprocessor for CSS,
 you can also use it with preprocessors such as Sass, Stylus or LESS.
 
 
-### Flexbox, Filters, etc.
-
-Just write normal CSS according to the latest W3C specs and Autoprefixer
-will produce the code for old browsers.
-
-```css
-a {
-    display: flex;
-}
-```
-
-compiles to:
-
-```css
-a {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-}
-```
-
-Autoprefixer has [27 special hacks] to fix web browser differences.
-
-[27 special hacks]: https://github.com/postcss/autoprefixer/tree/master/lib/hacks
-
-
 ### Only Actual Prefixes
 
 Autoprefixer utilizes the most recent data from [Can I Use]
@@ -122,8 +95,8 @@ a {
 ## Browsers
 
 Autoprefixer uses [Browserslist], so you can specify the browsers
-you want to target in your project by queries like `last 2 versions`
-or `> 5%`.
+you want to target in your project by queries like `> 5%`
+(see [Best Practises]).
 
 The best way to provide browsers is `.browserslistrc` config
 or `package.json` with `browserslist` key. Put it in your project root.
@@ -137,6 +110,7 @@ and default value.
 
 [Browserslist docs]: https://github.com/ai/browserslist#queries
 [babel-preset-env]:  https://github.com/babel/babel-preset-env
+[Best Practises]:    https://github.com/browserslist/browserslist#best-practices
 [Browserslist]:      https://github.com/ai/browserslist
 [Stylelint]:         http://stylelint.io/
 
@@ -541,19 +515,27 @@ If you do not need Autoprefixer in some part of your CSS,
 you can use control comments to disable Autoprefixer.
 
 ```css
-a {
+.a {
     transition: 1s; /* it will be prefixed */
 }
 
-b {
+.b {
     /* autoprefixer: off */
     transition: 1s; /* it will not be prefixed */
 }
+
+.c {
+    /* autoprefixer: ignore next */
+    transition: 1s; /* it will not be prefixed */
+    mask: url(image.png); /* it will be prefixed */
+}
 ```
 
-Control comments disable Autoprefixer within the whole rule in which
-you place it. In the above example, Autoprefixer will be disabled
-in the entire `b` rule scope, not only after the comment.
+There is two types of control commens:
+
+* `/* autoprefixer: off */` disable the whole block *before* and after comment.
+* `/* autoprefixer: ignore next */` disable only next property
+  or next rule selector or at-rule parameters (but not rule/at‑rule body).
 
 You can also use comments recursively:
 
@@ -568,7 +550,11 @@ You can also use comments recursively:
 ```
 
 In Sass/SCSS you can use all the disable options above, add an exclamation mark
-in the start of comment: `/*! autoprefixer: off */`.
+in the start of comment:
+
+```scss
+/*! autoprefixer: off */
+```
 
 
 ## Options
@@ -582,11 +568,6 @@ autoprefixer({ cascade: false })
 
 Available options are:
 
-* `browsers` (array): list of browsers query (like `last 2 versions`),
-  which are supported in your project. We recommend to use `browserslist`
-  config or `browserslist` key in `package.json`, rather than this option
-  to share browsers with other tools. See [Browserslist docs] for available
-  queries and default value.
 * `env` (string): environment for Browserslist.
 * `cascade` (boolean): should Autoprefixer use Visual Cascade,
   if CSS is uncompressed. Default: `true`
@@ -602,6 +583,11 @@ Available options are:
   properties. Default is `false`.
 * `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 preactive 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.
 
 Plugin object has `info()` method for debugging purpose.
 

package/data/prefixes.js

@@ -84,7 +84,7 @@ var add = function add(names, data) {
 module.exports = result;
 
 // Border Radius
-f(require('caniuse-lite/data/features/border-radius.js'), function (browsers) {
+f(require('caniuse-lite/data/features/border-radius'), function (browsers) {
     return prefix(['border-radius', 'border-top-left-radius', 'border-top-right-radius', 'border-bottom-right-radius', 'border-bottom-left-radius'], {
         mistakes: ['-khtml-', '-ms-', '-o-'],
         feature: 'border-radius',
@@ -93,7 +93,7 @@ f(require('caniuse-lite/data/features/border-radius.js'), function (browsers) {
 });
 
 // Box Shadow
-f(require('caniuse-lite/data/features/css-boxshadow.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css-boxshadow'), function (browsers) {
     return prefix(['box-shadow'], {
         mistakes: ['-khtml-'],
         feature: 'css-boxshadow',
@@ -102,7 +102,7 @@ f(require('caniuse-lite/data/features/css-boxshadow.js'), function (browsers) {
 });
 
 // Animation
-f(require('caniuse-lite/data/features/css-animation.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css-animation'), function (browsers) {
     return prefix(['animation', 'animation-name', 'animation-duration', 'animation-delay', 'animation-direction', 'animation-fill-mode', 'animation-iteration-count', 'animation-play-state', 'animation-timing-function', '@keyframes'], {
         mistakes: ['-khtml-', '-ms-'],
         feature: 'css-animation',
@@ -111,7 +111,7 @@ f(require('caniuse-lite/data/features/css-animation.js'), function (browsers) {
 });
 
 // Transition
-f(require('caniuse-lite/data/features/css-transitions.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css-transitions'), function (browsers) {
     return prefix(['transition', 'transition-property', 'transition-duration', 'transition-delay', 'transition-timing-function'], {
         mistakes: ['-khtml-', '-ms-'],
         browsers: browsers,
@@ -120,7 +120,7 @@ f(require('caniuse-lite/data/features/css-transitions.js'), function (browsers)
 });
 
 // Transform 2D
-f(require('caniuse-lite/data/features/transforms2d.js'), function (browsers) {
+f(require('caniuse-lite/data/features/transforms2d'), function (browsers) {
     return prefix(['transform', 'transform-origin'], {
         feature: 'transforms2d',
         browsers: browsers
@@ -128,7 +128,7 @@ f(require('caniuse-lite/data/features/transforms2d.js'), function (browsers) {
 });
 
 // Transform 3D
-var transforms3d = require('caniuse-lite/data/features/transforms3d.js');
+var transforms3d = require('caniuse-lite/data/features/transforms3d');
 
 f(transforms3d, function (browsers) {
     prefix(['perspective', 'perspective-origin'], {
@@ -151,7 +151,7 @@ f(transforms3d, { match: /y\sx|y\s#2/ }, function (browsers) {
 });
 
 // Gradients
-var gradients = require('caniuse-lite/data/features/css-gradients.js');
+var gradients = require('caniuse-lite/data/features/css-gradients');
 
 f(gradients, { match: /y\sx/ }, function (browsers) {
     return prefix(['linear-gradient', 'repeating-linear-gradient', 'radial-gradient', 'repeating-radial-gradient'], {
@@ -177,7 +177,7 @@ f(gradients, { match: /a\sx/ }, function (browsers) {
 });
 
 // Box sizing
-f(require('caniuse-lite/data/features/css3-boxsizing.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css3-boxsizing'), function (browsers) {
     return prefix(['box-sizing'], {
         feature: 'css3-boxsizing',
         browsers: browsers
@@ -185,7 +185,7 @@ f(require('caniuse-lite/data/features/css3-boxsizing.js'), function (browsers) {
 });
 
 // Filter Effects
-f(require('caniuse-lite/data/features/css-filters.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css-filters'), function (browsers) {
     return prefix(['filter'], {
         feature: 'css-filters',
         browsers: browsers
@@ -193,7 +193,7 @@ f(require('caniuse-lite/data/features/css-filters.js'), function (browsers) {
 });
 
 // filter() function
-f(require('caniuse-lite/data/features/css-filter-function.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css-filter-function'), function (browsers) {
     return prefix(['filter-function'], {
         props: ['background', 'background-image', 'border-image', 'mask', 'list-style', 'list-style-image', 'content', 'mask-image'],
         feature: 'css-filter-function',
@@ -202,7 +202,7 @@ f(require('caniuse-lite/data/features/css-filter-function.js'), function (browse
 });
 
 // Backdrop-filter
-f(require('caniuse-lite/data/features/css-backdrop-filter.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css-backdrop-filter'), function (browsers) {
     return prefix(['backdrop-filter'], {
         feature: 'css-backdrop-filter',
         browsers: browsers
@@ -210,7 +210,7 @@ f(require('caniuse-lite/data/features/css-backdrop-filter.js'), function (browse
 });
 
 // element() function
-f(require('caniuse-lite/data/features/css-element-function.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css-element-function'), function (browsers) {
     return prefix(['element'], {
         props: ['background', 'background-image', 'border-image', 'mask', 'list-style', 'list-style-image', 'content', 'mask-image'],
         feature: 'css-element-function',
@@ -219,7 +219,7 @@ f(require('caniuse-lite/data/features/css-element-function.js'), function (brows
 });
 
 // Multicolumns
-f(require('caniuse-lite/data/features/multicolumn.js'), function (browsers) {
+f(require('caniuse-lite/data/features/multicolumn'), function (browsers) {
     prefix(['columns', 'column-width', 'column-gap', 'column-rule', 'column-rule-color', 'column-rule-width', 'column-count', 'column-rule-style', 'column-span', 'column-fill'], {
         feature: 'multicolumn',
         browsers: browsers
@@ -235,7 +235,7 @@ f(require('caniuse-lite/data/features/multicolumn.js'), function (browsers) {
 });
 
 // User select
-f(require('caniuse-lite/data/features/user-select-none.js'), function (browsers) {
+f(require('caniuse-lite/data/features/user-select-none'), function (browsers) {
     return prefix(['user-select'], {
         mistakes: ['-khtml-'],
         feature: 'user-select-none',
@@ -244,7 +244,7 @@ f(require('caniuse-lite/data/features/user-select-none.js'), function (browsers)
 });
 
 // Flexible Box Layout
-var flexbox = require('caniuse-lite/data/features/flexbox.js');
+var flexbox = require('caniuse-lite/data/features/flexbox');
 f(flexbox, { match: /a\sx/ }, function (browsers) {
     browsers = browsers.map(function (i) {
         if (/ie|firefox/.test(i)) {
@@ -284,7 +284,7 @@ f(flexbox, { match: /y\sx/ }, function (browsers) {
 });
 
 // calc() unit
-f(require('caniuse-lite/data/features/calc.js'), function (browsers) {
+f(require('caniuse-lite/data/features/calc'), function (browsers) {
     return prefix(['calc'], {
         props: ['*'],
         feature: 'calc',
@@ -293,7 +293,7 @@ f(require('caniuse-lite/data/features/calc.js'), function (browsers) {
 });
 
 // Background options
-f(require('caniuse-lite/data/features/background-img-opts.js'), function (browsers) {
+f(require('caniuse-lite/data/features/background-img-opts'), function (browsers) {
     return prefix(['background-clip', 'background-origin', 'background-size'], {
         feature: 'background-img-opts',
         browsers: browsers
@@ -301,7 +301,7 @@ f(require('caniuse-lite/data/features/background-img-opts.js'), function (browse
 });
 
 // Font feature settings
-f(require('caniuse-lite/data/features/font-feature.js'), function (browsers) {
+f(require('caniuse-lite/data/features/font-feature'), function (browsers) {
     return prefix(['font-feature-settings', 'font-variant-ligatures', 'font-language-override'], {
         feature: 'font-feature',
         browsers: browsers
@@ -309,7 +309,7 @@ f(require('caniuse-lite/data/features/font-feature.js'), function (browsers) {
 });
 
 // CSS font-kerning property
-f(require('caniuse-lite/data/features/font-kerning.js'), function (browsers) {
+f(require('caniuse-lite/data/features/font-kerning'), function (browsers) {
     return prefix(['font-kerning'], {
         feature: 'font-kerning',
         browsers: browsers
@@ -317,7 +317,7 @@ f(require('caniuse-lite/data/features/font-kerning.js'), function (browsers) {
 });
 
 // Border image
-f(require('caniuse-lite/data/features/border-image.js'), function (browsers) {
+f(require('caniuse-lite/data/features/border-image'), function (browsers) {
     return prefix(['border-image'], {
         feature: 'border-image',
         browsers: browsers
@@ -325,7 +325,7 @@ f(require('caniuse-lite/data/features/border-image.js'), function (browsers) {
 });
 
 // Selection selector
-f(require('caniuse-lite/data/features/css-selection.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css-selection'), function (browsers) {
     return prefix(['::selection'], {
         selector: true,
         feature: 'css-selection',
@@ -334,7 +334,7 @@ f(require('caniuse-lite/data/features/css-selection.js'), function (browsers) {
 });
 
 // Placeholder selector
-f(require('caniuse-lite/data/features/css-placeholder.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css-placeholder'), function (browsers) {
     browsers = browsers.map(function (i) {
         var _i$split = i.split(' '),
             name = _i$split[0],
@@ -357,7 +357,7 @@ f(require('caniuse-lite/data/features/css-placeholder.js'), function (browsers)
 });
 
 // Hyphenation
-f(require('caniuse-lite/data/features/css-hyphens.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css-hyphens'), function (browsers) {
     return prefix(['hyphens'], {
         feature: 'css-hyphens',
         browsers: browsers
@@ -365,7 +365,7 @@ f(require('caniuse-lite/data/features/css-hyphens.js'), function (browsers) {
 });
 
 // Fullscreen selector
-var fullscreen = require('caniuse-lite/data/features/fullscreen.js');
+var fullscreen = require('caniuse-lite/data/features/fullscreen');
 
 f(fullscreen, function (browsers) {
     return prefix([':fullscreen'], {
@@ -384,7 +384,7 @@ f(fullscreen, { match: /x(\s#2|$)/ }, function (browsers) {
 });
 
 // Tab size
-f(require('caniuse-lite/data/features/css3-tabsize.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css3-tabsize'), function (browsers) {
     return prefix(['tab-size'], {
         feature: 'css3-tabsize',
         browsers: browsers
@@ -392,7 +392,7 @@ f(require('caniuse-lite/data/features/css3-tabsize.js'), function (browsers) {
 });
 
 // Intrinsic & extrinsic sizing
-f(require('caniuse-lite/data/features/intrinsic-width.js'), function (browsers) {
+f(require('caniuse-lite/data/features/intrinsic-width'), function (browsers) {
     return prefix(['max-content', 'min-content', 'fit-content', 'fill', 'fill-available', 'stretch'], {
         props: ['width', 'min-width', 'max-width', 'height', 'min-height', 'max-height', 'inline-size', 'min-inline-size', 'max-inline-size', 'block-size', 'min-block-size', 'max-block-size', 'grid', 'grid-template', 'grid-template-rows', 'grid-template-columns', 'grid-auto-columns', 'grid-auto-rows'],
         feature: 'intrinsic-width',
@@ -401,7 +401,7 @@ f(require('caniuse-lite/data/features/intrinsic-width.js'), function (browsers)
 });
 
 // Zoom cursors
-f(require('caniuse-lite/data/features/css3-cursors-newer.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css3-cursors-newer'), function (browsers) {
     return prefix(['zoom-in', 'zoom-out'], {
         props: ['cursor'],
         feature: 'css3-cursors-newer',
@@ -410,7 +410,7 @@ f(require('caniuse-lite/data/features/css3-cursors-newer.js'), function (browser
 });
 
 // Grab cursors
-f(require('caniuse-lite/data/features/css3-cursors-grab.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css3-cursors-grab'), function (browsers) {
     return prefix(['grab', 'grabbing'], {
         props: ['cursor'],
         feature: 'css3-cursors-grab',
@@ -419,7 +419,7 @@ f(require('caniuse-lite/data/features/css3-cursors-grab.js'), function (browsers
 });
 
 // Sticky position
-f(require('caniuse-lite/data/features/css-sticky.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css-sticky'), function (browsers) {
     return prefix(['sticky'], {
         props: ['position'],
         feature: 'css-sticky',
@@ -428,7 +428,7 @@ f(require('caniuse-lite/data/features/css-sticky.js'), function (browsers) {
 });
 
 // Pointer Events
-f(require('caniuse-lite/data/features/pointer.js'), function (browsers) {
+f(require('caniuse-lite/data/features/pointer'), function (browsers) {
     return prefix(['touch-action'], {
         feature: 'pointer',
         browsers: browsers
@@ -436,7 +436,7 @@ f(require('caniuse-lite/data/features/pointer.js'), function (browsers) {
 });
 
 // Text decoration
-var decoration = require('caniuse-lite/data/features/text-decoration.js');
+var decoration = require('caniuse-lite/data/features/text-decoration');
 
 f(decoration, function (browsers) {
     return prefix(['text-decoration-style', 'text-decoration-color', 'text-decoration-line', 'text-decoration'], {
@@ -453,7 +453,7 @@ f(decoration, { match: /x.*#[23]/ }, function (browsers) {
 });
 
 // Text Size Adjust
-f(require('caniuse-lite/data/features/text-size-adjust.js'), function (browsers) {
+f(require('caniuse-lite/data/features/text-size-adjust'), function (browsers) {
     return prefix(['text-size-adjust'], {
         feature: 'text-size-adjust',
         browsers: browsers
@@ -461,7 +461,7 @@ f(require('caniuse-lite/data/features/text-size-adjust.js'), function (browsers)
 });
 
 // CSS Masks
-f(require('caniuse-lite/data/features/css-masks.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css-masks'), function (browsers) {
     prefix(['mask-clip', 'mask-composite', 'mask-image', 'mask-origin', 'mask-repeat', 'mask-border-repeat', 'mask-border-source'], {
         feature: 'css-masks',
         browsers: browsers
@@ -473,7 +473,7 @@ f(require('caniuse-lite/data/features/css-masks.js'), function (browsers) {
 });
 
 // CSS clip-path property
-f(require('caniuse-lite/data/features/css-clip-path.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css-clip-path'), function (browsers) {
     return prefix(['clip-path'], {
         feature: 'css-clip-path',
         browsers: browsers
@@ -481,7 +481,7 @@ f(require('caniuse-lite/data/features/css-clip-path.js'), function (browsers) {
 });
 
 // Fragmented Borders and Backgrounds
-f(require('caniuse-lite/data/features/css-boxdecorationbreak.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css-boxdecorationbreak'), function (browsers) {
     return prefix(['box-decoration-break'], {
         feature: 'css-boxdecorationbreak',
         browsers: browsers
@@ -489,7 +489,7 @@ f(require('caniuse-lite/data/features/css-boxdecorationbreak.js'), function (bro
 });
 
 // CSS3 object-fit/object-position
-f(require('caniuse-lite/data/features/object-fit.js'), function (browsers) {
+f(require('caniuse-lite/data/features/object-fit'), function (browsers) {
     return prefix(['object-fit', 'object-position'], {
         feature: 'object-fit',
         browsers: browsers
@@ -497,7 +497,7 @@ f(require('caniuse-lite/data/features/object-fit.js'), function (browsers) {
 });
 
 // CSS Shapes
-f(require('caniuse-lite/data/features/css-shapes.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css-shapes'), function (browsers) {
     return prefix(['shape-margin', 'shape-outside', 'shape-image-threshold'], {
         feature: 'css-shapes',
         browsers: browsers
@@ -505,7 +505,7 @@ f(require('caniuse-lite/data/features/css-shapes.js'), function (browsers) {
 });
 
 // CSS3 text-overflow
-f(require('caniuse-lite/data/features/text-overflow.js'), function (browsers) {
+f(require('caniuse-lite/data/features/text-overflow'), function (browsers) {
     return prefix(['text-overflow'], {
         feature: 'text-overflow',
         browsers: browsers
@@ -513,7 +513,7 @@ f(require('caniuse-lite/data/features/text-overflow.js'), function (browsers) {
 });
 
 // Viewport at-rule
-f(require('caniuse-lite/data/features/css-deviceadaptation.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css-deviceadaptation'), function (browsers) {
     return prefix(['@viewport'], {
         feature: 'css-deviceadaptation',
         browsers: browsers
@@ -521,7 +521,7 @@ f(require('caniuse-lite/data/features/css-deviceadaptation.js'), function (brows
 });
 
 // Resolution Media Queries
-var resolut = require('caniuse-lite/data/features/css-media-resolution.js');
+var resolut = require('caniuse-lite/data/features/css-media-resolution');
 f(resolut, { match: /( x($| )|a #3)/ }, function (browsers) {
     return prefix(['@resolution'], {
         feature: 'css-media-resolution',
@@ -530,7 +530,7 @@ f(resolut, { match: /( x($| )|a #3)/ }, function (browsers) {
 });
 
 // CSS text-align-last
-f(require('caniuse-lite/data/features/css-text-align-last.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css-text-align-last'), function (browsers) {
     return prefix(['text-align-last'], {
         feature: 'css-text-align-last',
         browsers: browsers
@@ -538,7 +538,7 @@ f(require('caniuse-lite/data/features/css-text-align-last.js'), function (browse
 });
 
 // Crisp Edges Image Rendering Algorithm
-var crispedges = require('caniuse-lite/data/features/css-crisp-edges.js');
+var crispedges = require('caniuse-lite/data/features/css-crisp-edges');
 
 f(crispedges, { match: /y x|a x #1/ }, function (browsers) {
     return prefix(['pixelated'], {
@@ -556,7 +556,7 @@ f(crispedges, { match: /a x #2/ }, function (browsers) {
 });
 
 // Logical Properties
-var logicalProps = require('caniuse-lite/data/features/css-logical-props.js');
+var logicalProps = require('caniuse-lite/data/features/css-logical-props');
 
 f(logicalProps, function (browsers) {
     return prefix(['border-inline-start', 'border-inline-end', 'margin-inline-start', 'margin-inline-end', 'padding-inline-start', 'padding-inline-end'], {
@@ -573,7 +573,7 @@ f(logicalProps, { match: /x\s#2/ }, function (browsers) {
 });
 
 // CSS appearance
-var appearance = require('caniuse-lite/data/features/css-appearance.js');
+var appearance = require('caniuse-lite/data/features/css-appearance');
 f(appearance, { match: /#2|x/ }, function (browsers) {
     return prefix(['appearance'], {
         feature: 'css-appearance',
@@ -582,7 +582,7 @@ f(appearance, { match: /#2|x/ }, function (browsers) {
 });
 
 // CSS Scroll snap points
-f(require('caniuse-lite/data/features/css-snappoints.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css-snappoints'), function (browsers) {
     return prefix(['scroll-snap-type', 'scroll-snap-coordinate', 'scroll-snap-destination', 'scroll-snap-points-x', 'scroll-snap-points-y'], {
         feature: 'css-snappoints',
         browsers: browsers
@@ -590,7 +590,7 @@ f(require('caniuse-lite/data/features/css-snappoints.js'), function (browsers) {
 });
 
 // CSS Regions
-f(require('caniuse-lite/data/features/css-regions.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css-regions'), function (browsers) {
     return prefix(['flow-into', 'flow-from', 'region-fragment'], {
         feature: 'css-regions',
         browsers: browsers
@@ -598,7 +598,7 @@ f(require('caniuse-lite/data/features/css-regions.js'), function (browsers) {
 });
 
 // CSS image-set
-f(require('caniuse-lite/data/features/css-image-set.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css-image-set'), function (browsers) {
     return prefix(['image-set'], {
         props: ['background', 'background-image', 'border-image', 'cursor', 'mask', 'mask-image', 'list-style', 'list-style-image', 'content'],
         feature: 'css-image-set',
@@ -607,7 +607,7 @@ f(require('caniuse-lite/data/features/css-image-set.js'), function (browsers) {
 });
 
 // Writing Mode
-var writingMode = require('caniuse-lite/data/features/css-writing-mode.js');
+var writingMode = require('caniuse-lite/data/features/css-writing-mode');
 f(writingMode, { match: /a|x/ }, function (browsers) {
     return prefix(['writing-mode'], {
         feature: 'css-writing-mode',
@@ -616,7 +616,7 @@ f(writingMode, { match: /a|x/ }, function (browsers) {
 });
 
 // Cross-Fade Function
-f(require('caniuse-lite/data/features/css-cross-fade.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css-cross-fade'), function (browsers) {
     return prefix(['cross-fade'], {
         props: ['background', 'background-image', 'border-image', 'mask', 'list-style', 'list-style-image', 'content', 'mask-image'],
         feature: 'css-cross-fade',
@@ -625,7 +625,7 @@ f(require('caniuse-lite/data/features/css-cross-fade.js'), function (browsers) {
 });
 
 // Read Only selector
-f(require('caniuse-lite/data/features/css-read-only-write.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css-read-only-write'), function (browsers) {
     return prefix([':read-only', ':read-write'], {
         selector: true,
         feature: 'css-read-only-write',
@@ -634,7 +634,7 @@ f(require('caniuse-lite/data/features/css-read-only-write.js'), function (browse
 });
 
 // Text Emphasize
-f(require('caniuse-lite/data/features/text-emphasis.js'), function (browsers) {
+f(require('caniuse-lite/data/features/text-emphasis'), function (browsers) {
     return prefix(['text-emphasis', 'text-emphasis-position', 'text-emphasis-style', 'text-emphasis-color'], {
         feature: 'text-emphasis',
         browsers: browsers
@@ -642,7 +642,7 @@ f(require('caniuse-lite/data/features/text-emphasis.js'), function (browsers) {
 });
 
 // CSS Grid Layout
-var grid = require('caniuse-lite/data/features/css-grid.js');
+var grid = require('caniuse-lite/data/features/css-grid');
 
 f(grid, function (browsers) {
     prefix(['display-grid', 'inline-grid'], {
@@ -664,7 +664,7 @@ f(grid, { match: /a x/ }, function (browsers) {
 });
 
 // CSS text-spacing
-f(require('caniuse-lite/data/features/css-text-spacing.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css-text-spacing'), function (browsers) {
     return prefix(['text-spacing'], {
         feature: 'css-text-spacing',
         browsers: browsers
@@ -672,7 +672,7 @@ f(require('caniuse-lite/data/features/css-text-spacing.js'), function (browsers)
 });
 
 // :any-link selector
-f(require('caniuse-lite/data/features/css-any-link.js'), function (browsers) {
+f(require('caniuse-lite/data/features/css-any-link'), function (browsers) {
     return prefix([':any-link'], {
         selector: true,
         feature: 'css-any-link',
@@ -681,7 +681,7 @@ f(require('caniuse-lite/data/features/css-any-link.js'), function (browsers) {
 });
 
 // unicode-bidi
-var bidi = require('caniuse-lite/data/features/css-unicode-bidi.js');
+var bidi = require('caniuse-lite/data/features/css-unicode-bidi');
 
 f(bidi, function (browsers) {
     return prefix(['isolate'], {
@@ -708,10 +708,18 @@ f(bidi, { match: /y x/ }, function (browsers) {
 });
 
 // overscroll-behavior selector
-var over = require('caniuse-lite/data/features/css-overscroll-behavior.js');
+var over = require('caniuse-lite/data/features/css-overscroll-behavior');
 f(over, { match: /a #1/ }, function (browsers) {
     return prefix(['overscroll-behavior'], {
         feature: 'css-overscroll-behavior',
         browsers: browsers
     });
+});
+
+// color-adjust
+f(require('caniuse-lite/data/features/css-color-adjust'), function (browsers) {
+    return prefix(['color-adjust'], {
+        feature: 'css-color-adjust',
+        browsers: browsers
+    });
 });

package/lib/hacks/color-adjust.js

@@ -0,0 +1,48 @@
+'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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+var Declaration = require('../declaration');
+
+var ColorAdjust = function (_Declaration) {
+    _inherits(ColorAdjust, _Declaration);
+
+    function ColorAdjust() {
+        _classCallCheck(this, ColorAdjust);
+
+        return _possibleConstructorReturn(this, _Declaration.apply(this, arguments));
+    }
+
+    /**
+     * Change property name for WebKit-based browsers
+     */
+    ColorAdjust.prototype.prefixed = function prefixed(prop, prefix) {
+        return prefix + 'print-color-adjust';
+    };
+
+    /**
+     * Return property name by spec
+     */
+
+
+    ColorAdjust.prototype.normalize = function normalize() {
+        return 'color-adjust';
+    };
+
+    return ColorAdjust;
+}(Declaration);
+
+Object.defineProperty(ColorAdjust, 'names', {
+    enumerable: true,
+    writable: true,
+    value: ['color-adjust', 'print-color-adjust']
+});
+
+
+module.exports = ColorAdjust;

package/lib/hacks/grid-template.js

@@ -45,14 +45,16 @@ var GridTemplate = function (_Declaration) {
         if (rows && columns || hasAreas) {
             decl.cloneBefore({
                 prop: '-ms-grid-rows',
-                value: rows
+                value: rows,
+                raws: {}
             });
         }
 
         if (columns) {
             decl.cloneBefore({
                 prop: '-ms-grid-columns',
-                value: columns
+                value: columns,
+                raws: {}
             });
         }
 

package/lib/hacks/grid-utils.js

@@ -215,17 +215,38 @@ function parseTemplate(decl) {
 
 // Insert parsed grid areas
 
-function getRoot(parent) {
-    if (parent.type === 'atrule' || !parent.parent) {
+function getMSDecls(area) {
+    return [].concat({
+        prop: '-ms-grid-row',
+        value: String(area.row.start)
+    }, area.row.span > 1 ? {
+        prop: '-ms-grid-row-span',
+        value: String(area.row.span)
+    } : [], {
+        prop: '-ms-grid-column',
+        value: String(area.column.start)
+    }, area.column.span > 1 ? {
+        prop: '-ms-grid-column-span',
+        value: String(area.column.span)
+    } : []);
+}
+
+function getParentMedia(parent) {
+    if (parent.type === 'atrule' && parent.name === 'media') {
         return parent;
+    } else if (!parent.parent) {
+        return false;
     }
-    return getRoot(parent.parent);
+    return getParentMedia(parent.parent);
 }
 
 function insertAreas(areas, decl, result) {
     var missed = Object.keys(areas);
 
-    getRoot(decl.parent).walkDecls('grid-area', function (gridArea) {
+    var parentMedia = getParentMedia(decl.parent);
+
+    decl.root().walkDecls('grid-area', function (gridArea) {
+
         var value = gridArea.value;
         var area = areas[value];
 
@@ -233,32 +254,47 @@ function insertAreas(areas, decl, result) {
             return e !== value;
         });
 
+        if (area && parentMedia) {
+
+            // skip if grid-template-areas already prefixed in media
+            if (parentMedia.some(function (i) {
+                return i.selector === gridArea.parent.selector;
+            })) {
+                return undefined;
+            }
+
+            // create new rule
+            var rule = decl.parent.clone({
+                selector: gridArea.parent.selector
+            });
+            rule.removeAll();
+
+            // insert prefixed decls in new rule
+            getMSDecls(area).forEach(function (i) {
+                return rule.append(Object.assign(i, {
+                    raws: {
+                        between: gridArea.raws.between
+                    }
+                }));
+            });
+
+            // insert new rule with prefixed decl to existing media
+            parentMedia.append(rule);
+
+            return undefined;
+        }
+
         if (area) {
             gridArea.parent.walkDecls(/-ms-grid-(row|column)/, function (d) {
                 d.remove();
             });
 
-            gridArea.cloneBefore({
-                prop: '-ms-grid-row',
-                value: String(area.row.start)
+            // insert prefixed decls before grid-area
+            getMSDecls(area).forEach(function (i) {
+                return gridArea.cloneBefore(i);
             });
-            if (area.row.span > 1) {
-                gridArea.cloneBefore({
-                    prop: '-ms-grid-row-span',
-                    value: String(area.row.span)
-                });
-            }
-            gridArea.cloneBefore({
-                prop: '-ms-grid-column',
-                value: String(area.column.start)
-            });
-            if (area.column.span > 1) {
-                gridArea.cloneBefore({
-                    prop: '-ms-grid-column-span',
-                    value: String(area.column.span)
-                });
-            }
         }
+
         return undefined;
     });
 

package/lib/prefixes.js

@@ -55,6 +55,7 @@ Declaration.hack(require('./hacks/grid-column-align'));
 Declaration.hack(require('./hacks/overscroll-behavior'));
 Declaration.hack(require('./hacks/grid-template-areas'));
 Declaration.hack(require('./hacks/text-emphasis-position'));
+Declaration.hack(require('./hacks/color-adjust'));
 
 Value.hack(require('./hacks/gradient'));
 Value.hack(require('./hacks/intrinsic'));

package/lib/processor.js

@@ -6,6 +6,8 @@ var Value = require('./value');
 
 var OLD_LINEAR = /(^|[^-])linear-gradient\(\s*(top|left|right|bottom)/i;
 var OLD_RADIAL = /(^|[^-])radial-gradient\(\s*\d+(\w*|%)\s+\d+(\w*|%)\s*,/i;
+var RADIAL_BLOCK = /\(((?:[^)(]+|\((?:[^)(]+|\([^)(]*\))*\))*)\)/i;
+var IGNORE_NEXT = /(!\s*)?autoprefixer:\s*ignore\s+next/i;
 
 var SIZES = ['width', 'height', 'min-width', 'max-width', 'min-height', 'max-height', 'inline-size', 'min-inline-size', 'max-inline-size', 'block-size', 'min-block-size', 'max-block-size'];
 
@@ -76,10 +78,16 @@ var Processor = function () {
             if (decl.value.indexOf('radial-gradient') !== -1) {
                 if (OLD_RADIAL.test(decl.value)) {
                     result.warn('Gradient has outdated direction syntax. ' + 'New syntax is like `closest-side at 0 0` ' + 'instead of `0 0, closest-side`.', { node: decl });
-                } else if (/[^-]cover/.test(decl.value)) {
-                    result.warn('Gradient has outdated direction syntax. ' + 'Replace `cover` to `farthest-corner`.', { node: decl });
-                } else if (/[^-]contain/.test(decl.value)) {
-                    result.warn('Gradient has outdated direction syntax. ' + 'Replace `contain` to `closest-side`.', { node: decl });
+                } else {
+                    var match = decl.value.match(RADIAL_BLOCK);
+
+                    if (match) {
+                        if (/cover/.test(match[1])) {
+                            result.warn('Gradient has outdated direction syntax. ' + 'Replace `cover` to `farthest-corner`.', { node: decl });
+                        } else if (/contain/.test(match[1])) {
+                            result.warn('Gradient has outdated direction syntax. ' + 'Replace `contain` to `closest-side`.', { node: decl });
+                        }
+                    }
                 }
             }
             if (decl.prop === 'text-emphasis-position') {
@@ -330,10 +338,21 @@ var Processor = function () {
 
     Processor.prototype.disabled = function disabled(node, result) {
         if (!node) return false;
+
         if (node._autoprefixerDisabled !== undefined) {
             return node._autoprefixerDisabled;
         }
 
+        if (node.parent) {
+            var p = node.prev();
+            if (p && p.type === 'comment' && IGNORE_NEXT.test(p.text)) {
+                node._autoprefixerDisabled = true;
+                node._autoprefixerSelfDisabled = true;
+                return true;
+            }
+        }
+
+        var value = null;
         if (node.nodes) {
             var status = undefined;
             node.each(function (i) {
@@ -347,19 +366,24 @@ var Processor = function () {
                 }
             });
 
-            var value = false;
             if (status !== undefined) {
                 value = !status;
-            } else if (node.parent) {
-                value = this.disabled(node.parent, result);
             }
-
-            node._autoprefixerDisabled = value;
-            return node._autoprefixerDisabled;
-        } else {
-            node._autoprefixerDisabled = this.disabled(node.parent, result);
-            return node._autoprefixerDisabled;
         }
+        if (!node.nodes || value === null) {
+            if (node.parent) {
+                var isParentDisabled = this.disabled(node.parent, result);
+                if (node.parent._autoprefixerSelfDisabled === true) {
+                    value = false;
+                } else {
+                    value = isParentDisabled;
+                }
+            } else {
+                value = false;
+            }
+        }
+        node._autoprefixerDisabled = value;
+        return value;
     };
 
     /**

package/package.json

@@ -1,23 +1,17 @@
 {
   "name": "autoprefixer",
-  "version": "8.1.0",
+  "version": "8.4.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"
-  ],
+  "keywords": ["autoprefixer", "css", "prefix", "postcss", "postcss-plugin"],
   "author": "Andrey Sitnik <andrey@sitnik.ru>",
   "license": "MIT",
   "repository": "postcss/autoprefixer",
   "dependencies": {
-    "browserslist": "^3.1.1",
-    "caniuse-lite": "^1.0.30000810",
+    "browserslist": "^3.2.6",
+    "caniuse-lite": "^1.0.30000832",
     "normalize-range": "^0.1.2",
     "num2fraction": "^1.2.2",
-    "postcss": "^6.0.19",
+    "postcss": "^6.0.22",
     "postcss-value-parser": "^3.2.3"
   },
   "bin": {