autoprefixer 8.2.0 → 8.5.0

package/AUTHORS

@@ -46,6 +46,7 @@ Darius
 David Narbutovich <vamnemne@gmail.com>
 David Pike <david@evolution7.com.au>
 Denis Sokolov <denis@sokolov.cc>
+Diablohu <https://github.com/Diablohu>
 Dominik Porada <dominik@porada.co>
 Dominik Schilling <dominikschilling+git@gmail.com>
 dotch <ch.weiss@hotmail.de>
@@ -61,10 +62,13 @@ Forrest York <https://github.com/badisa>
 Google Inc.
 Gregory Eremin <magnolia_fan@me.com>
 GU Yiling <justice360@gmail.com>
+Gustavo Real <https://github.com/kotfire>
 Hallvord R. M. Steen <hallvord@hallvord.com>
 heady <https://github.com/heady>
+Huáng Jùnliàng <https://github.com/JLHwung>
 Iain Beeston <iain.beeston@gmail.com>
 Igor Adamenko <https://github.com/igoradamenko>
+Filipe W. Lima <fwl.ufpe@gmail.com>
 Jack Moore <hello@jacklmoore.com>
 Jason Kuhrt <jasonkuhrt@me.com>
 Jeff Escalante <hello@jenius.me>
@@ -98,15 +102,19 @@ Morton Fox <github@qslw.com>
 mvasilkov <mvasilkov@gmail.com>
 Nick Howes <nick@nickhowes.co.uk>
 Nick Marchenko <n30n1ck@gmail.com>
+Nic Nilov <https://github.com/nicnilov>
 Nick Schonning <nschonni@gmail.com>
 nickspielgist <dev@nickspiel.me>
 Niels Dequeker <niels.dequeker@gmail.com>
 Nikolay Burlov <kohgpat@gmail.com>
+Oleh Aloshkin <olegaleshkin@gmail.com>
 Oleksandr Sergiienko <sigerello@gmail.com>
 Pavel Pustovalov <pustovalov.pavel@gmail.com>
+Pavel Vostrikov <mail@vostrik.com>
 Paul Statezny <Paulstatezny@gmail.com>
 Peter van Westen <info@regularlabs.com>
 Peter Zotov <whitequark@whitequark.org>
+Phani Kandula <phani.kandula@gmail.com>
 Phil Dokas <phil@jetless.org>
 Rafael Silva <rafael@rafaelsilva.net>
 Ray Lehnhoff <raymond.lehnhoff@gmail.com>
@@ -117,16 +125,18 @@ Richard Wang <richardwa@google.com>
 Rob Howell <rob@robhowell.com>
 Roland Warmerdam <rowno@webspirited.com>
 Roman Dvornov <rdvornov@gmail.com>
-Ryan Zimmerman
+Ryan Zimmerman <https://github.com/RyanZim>
 Sami Suo-Heikki <suoheikki.sami@gmail.com>
 Sasha Koss <koss@nocorp.me>
 Sean Anderson <Sean.Palmer.Anderson@gmail.com>
 Sergey Belov <peimei@ya.ru>
 Sergey Leschina <mail@putnik.ws>
+Sergey Lysenko <soulwish.ls@gmail.com>
 sethjgore <sethjgore@gmail.com>
 Šime Vidas <sime.vidas@gmail.com>
 Simon Lydell <simon.lydell@gmail.com>
 Sindre Sorhus <sindresorhus@gmail.com>
+Stanislav <botev.st@gmail.com>
 Stephen Edgar <stephen@netweb.com.au>
 Steve Mao <https://github.com/stevemao>
 Stig Otnes Kolstad <stig@stigok.net>
@@ -141,6 +151,7 @@ Vishnu Ravi <vishnu@vishnu.io>
 Vladimir Pouzanov <farcaller@gmail.com>
 vladkens <vladkens@yandex.ru>
 Yet Another Minion <yam@thinkalexandria.com>
+Yuriy Alekseyev <dev.yuriy.a@gmail.com>
 Даниил Пронин <mail@grawl.ru>
 一丝 <jie.lijie@alibaba-inc.com>
 刘祺 <gucong@gmail.com>

package/CHANGELOG.md

@@ -1,6 +1,21 @@
 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 8.5 “Muito Nobre e Sempre Leal”
