autoprefixer 7.1.6 → 7.2.3

package/CHANGELOG.md

@@ -1,6 +1,26 @@
 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 7.2.3
+* Fix `grid-template-areas` in `@media` (by Evgeny Petukhov).
+
+## 7.2.2
+* Fix `_autoprefixerDisabled is undefined` issue.
+
+## 7.2.1
+* Fix IE and other old JS runtimes support.
+
+## 7.2 “Ordem e Progresso”
+* Add `grid-template-areas` support (by Evgeny Petukhov).
+* Add `grid-template` support (by Evgeny Petukhov).
+* Add `grid-area` support (by Alexey Komarov).
+* Add `autoprefixer-info` CLI tool.
+* Add wrong `radial-gradient` properties warning.
+* Use current working dir on missed `from` in `info()` (by Phil Dokas).
+* Fix `grid-row` and `grid-column` support (by Alexey Komarov).
+* Do not prefix `reverse` animation direction.
+* Improve test coverage (by Dmitry Semigradsky).
+
 ## 7.1.6
 * Add warning for using `browserslist` option instead of `browsers`.
 * Add warning for multiple control comments in the same scope.

package/README.md

@@ -12,7 +12,7 @@ entirely):
 
 ```css
 :fullscreen a {
-    display: flex
+    display: flex;
 }
 ```
 
@@ -23,19 +23,19 @@ of Autoprefixer.
 ```css
 :-webkit-full-screen a {
     display: -webkit-box;
-    display: flex
+    display: flex;
 }
 :-moz-full-screen a {
-    display: flex
+    display: flex;
 }
 :-ms-fullscreen a {
     display: -ms-flexbox;
-    display: flex
+    display: flex;
 }
 :fullscreen a {
     display: -webkit-box;
     display: -ms-flexbox;
-    display: flex
+    display: flex;
 }
 ```
 
@@ -86,7 +86,7 @@ a {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
-    display: flex
+    display: flex;
 }
 ```
 
@@ -160,7 +160,7 @@ var cleaner  = postcss([ autoprefixer({ add: false, browsers: [] }) ]);
 var prefixer = postcss([ autoprefixer ]);
 
 cleaner.process(css).then(function (cleaned) {
-    return prefixer.process(cleaned.css)
+    return prefixer.process(cleaned.css);
 }).then(function (result) {
     console.log(result.css);
 });
@@ -578,7 +578,38 @@ to increase performance.
 
 ## Debug
 
-You can check which browsers are selected and which properties will be prefixed:
+Run `npx autoprefixer-info` in your project directory to check
+which browsers are selected and which properties will be prefixed:
+
+```
+$ npx autoprefixer-info
+Browsers:
+  Edge: 16
+
+These browsers account for 0.04% of all users globally
+
+At-Rules:
+  @viewport: ms
+
+Selectors:
+  ::placeholder: ms
+
+Properties:
+  user-select: ms
+  hyphens: ms
+  appearance: webkit
+  scroll-snap-type: ms
+  scroll-snap-coordinate: ms
+  scroll-snap-destination: ms
+  scroll-snap-points-x: ms
+  scroll-snap-points-y: ms
+  flow-into: ms
+  flow-from: ms
+  region-fragment: ms
+  text-spacing: ms
+```
+
+JS API is also available:
 
 ```js
 var info = autoprefixer().info();

package/bin/autoprefixer-info

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+process.stdout.write(require('../')().info() + '\n');

package/data/prefixes.js

@@ -647,7 +647,7 @@ f(grid, function (browsers) {
         feature: 'css-grid',
         browsers: browsers
     });
