autoprefixer 9.4.8 → 9.5.1

package/CHANGELOG.md

@@ -1,6 +1,19 @@
 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 9.5.1
+* Fix `backdrop-filter` for Edge (by Oleh Aloshkin).
+* Fix `min-resolution` media query support in Firefox < 16.
+
+## 9.5 “Draco dormiens nunquam titillandus”
+* Add `mask-composite` support (by Semen Levenson).
+
+## 9.4.10
+* Add warning for named Grid rows.
+
+## 9.4.9
+* Fix `grid-template` and `@media` case (by Bogdan Dolin).
+
 ## 9.4.8
 * Fix `calc()` support in Grid gap.
 

package/README.md

@@ -103,18 +103,23 @@ See [Browserslist docs] for queries, browser names, config format, and defaults.
 
 ### Does Autoprefixer polyfill Grid Layout for IE?
 
-Autoprefixer can be used to translate modern CSS Grid syntax into IE 10 and IE 11 syntax,
-but this polyfill will not work in 100% of cases. This is why it is disabled by default.
+Autoprefixer can be used to translate modern CSS Grid syntax into IE 10
+and IE 11 syntax, but this polyfill will not work in 100% of cases.
+This is why it is disabled by default.
 
-First, you need to enable Grid prefixes by using either the `grid: "autoplace"` option or the `/* autoprefixer grid: autoplace */` control comment.
+First, you need to enable Grid prefixes by using either the `grid: "autoplace"`
+option or the `/* autoprefixer grid: autoplace */` control comment.
 
 Second, you need to test every fix with Grid in IE. It is not an enable and
 forget feature, but it is still very useful.
 Financial Times and Yandex use it in production.
 