+* Add `grid-gap` support (by Evgeny Petukhov).
+* Fix radial gradients direction fix.
+* Fix docs (by Phani Kandula and Huáng Jùnliàng).
+
+## 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).
 

package/README.md

@@ -95,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.
@@ -110,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/
 
@@ -501,7 +502,7 @@ You can use these plugin options to disable some of the Autoprefixer's features.
   versions of specification.
 * `remove: false` will disable cleaning outdated prefixes.
 
-You shoud set them to the plugin:
+You should set them to the plugin:
 
 ```js
 autoprefixer({ grid: true });
@@ -514,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 are two types of control comments:
+
+* `/* 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:
 
@@ -541,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
@@ -555,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`
@@ -575,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 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.
 
 Plugin object has `info()` method for debugging purpose.
 

package/lib/hacks/gradient.js

@@ -199,6 +199,42 @@ var Gradient = function (_Value) {
         return params;
     };
 
+    /**
+     * Look for at word
+     */
+
+
+    Gradient.prototype.isRadial = function isRadial(params) {
+        var state = 'before';
+        for (var _iterator2 = params, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
+            var _ref2;
+
+            if (_isArray2) {
+                if (_i2 >= _iterator2.length) break;
+                _ref2 = _iterator2[_i2++];
+            } else {
+                _i2 = _iterator2.next();
+                if (_i2.done) break;
+                _ref2 = _i2.value;
+            }
+
+            var param = _ref2;
+
+            if (state === 'before' && param.type === 'space') {
+                state = 'at';
+            } else if (state === 'at' && param.value === 'at') {
+                state = 'after';
+            } else if (state === 'after' && param.type === 'space') {
+                return true;
+            } else if (param.type === 'div') {
+                break;
+            } else {
+                state = 'before';
+            }
+        }
+        return false;
+    };
+
     /**
      * Change new direction to old
      */
@@ -210,7 +246,7 @@ var Gradient = function (_Value) {
                 this.fixDirection(params);
             } else if (params[0].value.indexOf('deg') !== -1) {
                 this.fixAngle(params);
-            } else if (params[2] && params[2].value === 'at') {
+            } else if (this.isRadial(params)) {
                 this.fixRadial(params);
             }
         }
