autoprefixer 9.4.7 → 9.5.0

package/CHANGELOG.md

@@ -1,6 +1,18 @@
 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 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.
+
 ## 9.4.7
 * Fix infinite loop on mismatched parens.
 

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 {

package/lib/hacks/gradient.js

@@ -2,10 +2,10 @@
 
 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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
+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 OldValue = require('../old-value');
@@ -34,7 +34,7 @@ function (_Value) {
 
     _this = _Value.call.apply(_Value, [this].concat(args)) || this;
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "directions", {
+    _defineProperty(_assertThisInitialized(_this), "directions", {
       top: 'bottom',
       left: 'right',
       bottom: 'top',
@@ -42,7 +42,7 @@ function (_Value) {
 
     });
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "oldDirections", {
+    _defineProperty(_assertThisInitialized(_this), "oldDirections", {
       'top': 'left bottom, left top',
       'left': 'right top, left top',
       'bottom': 'left top, left bottom',

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;
           }
         })();
@@ -820,12 +825,10 @@ function getGridGap(decl) {
 
     if (/^(grid-)?gap$/.test(prop)) {
       var _parser$nodes = parser(value).nodes,
-          _parser$nodes$ = _parser$nodes[0],
-          row = _parser$nodes$ === void 0 ? {} : _parser$nodes$,
-          _parser$nodes$2 = _parser$nodes[2],
-          column = _parser$nodes$2 === void 0 ? {} : _parser$nodes$2;
-      gap.row = row.value;
-      gap.column = column.value || row.value;
+          row = _parser$nodes[0],
+          column = _parser$nodes[2];
+      gap.row = row && parser.stringify(row);
+      gap.column = column ? parser.stringify(column) : gap.row;
     }
 
     if (/^(grid-)?row-gap$/.test(prop)) gap.row = value;

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/prefixes.js

@@ -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'));

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autoprefixer",
-  "version": "9.4.7",
+  "version": "9.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>",
@@ -10,8 +10,8 @@
     "node": ">=6.0.0"
   },
   "dependencies": {
-    "browserslist": "^4.4.1",
-    "caniuse-lite": "^1.0.30000932",
+    "browserslist": "^4.4.2",
+    "caniuse-lite": "^1.0.30000947",
     "normalize-range": "^0.1.2",
     "num2fraction": "^1.2.2",
     "postcss": "^7.0.14",