autoprefixer 8.4.1 → 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,11 @@
 # 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).
 

package/README.md

@@ -502,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 });
@@ -531,7 +531,7 @@ you can use control comments to disable Autoprefixer.
 }
 ```
 
-There is two types of control commens:
+There are two types of control comments:
 
 * `/* autoprefixer: off */` disable the whole block *before* and after comment.
 * `/* autoprefixer: ignore next */` disable only next property
@@ -584,7 +584,7 @@ Available options are:
 * `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
+  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.

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,14 +37,28 @@ 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,
@@ -50,7 +66,7 @@ var GridTemplate = function (_Declaration) {
             });
         }
 
-        if (columns) {
+        if (hasColumns) {
             decl.cloneBefore({
                 prop: '-ms-grid-columns',
                 value: columns,

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,10 +253,20 @@ 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
+        })
     };
 }
 
@@ -303,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/package.json

@@ -1,14 +1,14 @@
 {
   "name": "autoprefixer",
-  "version": "8.4.1",
+  "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"],
   "author": "Andrey Sitnik <andrey@sitnik.ru>",
   "license": "MIT",
   "repository": "postcss/autoprefixer",
   "dependencies": {
-    "browserslist": "^3.2.6",
-    "caniuse-lite": "^1.0.30000832",
+    "browserslist": "^3.2.7",
+    "caniuse-lite": "^1.0.30000839",
     "normalize-range": "^0.1.2",
     "num2fraction": "^1.2.2",
     "postcss": "^6.0.22",