@@ -225,19 +261,19 @@ var Gradient = function (_Value) {
     Gradient.prototype.fixDirection = function fixDirection(params) {
         params.splice(0, 2);
 
-        for (var _iterator2 = params, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-            var _ref2;
+        for (var _iterator3 = params, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
+            var _ref3;
 
-            if (_isArray2) {
-                if (_i2 >= _iterator2.length) break;
-                _ref2 = _iterator2[_i2++];
+            if (_isArray3) {
+                if (_i3 >= _iterator3.length) break;
+                _ref3 = _iterator3[_i3++];
             } else {
-                _i2 = _iterator2.next();
-                if (_i2.done) break;
-                _ref2 = _i2.value;
+                _i3 = _iterator3.next();
+                if (_i3.done) break;
+                _ref3 = _i3.value;
             }
 
-            var param = _ref2;
+            var param = _ref3;
 
             if (param.type === 'div') {
                 break;
@@ -267,12 +303,28 @@ var Gradient = function (_Value) {
 
 
     Gradient.prototype.fixRadial = function fixRadial(params) {
-        var first = params[0];
+        var first = [];
         var second = [];
-        var i = void 0;
+        var a = void 0,
+            b = void 0,
+            c = void 0,
+            i = void 0,
+            next = void 0;
+
+        for (i = 0; i < params.length - 2; i++) {
+            a = params[i];
+            b = params[i + 1];
+            c = params[i + 2];
+            if (a.type === 'space' && b.value === 'at' && c.type === 'space') {
+                next = i + 3;
+                break;
+            } else {
+                first.push(a);
+            }
+        }
 
         var div = void 0;
-        for (i = 4; i < params.length; i++) {
+        for (i = next; i < params.length; i++) {
             if (params[i].type === 'div') {
                 div = params[i];
                 break;
@@ -281,7 +333,7 @@ var Gradient = function (_Value) {
             }
         }
 
-        params.splice.apply(params, [0, i].concat(second, [div, first]));
+        params.splice.apply(params, [0, i].concat(second, [div], first));
     };
 
     Gradient.prototype.revertDirection = function revertDirection(word) {
@@ -318,19 +370,19 @@ var Gradient = function (_Value) {
         }
 
         var params = [[]];
-        for (var _iterator3 = nodes, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-            var _ref3;
+        for (var _iterator4 = nodes, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
+            var _ref4;
 
-            if (_isArray3) {
-                if (_i3 >= _iterator3.length) break;
-                _ref3 = _iterator3[_i3++];
+            if (_isArray4) {
+                if (_i4 >= _iterator4.length) break;
+                _ref4 = _iterator4[_i4++];
             } else {
-                _i3 = _iterator3.next();
-                if (_i3.done) break;
-                _ref3 = _i3.value;
+                _i4 = _iterator4.next();
+                if (_i4.done) break;
+                _ref4 = _i4.value;
             }
 
-            var i = _ref3;
+            var i = _ref4;
 
             params[params.length - 1].push(i);
             if (i.type === 'div' && i.value === ',') {
@@ -342,19 +394,19 @@ var Gradient = function (_Value) {
         this.colorStops(params);
 
         node.nodes = [];
-        for (var _iterator4 = params, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-            var _ref4;
+        for (var _iterator5 = params, _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
+            var _ref5;
 
-            if (_isArray4) {
-                if (_i4 >= _iterator4.length) break;
-                _ref4 = _iterator4[_i4++];
+            if (_isArray5) {
+                if (_i5 >= _iterator5.length) break;
+                _ref5 = _iterator5[_i5++];
             } else {
-                _i4 = _iterator4.next();
-                if (_i4.done) break;
-                _ref4 = _i4.value;
+                _i5 = _iterator5.next();
+                if (_i5.done) break;
+                _ref5 = _i5.value;
             }
 
-            var param = _ref4;
+            var param = _ref5;
 
             node.nodes = node.nodes.concat(param);
         }
@@ -377,19 +429,19 @@ var Gradient = function (_Value) {
             return params.unshift([{ type: 'word', value: this.oldDirections.bottom }, div]);
         } else {
             var _words = [];
-            for (var _iterator5 = params[0].slice(2), _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
-                var _ref5;
+            for (var _iterator6 = params[0].slice(2), _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) {
+                var _ref6;
 
-                if (_isArray5) {
-                    if (_i5 >= _iterator5.length) break;
-                    _ref5 = _iterator5[_i5++];
+                if (_isArray6) {
+                    if (_i6 >= _iterator6.length) break;
+                    _ref6 = _iterator6[_i6++];
                 } else {
-                    _i5 = _iterator5.next();
-                    if (_i5.done) break;
-                    _ref5 = _i5.value;
+                    _i6 = _iterator6.next();
+                    if (_i6.done) break;
+                    _ref6 = _i6.value;
                 }
 
-                var node = _ref5;
+                var node = _ref6;
 
                 if (node.type === 'word') {
                     _words.push(node.value.toLowerCase());
@@ -410,19 +462,19 @@ var Gradient = function (_Value) {
 
 
     Gradient.prototype.cloneDiv = function cloneDiv(params) {
-        for (var _iterator6 = params, _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) {
-            var _ref6;
+        for (var _iterator7 = params, _isArray7 = Array.isArray(_iterator7), _i7 = 0, _iterator7 = _isArray7 ? _iterator7 : _iterator7[Symbol.iterator]();;) {
+            var _ref7;
 
-            if (_isArray6) {
-                if (_i6 >= _iterator6.length) break;
-                _ref6 = _iterator6[_i6++];
+            if (_isArray7) {
+                if (_i7 >= _iterator7.length) break;
+                _ref7 = _iterator7[_i7++];
             } else {
-                _i6 = _iterator6.next();
-                if (_i6.done) break;
-                _ref6 = _i6.value;
+                _i7 = _iterator7.next();
+                if (_i7.done) break;
+                _ref7 = _i7.value;
             }
 
-            var i = _ref6;
+            var i = _ref7;
 
             if (i.type === 'div' && i.value === ',') {
                 return i;

package/lib/hacks/grid-rows-columns.js

@@ -9,7 +9,10 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 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 utils = require('./grid-utils');
+
+var _require = require('./grid-utils'),
+    prefixTrackProp = _require.prefixTrackProp,
+    prefixTrackValue = _require.prefixTrackValue;
 
 var GridRowsColumns = function (_Declaration) {
     _inherits(GridRowsColumns, _Declaration);
@@ -25,7 +28,7 @@ var GridRowsColumns = function (_Declaration) {
      */
     GridRowsColumns.prototype.prefixed = function prefixed(prop, prefix) {
         if (prefix === '-ms-') {
-            return prefix + prop.replace('template-', '');
+            return prefixTrackProp({ prop: prop, prefix: prefix });
         } else {
             return _Declaration.prototype.prefixed.call(this, prop, prefix);
         }
@@ -47,7 +50,7 @@ var GridRowsColumns = function (_Declaration) {
 
     GridRowsColumns.prototype.set = function set(decl, prefix) {
         if (prefix === '-ms-' && decl.value.indexOf('repeat(') !== -1) {
-            decl.value = utils.changeRepeat(decl.value);
+            decl.value = prefixTrackValue({ value: decl.value });
         }
         return _Declaration.prototype.set.call(this, decl, prefix);
     };

package/lib/hacks/grid-template-areas.js

@@ -12,7 +12,11 @@ var Declaration = require('../declaration');
 
 var _require = require('./grid-utils'),
     parseGridAreas = _require.parseGridAreas,
-    insertAreas = _require.insertAreas;
+    insertAreas = _require.insertAreas,
+    prefixTrackProp = _require.prefixTrackProp,
+    prefixTrackValue = _require.prefixTrackValue,
+    getGridGap = _require.getGridGap,
+    warnGridGap = _require.warnGridGap;
 
 function getGridRows(tpl) {
     return tpl.trim().slice(1, -1).split(/['"]\s*['"]?/g);
@@ -33,7 +37,65 @@ var GridTemplateAreas = function (_Declaration) {
     GridTemplateAreas.prototype.insert = function insert(decl, prefix, prefixes, result) {
         if (prefix !== '-ms-') return _Declaration.prototype.insert.call(this, decl, prefix, prefixes);
 
-        var areas = parseGridAreas(getGridRows(decl.value));
+        var hasColumns = false;
+        var hasRows = false;
+        var parent = decl.parent;
+        var gap = getGridGap(decl);
+
+        // remove already prefixed rows and columns
+        // without gutter to prevent doubling prefixes
+        parent.walkDecls(/-ms-grid-(rows|columns)/, function (i) {
+            return i.remove();
+        });
+
+        // add empty tracks to rows and columns
+        parent.walkDecls(/grid-template-(rows|columns)/, function (trackDecl) {
+            if (trackDecl.prop === 'grid-template-rows') {
+                hasRows = true;
+                var prop = trackDecl.prop,
+                    value = trackDecl.value;
+
+                trackDecl.cloneBefore({
+                    prop: prefixTrackProp({ prop: prop, prefix: prefix }),
+                    value: prefixTrackValue({ value: value, gap: gap.row })
+                });
+            } else {
+                hasColumns = true;
+                var _prop = trackDecl.prop,
+                    _value = trackDecl.value;
+
+                trackDecl.cloneBefore({
+                    prop: prefixTrackProp({ prop: _prop, prefix: prefix }),
+                    value: prefixTrackValue({ value: _value, gap: gap.column })
+                });
+            }
+        });
+
+        var gridRows = getGridRows(decl.value);
+
+        if (hasColumns && !hasRows && gap.row && gridRows.length > 1) {
+            decl.cloneBefore({
+                prop: '-ms-grid-rows',
+                value: prefixTrackValue({
+                    value: 'repeat(' + gridRows.length + ', auto)',
+                    gap: gap.row
+                }),
+                raws: {}
+            });
+        }
+
+        // warnings
+        warnGridGap({
+            gap: gap,
+            hasColumns: hasColumns,
+            decl: decl,
+            result: result
+        });
+
+        var areas = parseGridAreas({
+            rows: gridRows,
+            gap: gap
+        });
 
         insertAreas(areas, decl, result);
 

package/lib/hacks/grid-template.js

@@ -12,7 +12,9 @@ var Declaration = require('../declaration');
 
 var _require = require('./grid-utils'),
     parseTemplate = _require.parseTemplate,
-    insertAreas = _require.insertAreas;
+    insertAreas = _require.insertAreas,
+    getGridGap = _require.getGridGap,
+    warnGridGap = _require.warnGridGap;
 
 var GridTemplate = function (_Declaration) {
     _inherits(GridTemplate, _Declaration);
@@ -35,24 +37,40 @@ var GridTemplate = function (_Declaration) {
             return undefined;
         }
 
-        var _parseTemplate = parseTemplate(decl),
+        var gap = getGridGap(decl);
+
+        var _parseTemplate = parseTemplate({
+            decl: decl,
+            gap: gap
+        }),
             rows = _parseTemplate.rows,
             columns = _parseTemplate.columns,
             areas = _parseTemplate.areas;
 
         var hasAreas = Object.keys(areas).length > 0;
+        var hasRows = Boolean(rows);
+        var hasColumns = Boolean(columns);
+
+        warnGridGap({
+            gap: gap,
+            hasColumns: hasColumns,
+            decl: decl,
+            result: result
+        });
 
-        if (rows && columns || hasAreas) {
+        if (hasRows && hasColumns || hasAreas) {
             decl.cloneBefore({
                 prop: '-ms-grid-rows',
-                value: rows
+                value: rows,
+                raws: {}
             });
         }
 
-        if (columns) {
+        if (hasColumns) {
             decl.cloneBefore({
                 prop: '-ms-grid-columns',
-                value: columns
+                value: columns,
+                raws: {}
             });
         }
 

package/lib/hacks/grid-utils.js

@@ -92,36 +92,71 @@ function insertDecl(decl, prop, value) {
     }
 }
 
-// Transform repeat
+// Track transforms
 
-function transformRepeat(_ref2) {
-    var nodes = _ref2.nodes;
+function prefixTrackProp(_ref2) {
+    var prop = _ref2.prop,
+        prefix = _ref2.prefix;
 
-    var repeat = nodes.reduce(function (result, node) {
+    return prefix + prop.replace('template-', '');
+}
+
+function transformRepeat(_ref3, _ref4) {
+    var nodes = _ref3.nodes;
+    var gap = _ref4.gap;
+
+    var _nodes$reduce = nodes.reduce(function (result, node) {
         if (node.type === 'div' && node.value === ',') {
-            result.key = 'function';
+            result.key = 'size';
         } else {
             result[result.key].push(parser.stringify(node));
         }
         return result;
     }, {
         key: 'count',
-        function: [],
+        size: [],
         count: []
-    });
-    return '(' + repeat.function.join('') + ')[' + repeat.count.join('') + ']';
+    }),
+        count = _nodes$reduce.count,
+        size = _nodes$reduce.size;
+
+    if (gap) {
+        var val = [];
+        for (var i = 1; i <= count; i++) {
+            if (gap && i > 1) {
+                val.push(gap);
+            }
+            val.push(size.join());
+        }
+        return val.join(' ');
+    }
+
+    return '(' + size.join('') + ')[' + count.join('') + ']';
 }
 
-function changeRepeat(value) {
-    var result = parser(value).nodes.map(function (i) {
-        if (i.type === 'function' && i.value === 'repeat') {
-            return {
+function prefixTrackValue(_ref5) {
+    var value = _ref5.value,
+        gap = _ref5.gap;
+
+    var result = parser(value).nodes.reduce(function (nodes, node) {
+        if (node.type === 'function' && node.value === 'repeat') {
+            return nodes.concat({
                 type: 'word',
-                value: transformRepeat(i)
-            };
+                value: transformRepeat(node, { gap: gap })
+            });
         }
-        return i;
-    });
+        if (gap && node.type === 'space') {
+            return nodes.concat({
+                type: 'space',
+                value: ' '
+            }, {
+                type: 'word',
+                value: gap
+            }, node);
+        }
+        return nodes.concat(node);
+    }, []);
+
     return parser.stringify(result);
 }
 
@@ -137,12 +172,24 @@ function getColumns(line) {
     return line.trim().split(/\s+/g);
 }
 
-function parseGridAreas(rows) {
+function parseGridAreas(_ref6) {
+    var rows = _ref6.rows,
+        gap = _ref6.gap;
+
     return rows.reduce(function (areas, line, rowIndex) {
+
+        if (gap.row) rowIndex *= 2;
+
         if (line.trim() === '') return areas;
+
         getColumns(line).forEach(function (area, columnIndex) {
+
             if (DOTS.test(area)) return;
+
+            if (gap.column) columnIndex *= 2;
+
             if (typeof areas[area] === 'undefined') {
+
                 areas[area] = {
                     column: track(columnIndex + 1, columnIndex + 2),
                     row: track(rowIndex + 1, rowIndex + 2)
@@ -162,6 +209,7 @@ function parseGridAreas(rows) {
                 row.span = row.end - row.start;
             }
         });
+
         return areas;
     }, {});
 }
@@ -172,7 +220,10 @@ function testTrack(node) {
     return node.type === 'word' && /^\[.+\]$/.test(node.value);
 }
 
-function parseTemplate(decl) {
+function parseTemplate(_ref7) {
+    var decl = _ref7.decl,
+        gap = _ref7.gap;
+
     var gridTemplate = parser(decl.value).nodes.reduce(function (result, node) {
         var type = node.type,
             value = node.value;
@@ -187,11 +238,7 @@ function parseTemplate(decl) {
 
         // values and function
         if (type === 'word' || type === 'function') {
-            if (type === 'function' && value === 'repeat') {
-                result[result.key].push(transformRepeat(node));
-            } else {
-                result[result.key].push(parser.stringify(node));
-            }
+            result[result.key].push(parser.stringify(node));
         }
 
         // devider(/)
@@ -206,26 +253,57 @@ function parseTemplate(decl) {
         rows: [],
         areas: []
     });
+
     return {
-        areas: parseGridAreas(gridTemplate.areas),
-        columns: gridTemplate.columns.join(' '),
-        rows: gridTemplate.rows.join(' ')
+        areas: parseGridAreas({
+            rows: gridTemplate.areas,
+            gap: gap
+        }),
+        columns: prefixTrackValue({
+            value: gridTemplate.columns.join(' '),
+            gap: gap.column
+        }),
+        rows: prefixTrackValue({
+            value: gridTemplate.rows.join(' '),
+            gap: gap.row
+        })
     };
 }
 
 // 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 +311,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;
     });
 
@@ -267,12 +360,50 @@ function insertAreas(areas, decl, result) {
     }
 }
 
+// Gap utils
+
+function getGridGap(decl) {
+
+    var gap = {};
+
+    // try to find gap
+    decl.parent.walkDecls(/grid(-(row|column))?-gap/, function (_ref8) {
+        var prop = _ref8.prop,
+            value = _ref8.value;
+
+        if (prop === 'grid-gap') {
+            gap.column = value;
+            gap.row = value;
+        }
+        if (prop === 'grid-row-gap') gap.row = value;
+        if (prop === 'grid-column-gap') gap.column = value;
+    });
+
+    return gap;
+}
+
+function warnGridGap(_ref9) {
+    var gap = _ref9.gap,
+        hasColumns = _ref9.hasColumns,
+        decl = _ref9.decl,
+        result = _ref9.result;
+
+    var hasBothGaps = gap.row && gap.column;
+    if (!hasColumns && (hasBothGaps || gap.column && !gap.row)) {
+        delete gap.column;
+        decl.warn(result, 'Can not impliment grid-gap without grid-tamplate-columns');
+    }
+}
+
 module.exports = {
     parse: parse,
     translate: translate,
-    changeRepeat: changeRepeat,
     parseTemplate: parseTemplate,
     parseGridAreas: parseGridAreas,
     insertAreas: insertAreas,
-    insertDecl: insertDecl
+    insertDecl: insertDecl,
+    prefixTrackProp: prefixTrackProp,
+    prefixTrackValue: prefixTrackValue,
+    getGridGap: getGridGap,
+    warnGridGap: warnGridGap
 };

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.2.0",
+  "version": "8.5.0",
   "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.2.0",
-    "caniuse-lite": "^1.0.30000817",
+    "browserslist": "^3.2.7",
+    "caniuse-lite": "^1.0.30000839",
     "normalize-range": "^0.1.2",
     "num2fraction": "^1.2.2",
-    "postcss": "^6.0.20",
+    "postcss": "^6.0.22",
     "postcss-value-parser": "^3.2.3"
   },
   "bin": {