-    prefix(['grid-template-columns', 'grid-template-rows', 'grid-row-start', 'grid-column-start', 'grid-row-end', 'grid-column-end', 'grid-row', 'grid-column'], {
+    prefix(['grid-template-columns', 'grid-template-rows', 'grid-row-start', 'grid-column-start', 'grid-row-end', 'grid-column-end', 'grid-row', 'grid-column', 'grid-area', 'grid-template', 'grid-template-areas'], {
         feature: 'css-grid',
         browsers: browsers
     });

package/lib/autoprefixer.js

@@ -25,6 +25,7 @@ function timeCapsule(result, prefixes) {
         return;
     }
 
+    /* istanbul ignore next */
     result.warn('Greetings, time traveller. ' + 'We are in the golden age of prefix-less CSS, ' + 'where Autoprefixer is no longer needed for your stylesheet.');
 }
 
@@ -92,7 +93,12 @@ module.exports = postcss.plugin('autoprefixer', function () {
 
     plugin.options = options;
 
+    plugin.browsers = reqs;
+
     plugin.info = function (opts) {
+        opts = opts || {};
+        opts.from = opts.from || process.cwd();
+
         return require('./info')(loadPrefixes(opts));
     };
 

package/lib/browsers.js

@@ -65,30 +65,6 @@ var Browsers = function () {
         });
     };
 
-    /**
-     * Select major browsers versions by criteria
-     */
-
-
-    Browsers.prototype.browsers = function browsers(criteria) {
-        var _this = this;
-
-        var selected = [];
-
-        var _loop = function _loop(browser) {
-            var data = _this.data[browser];
-            var versions = criteria(data).map(function (version) {
-                return browser + ' ' + version;
-            });
-            selected = selected.concat(versions);
-        };
-
-        for (var browser in this.data) {
-            _loop(browser);
-        }
-        return selected;
-    };
-
     /**
      * Return prefix for selected browser
      */

package/lib/declaration.js

@@ -215,12 +215,12 @@ var Declaration = function (_Prefixer) {
      */
 
 
-    Declaration.prototype.add = function add(decl, prefix, prefixes) {
+    Declaration.prototype.add = function add(decl, prefix, prefixes, result) {
         var prefixed = this.prefixed(decl.prop, prefix);
         if (this.isAlready(decl, prefixed) || this.otherPrefixes(decl.value, prefix)) {
             return undefined;
         }
-        return this.insert(decl, prefix, prefixes);
+        return this.insert(decl, prefix, prefixes, result);
     };
 
     /**
@@ -228,13 +228,13 @@ var Declaration = function (_Prefixer) {
      */
 
 
-    Declaration.prototype.process = function process(decl) {
+    Declaration.prototype.process = function process(decl, result) {
         if (!this.needCascade(decl)) {
-            _Prefixer.prototype.process.call(this, decl);
+            _Prefixer.prototype.process.call(this, decl, result);
             return;
         }
 
-        var prefixes = _Prefixer.prototype.process.call(this, decl);
+        var prefixes = _Prefixer.prototype.process.call(this, decl, result);
 
         if (!prefixes || !prefixes.length) {
             return;

package/lib/hacks/animation.js

@@ -0,0 +1,40 @@
+'use strict';
+
+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) : subClass.__proto__ = superClass; }
+
+var Declaration = require('../declaration');
+
+var Animation = function (_Declaration) {
+    _inherits(Animation, _Declaration);
+
+    function Animation() {
+        _classCallCheck(this, Animation);
+
+        return _possibleConstructorReturn(this, _Declaration.apply(this, arguments));
+    }
+
+    /**
+     * Don’t add prefixes for modern values.
+     */
+    Animation.prototype.check = function check(decl) {
+        return !decl.value.split(/\s+/).some(function (i) {
+            var lower = i.toLowerCase();
+            return lower === 'reverse' || lower === 'alternate-reverse';
+        });
+    };
+
+    return Animation;
+}(Declaration);
+
+Object.defineProperty(Animation, 'names', {
+    enumerable: true,
+    writable: true,
+    value: ['animation', 'animation-direction']
+});
+
+
+module.exports = Animation;

package/lib/hacks/break-props.js

@@ -21,12 +21,10 @@ var BreakProps = function (_Declaration) {
      * Change name for -webkit- and -moz- prefix
      */
     BreakProps.prototype.prefixed = function prefixed(prop, prefix) {
-        if (prefix === '-webkit-') {
-            return '-webkit-column-' + prop;
-        } else if (prefix === '-moz-') {
+        if (prefix === '-moz-') {
             return 'page-' + prop;
         } else {
-            return _Declaration.prototype.prefixed.call(this, prop, prefix);
+            return prefix + 'column-' + prop;
         }
     };
 
@@ -40,10 +38,9 @@ var BreakProps = function (_Declaration) {
             return 'break-inside';
         } else if (prop.indexOf('before') !== -1) {
             return 'break-before';
-        } else if (prop.indexOf('after') !== -1) {
+        } else {
             return 'break-after';
         }
-        return undefined;
     };
 
     /**
@@ -52,8 +49,7 @@ var BreakProps = function (_Declaration) {
 
 
     BreakProps.prototype.set = function set(decl, prefix) {
-        var v = decl.value;
-        if (decl.prop === 'break-inside' && v === 'avoid-column' || v === 'avoid-page') {
+        if (decl.prop === 'break-inside' && decl.value === 'avoid-column' || decl.value === 'avoid-page') {
             decl.value = 'avoid';
         }
         return _Declaration.prototype.set.call(this, decl, prefix);

package/lib/hacks/display-flex.js

@@ -83,10 +83,8 @@ var DisplayFlex = function (_Value) {
 
     DisplayFlex.prototype.old = function old(prefix) {
         var prefixed = this.prefixed(prefix);
-        if (prefixed) {
-            return new OldValue(this.name, prefixed);
-        }
-        return undefined;
+        if (!prefixed) return undefined;
+        return new OldValue(this.name, prefixed);
     };
 
     return DisplayFlex;

package/lib/hacks/filter-value.js

@@ -6,39 +6,7 @@ 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) : subClass.__proto__ = superClass; }
 
-var OldValue = require('../old-value');
 var Value = require('../value');
-var utils = require('../utils');
-
-var OldFilterValue = function (_OldValue) {
-    _inherits(OldFilterValue, _OldValue);
-
-    function OldFilterValue() {
-        _classCallCheck(this, OldFilterValue);
-
-        return _possibleConstructorReturn(this, _OldValue.apply(this, arguments));
-    }
-
-    /**
-     * Clean -webkit-filter from properties list
-     */
-    OldFilterValue.prototype.clean = function clean(decl) {
-        var _this2 = this;
-
-        decl.value = utils.editList(decl.value, function (props) {
-            if (props.every(function (i) {
-                return i.indexOf(_this2.unprefixed) !== 0;
-            })) {
-                return props;
-            }
-            return props.filter(function (i) {
-                return i.indexOf(_this2.prefixed) === -1;
-            });
-        });
-    };
-
-    return OldFilterValue;
-}(OldValue);
 
 var FilterValue = function (_Value) {
     _inherits(FilterValue, _Value);
@@ -46,40 +14,14 @@ var FilterValue = function (_Value) {
     function FilterValue(name, prefixes) {
         _classCallCheck(this, FilterValue);
 
-        var _this3 = _possibleConstructorReturn(this, _Value.call(this, name, prefixes));
+        var _this = _possibleConstructorReturn(this, _Value.call(this, name, prefixes));
 
         if (name === 'filter-function') {
-            _this3.name = 'filter';
+            _this.name = 'filter';
         }
-        return _this3;
+        return _this;
     }
 
-    /**
-     * Use prefixed and unprefixed filter for WebKit
-     */
-
-
-    FilterValue.prototype.replace = function replace(value, prefix) {
-        if (prefix === '-webkit-' && value.indexOf('filter(') === -1) {
-            if (value.indexOf('-webkit-filter') === -1) {
-                return _Value.prototype.replace.call(this, value, prefix) + ', ' + value;
-            } else {
-                return value;
-            }
-        } else {
-            return _Value.prototype.replace.call(this, value, prefix);
-        }
-    };
-
-    /**
-     * Clean -webkit-filter
-     */
-
-
-    FilterValue.prototype.old = function old(prefix) {
-        return new OldFilterValue(this.name, prefix + this.name);
-    };
-
     return FilterValue;
 }(Value);
 

package/lib/hacks/gradient.js

@@ -136,9 +136,7 @@ var Gradient = function (_Value) {
 
 
     Gradient.prototype.normalize = function normalize(nodes) {
-        if (!nodes[0]) {
-            return nodes;
-        }
+        if (!nodes[0]) return nodes;
 
         if (/-?\d+(.\d+)?grad/.test(nodes[0].value)) {
             nodes[0].value = this.normalizeUnit(nodes[0].value, 400);
@@ -210,7 +208,7 @@ var Gradient = function (_Value) {
                 this.fixDirection(params);
             } else if (params[0].value.indexOf('deg') !== -1) {
                 this.fixAngle(params);
-            } else if (params[2].value === 'at') {
+            } else if (params[2] && params[2].value === 'at') {
                 this.fixRadial(params);
             }
         }
@@ -313,13 +311,7 @@ var Gradient = function (_Value) {
         if (nodes[0] && nodes[0].value.indexOf('deg') !== -1) {
             return false;
         }
-        if (string.indexOf('px') !== -1) {
-            return false;
-        }
-        if (string.indexOf('-corner') !== -1) {
-            return false;
-        }
-        if (string.indexOf('-side') !== -1) {
+        if (string.indexOf('px') !== -1 || string.indexOf('-corner') !== -1 || string.indexOf('-side') !== -1) {
             return false;
         }
 

package/lib/hacks/grid-area.js

@@ -0,0 +1,84 @@
+'use strict';
+
+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) : subClass.__proto__ = superClass; }
+
+var Declaration = require('../declaration');
+var shorthand = require('./grid-shorthand');
+
+var GridArea = function (_Declaration) {
+    _inherits(GridArea, _Declaration);
+
+    function GridArea() {
+        _classCallCheck(this, GridArea);
+
+        return _possibleConstructorReturn(this, _Declaration.apply(this, arguments));
+    }
+
+    /**
+     * Translate grid-area to separate -ms- prefixed properties
+     */
+    GridArea.prototype.insert = function insert(decl, prefix, prefixes) {
+        if (prefix !== '-ms-') return _Declaration.prototype.insert.call(this, decl, prefix, prefixes);
+
+        if (decl.parent.some(function (i) {
+            return i.prop === '-ms-grid-row';
+        })) {
+            return undefined;
+        }
+
+        var values = shorthand.parse(decl);
+
+        var _shorthand$translate = shorthand.translate(values, 0, 2),
+            rowStart = _shorthand$translate[0],
+            rowSpan = _shorthand$translate[1];
+
+        var _shorthand$translate2 = shorthand.translate(values, 1, 3),
+            columnStart = _shorthand$translate2[0],
+            columnSpan = _shorthand$translate2[1];
+
+        if (rowStart) {
+            decl.cloneBefore({
+                prop: '-ms-grid-row',
+                value: rowStart.toString()
+            });
+        }
+
+        if (rowSpan) {
+            decl.cloneBefore({
+                prop: '-ms-grid-row-span',
+                value: rowSpan.toString()
+            });
+        }
+
+        if (columnStart) {
+            decl.cloneBefore({
+                prop: '-ms-grid-column',
+                value: columnStart.toString()
+            });
+        }
+
+        if (columnSpan) {
+            decl.cloneBefore({
+                prop: '-ms-grid-column-span',
+                value: columnSpan.toString()
+            });
+        }
+
+        return undefined;
+    };
+
+    return GridArea;
+}(Declaration);
+
+Object.defineProperty(GridArea, 'names', {
+    enumerable: true,
+    writable: true,
+    value: ['grid-area']
+});
+
+
+module.exports = GridArea;

package/lib/hacks/grid-end.js

@@ -39,11 +39,11 @@ var GridEnd = function (_Declaration) {
 
 
     GridEnd.prototype.prefixed = function prefixed(prop, prefix) {
+        var result = _Declaration.prototype.prefixed.call(this, prop, prefix);
         if (prefix === '-ms-') {
-            return prefix + prop.replace('-end', '-span');
-        } else {
-            return _Declaration.prototype.prefixed.call(this, prop, prefix);
+            result = result.replace('-end', '-span');
         }
+        return result;
     };
 
     /**

package/lib/hacks/grid-row-column.js

@@ -0,0 +1,60 @@
+'use strict';
+
+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) : subClass.__proto__ = superClass; }
+
+var Declaration = require('../declaration');
+var shorthand = require('./grid-shorthand');
+
+var GridRowColumn = function (_Declaration) {
+    _inherits(GridRowColumn, _Declaration);
+
+    function GridRowColumn() {
+        _classCallCheck(this, GridRowColumn);
+
+        return _possibleConstructorReturn(this, _Declaration.apply(this, arguments));
+    }
+
+    /**
+     * Translate grid-row / grid-column to separate -ms- prefixed properties
+     */
+    GridRowColumn.prototype.insert = function insert(decl, prefix, prefixes) {
+        if (prefix !== '-ms-') return _Declaration.prototype.insert.call(this, decl, prefix, prefixes);
+
+        var values = shorthand.parse(decl);
+
+        var _shorthand$translate = shorthand.translate(values, 0, 1),
+            start = _shorthand$translate[0],
+            span = _shorthand$translate[1];
+
+        if (start) {
+            decl.cloneBefore({
+                prop: '-ms-' + decl.prop,
+                value: start.toString()
+            });
+        }
+
+        if (span) {
+            decl.cloneBefore({
+                prop: '-ms-' + decl.prop + '-span',
+                value: span.toString()
+            });
+        }
+
+        return undefined;
+    };
+
+    return GridRowColumn;
+}(Declaration);
+
+Object.defineProperty(GridRowColumn, 'names', {
+    enumerable: true,
+    writable: true,
+    value: ['grid-row', 'grid-column']
+});
+
+
+module.exports = GridRowColumn;

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

@@ -0,0 +1,63 @@
+'use strict';
+
+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) : subClass.__proto__ = superClass; }
+
+var Declaration = require('../declaration');
+var shorthand = require('./grid-shorthand');
+
+var GridRowsColumns = function (_Declaration) {
+    _inherits(GridRowsColumns, _Declaration);
+
+    function GridRowsColumns() {
+        _classCallCheck(this, GridRowsColumns);
+
+        return _possibleConstructorReturn(this, _Declaration.apply(this, arguments));
+    }
+
+    /**
+     * Change property name for IE
+     */
+    GridRowsColumns.prototype.prefixed = function prefixed(prop, prefix) {
+        if (prefix === '-ms-') {
+            return prefix + prop.replace('template-', '');
+        } else {
+            return _Declaration.prototype.prefixed.call(this, prop, prefix);
+        }
+    };
+
+    /**
+     * Change IE property back
+     */
+
+
+    GridRowsColumns.prototype.normalize = function normalize(prop) {
+        return prop.replace(/^grid-(rows|columns)/, 'grid-template-$1');
+    };
+
+    /**
+     * Change repeating syntax for IE
+     */
+
+
+    GridRowsColumns.prototype.set = function set(decl, prefix) {
+        if (prefix === '-ms-' && decl.value.indexOf('repeat(') !== -1) {
+            decl.value = shorthand.changeRepeat(decl.value);
+        }
+        return _Declaration.prototype.set.call(this, decl, prefix);
+    };
+
+    return GridRowsColumns;
+}(Declaration);
+
+Object.defineProperty(GridRowsColumns, 'names', {
+    enumerable: true,
+    writable: true,
+    value: ['grid-template-rows', 'grid-template-columns', 'grid-rows', 'grid-columns']
+});
+
+
+module.exports = GridRowsColumns;