-Third, there is only very limited auto placement support. Read the [Grid Autoplacement support in IE](#grid-autoplacement-support-in-ie) section for more details.
+Third, there is only very limited auto placement support. Read the
+[Grid Autoplacement support in IE](#grid-autoplacement-support-in-ie) section
+for more details.
 
-Fourth, if you are not using the autoplacement feature, the best way to use Autoprefixer is by using  `grid-template` or `grid-template-areas`.
+Fourth, if you are not using the autoplacement feature, the best way
+to use Autoprefixer is by using  `grid-template` or `grid-template-areas`.
 
 ```css
 .page {
@@ -314,7 +319,7 @@ module.exports = {
 
 [other PostCSS plugins]: https://github.com/postcss/postcss#plugins
 [postcss-loader]:        https://github.com/postcss/postcss-loader
-[webpack]:               http://webpack.github.io/
+[webpack]:               https://webpack.js.org/
 
 
 ### CSS-in-JS
@@ -435,7 +440,7 @@ Autoprefixer should be used in assets build tools. Text editor plugins are not
 a good solution, because prefixes decrease code readability and you will need
 to change values in all prefixed properties.
 
-I recommend you to learn how to use build tools like [Gulp].
+I recommend you to learn how to use build tools like [Parcel].
 They work much better and will open you a whole new world of useful plugins
 and automation.
 
@@ -445,8 +450,9 @@ If you can’t move to a build tool, you can use text editor plugins:
 * [Brackets](https://github.com/mikaeljorhult/brackets-autoprefixer)
 * [Atom Editor](https://github.com/sindresorhus/atom-autoprefixer)
 * [Visual Studio](https://github.com/madskristensen/WebCompiler)
+  ([how to](https://stackoverflow.com/a/54908636/2440))
 
-[Gulp]:  https://gulpjs.com/
+[Parcel]: https://parceljs.org/
 
 
 ## Warnings
@@ -593,14 +599,17 @@ Available options are:
   parameters. Default is `true`.
 * `flexbox` (boolean|string): should Autoprefixer add prefixes for flexbox
   properties. With `"no-2009"` value Autoprefixer will add prefixes only
-  for final and IE versions of specification. Default is `true`.
-* `grid` (false|"autoplace"|"no-autoplace"): should Autoprefixer add IE prefixes for Grid Layout
-  properties?
-    * `false` (default): prevent Autoprefixer from outputting CSS Grid translations.
-    * `"autoplace"`: enable Autoprefixer grid translations and *include* autoplacement
-      support. You can also use `/* autoprefixer grid: autoplace */` in your CSS.
-    * `"no-autoplace"`: enable Autoprefixer grid translations but *exclude* autoplacement
-      support. You can also use `/* autoprefixer grid: no-autoplace */` in your CSS.
+  for final and IE 10 versions of specification. Default is `true`.
+* `grid` (false|"autoplace"|"no-autoplace"): should Autoprefixer
+  add IE 10-11 prefixes for Grid Layout properties?
+    * `false` (default): prevent Autoprefixer from outputting
+       CSS Grid translations.
+    * `"autoplace"`: enable Autoprefixer grid translations
+      and *include* autoplacement support. You can also use
+      `/* autoprefixer grid: autoplace */` in your CSS.
+    * `"no-autoplace"`: enable Autoprefixer grid translations
+      but *exclude* autoplacement support. You can also use
+      `/* autoprefixer grid: no-autoplace */` in your CSS.
       (alias for the deprecated `true` value)
 * `stats` (object): custom [usage statistics] for `> 10% in my stats`
   browsers query.
@@ -813,11 +822,11 @@ so unfortunately this little snippet will _never_ be IE friendly.
 
 #### No manual cell placement or column/row spans allowed inside an autoplacement grid
 
-Elements must not be manually placed or given column/row spans inside an autoplacement
-grid. Only the most basic of autoplacement grids are supported. Grid cells can still be
-placed manually outside the the explicit grid though. Support for manually placing
-individual grid cells inside an explicit autoplacement grid is planned for a
-future release.
+Elements must not be manually placed or given column/row spans inside
+an autoplacement grid. Only the most basic of autoplacement grids are supported.
+Grid cells can still be placed manually outside the the explicit grid though.
+Support for manually placing individual grid cells inside an explicit
+autoplacement grid is planned for a future release.
 
 ```css
 .autoplacement-grid {
@@ -1033,3 +1042,11 @@ JS API is also available:
 var info = autoprefixer().info();
 console.log(info);
 ```
+
+
+## Security Contact
+
+To report a security vulnerability, please use the [Tidelift security contact].
+Tidelift will coordinate the fix and disclosure.
+
+[Tidelift security contact]: https://tidelift.com/security

package/data/prefixes.js

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

package/lib/hacks/backdrop-filter.js

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

package/lib/hacks/background-clip.js

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

package/lib/hacks/border-radius.js

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

package/lib/hacks/cross-fade.js

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

package/lib/hacks/flex.js

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

package/lib/hacks/gradient.js

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

package/lib/hacks/grid-utils.js

@@ -541,8 +541,9 @@ function insertAreas(css, isDisabled) {
 
     if (!rulesToInsert[lastArea]) {
       rulesToInsert[lastArea] = {};
-    } // walk through every grid-template rule data
+    }
 
+    var lastRuleIsSet = false; // walk through every grid-template rule data
 
     for (var _iterator2 = data.rules, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
       var _ref9;
@@ -586,6 +587,7 @@ function insertAreas(css, isDisabled) {
           }));
         });
         rulesToInsert[lastArea].lastRule = gridAreaRule;
+        lastRuleIsSet = true;
       } else if (rule.hasDuplicates && !rule.params && !selectorIsComplex) {
         (function () {
           // grid-template has duplicates and not inside media rule
@@ -605,10 +607,11 @@ function insertAreas(css, isDisabled) {
           }
 
           rulesToInsert[lastArea].lastRule = cloned;
+          lastRuleIsSet = true;
         })();
       } else if (rule.hasDuplicates && !rule.params && selectorIsComplex && gridAreaRule.selector.includes(rule.selectors[0])) {
         // grid-template has duplicates and not inside media rule
-        // see the bottom of grid-template-areas test case for example
+        // and the selector is complex
         gridAreaRule.walkDecls(/-ms-grid-(row|column)/, function (d) {
           return d.remove();
         });
@@ -648,9 +651,11 @@ function insertAreas(css, isDisabled) {
           } else {
             // store the rule to insert later
             rulesToInsert[lastArea][rule.params].push(cloned);
-          }
+          } // set new rule as last rule ONLY if we didn't set lastRule for
+          // this grid-area before
+
 
-          if (gridAreaMedia) {
+          if (!lastRuleIsSet) {
             rulesToInsert[lastArea].lastRule = gridAreaMedia || gridAreaRule;
           }
         })();

package/lib/hacks/mask-composite.js

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

package/lib/prefixer.js

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

package/lib/prefixes.js

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

package/lib/processor.js

@@ -204,6 +204,11 @@ function () {
               word: 'auto-fill'
             });
             return undefined;
+          } else if (/^grid-template/.test(prop) && value.indexOf('[') !== -1) {
+            result.warn('Autoprefixer currently does not support line names. ' + 'Try using grid-template-areas instead.', {
+              node: decl,
+              word: '['
+            });
           }
         }
 

package/lib/resolution.js

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

package/lib/supports.js

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

package/lib/value.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autoprefixer",
-  "version": "9.4.8",
+  "version": "9.5.1",
   "description": "Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website",
   "keywords": ["autoprefixer", "css", "prefix", "postcss", "postcss-plugin"],
   "author": "Andrey Sitnik <andrey@sitnik.ru>",
@@ -10,8 +10,8 @@
     "node": ">=6.0.0"
   },
   "dependencies": {
-    "browserslist": "^4.4.1",
-    "caniuse-lite": "^1.0.30000938",
+    "browserslist": "^4.5.4",
+    "caniuse-lite": "^1.0.30000957",
     "normalize-range": "^0.1.2",
     "num2fraction": "^1.2.2",
     "postcss": "^7.0.14",