autoprefixer 9.6.2 → 9.7.0

package/CHANGELOG.md

@@ -1,6 +1,19 @@
 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 9.7 “Ad Victoriam”
+* Add `AUTOPREFIXER_GRID` env variable to enable Grid Layout polyfill for IE.
+* Fix `Cannot read property 'grid' of undefined` error.
+
+## 9.6.5
+* Fix selector prefixing (by Andrey Alexandrov).
+
+## 9.6.4
+* Now the real fix for `'startsWith' of undefined` error.
+
+## 9.6.3
+* Fix `Cannot read property 'startsWith' of undefined` error.
+
 ## 9.6.2
 * Fix false `Replace fill to stretch` warning.
 

package/README.md

@@ -113,10 +113,10 @@ that the config can be shared with other tools such as [babel-preset-env] and
 
 See [Browserslist docs] for queries, browser names, config format, and defaults.
 
-[Browserslist docs]: https://github.com/ai/browserslist#queries
+[Browserslist docs]: https://github.com/browserslist/browserslist#queries
 [babel-preset-env]:  https://github.com/babel/babel/tree/master/packages/babel-preset-env
 [Best Practices]:    https://github.com/browserslist/browserslist#best-practices
-[Browserslist]:      https://github.com/ai/browserslist
+[Browserslist]:      https://github.com/browserslist/browserslist
 [Stylelint]:         https://stylelint.io/
 
 
@@ -130,6 +130,8 @@ 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.
+Also you can use environment variable to enable Grid:
+`AUTOPREFIXER_GRID=autoplace npm build`.
 
 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.
@@ -582,7 +584,7 @@ Available options are:
 * `flexbox` (boolean|string): should Autoprefixer add prefixes for flexbox
   properties. With `"no-2009"` value Autoprefixer will add prefixes only
   for final and IE 10 versions of specification. Default is `true`.
-* `grid` (false|"autoplace"|"no-autoplace"): should Autoprefixer
+* `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.
@@ -608,16 +610,45 @@ Plugin object has `info()` method for debugging purpose.
 You can use PostCSS processor to process several CSS files
 to increase performance.
 
-[usage statistics]: https://github.com/ai/browserslist#custom-usage-data
+[usage statistics]: https://github.com/browserslist/browserslist#custom-usage-data
 [PostCSS API]:      http://api.postcss.org
 
+## Environment Variables
+
+* `AUTOPREFIXER_GRID`: (`autoplace`|`no-autoplace`) should Autoprefixer
+  add IE 10-11 prefixes for Grid Layout properties?
+    * `autoplace`: enable Autoprefixer grid translations
+      and *include* autoplacement support.
+    * `no-autoplace`: enable Autoprefixer grid translations
+      but *exclude* autoplacement support.
+
+Environment variables is useful, when you can change Autoprefixer options.
+For instance, in Create React App.
+
+Add variable before CLI command, which will build your CSS:
+
+```sh
+AUTOPREFIXER_GRID=autoplace npm build
+```
+
+See also [Browserslist environment variables].
+
+[Browserslist environment variables]: https://github.com/browserslist/browserslist#environment-variables
+
 ## Grid Autoplacement support in IE
 
-If the `grid` option is set to `"autoplace"`, limited autoplacement support is added to Autoprefixers grid translations. You can also use the `/* autoprefixer grid: autoplace */` control comment to enable autoplacement
+If the `grid` option is set to `"autoplace"`, limited autoplacement support is added to Autoprefixers grid translations. You can also use
+the `/* autoprefixer grid: autoplace */` control comment or
+`AUTOPREFIXER_GRID=autoplace npm build` environment variable.
 
-Autoprefixer will only autoplace grid cells if both `grid-template-rows` and `grid-template-columns` has been set. If `grid-template` or `grid-template-areas` has been set, Autoprefixer will use area based cell placement instead.
+Autoprefixer will only autoplace grid cells if both `grid-template-rows`
+and `grid-template-columns` has been set. If `grid-template`
+or `grid-template-areas` has been set, Autoprefixer will use area based
+cell placement instead.
 
-Autoprefixer supports autoplacement by using `nth-child` CSS selectors. It creates [number of columns] x [number of rows] `nth-child` selectors. For this reason Autoplacement is only supported within the explicit grid.
+Autoprefixer supports autoplacement by using `nth-child` CSS selectors.
+It creates [number of columns] x [number of rows] `nth-child` selectors.
+For this reason Autoplacement is only supported within the explicit grid.
 
 ```css
 /* Input CSS */
@@ -734,9 +765,10 @@ grid-declaration rule:
 }
 ```
 
-The absolute best way to integrate autoplacement into already existing projects though is
-to leave autoplacement turned off by default and then use a control comment to enable it
-when needed. This method is far less likely to cause something on the site to break.
+The absolute best way to integrate autoplacement into already existing projects
+though is to leave autoplacement turned off by default and then use a control
+comment to enable it when needed. This method is far less likely to cause
+something on the site to break.
 
 ```css
 /* Disable autoplacement by default in old projects */
@@ -763,10 +795,10 @@ when needed. This method is far less likely to cause something on the site to br
 ```
 
 Note that the `grid: "no-autoplace"` setting and the
-`/* autoprefixer grid: no-autoplace */` control comment share identical functionality
-to the `grid: true` setting and the `/* autoprefixer grid: on */` control comment.
-There is no need to refactor old code to use `no-autoplace` in place of the old
-`true` and `on` statements.
+`/* autoprefixer grid: no-autoplace */` control comment share identical
+functionality to the `grid: true` setting and the `/* autoprefixer grid: on */`
+control comment. There is no need to refactor old code to use `no-autoplace`
+in place of the old `true` and `on` statements.
 
 ### Autoplacement limitations
 
@@ -1020,7 +1052,6 @@ JS API is also available:
 console.log(autoprefixer().info())
 ```
 
-
 ## Security Contact
 
 To report a security vulnerability, please use the [Tidelift security contact].

package/lib/autoprefixer.js

@@ -87,10 +87,6 @@ module.exports = postcss.plugin('autoprefixer', function () {
     reqs = options.browsers;
   }
 
-  if (typeof options.grid === 'undefined') {
-    options.grid = false;
-  }
-
   var brwlstOpts = {
     ignoreUnknownVersions: options.ignoreUnknownVersions,
     stats: options.stats

package/lib/hacks/align-self.js

@@ -22,8 +22,8 @@ function (_Declaration) {
   var _proto = AlignSelf.prototype;
 
   _proto.check = function check(decl) {
-    return decl.parent && decl.parent.every(function (i) {
-      return !/^grid-/.test(i.prop);
+    return decl.parent && !decl.parent.some(function (i) {
+      return i.prop && i.prop.startsWith('grid-');
     });
   }
   /**

package/lib/hacks/background-size.js

@@ -25,7 +25,7 @@ function (_Declaration) {
   _proto.set = function set(decl, prefix) {
     var value = decl.value.toLowerCase();
 
-    if (prefix === '-webkit-' && value.indexOf(' ') === -1 && value !== 'contain' && value !== 'cover') {
+    if (prefix === '-webkit-' && !value.includes(' ') && value !== 'contain' && value !== 'cover') {
       decl.value = decl.value + ' ' + decl.value;
     }
 

package/lib/hacks/block-logical.js

@@ -23,7 +23,7 @@ function (_Declaration) {
    * Use old syntax for -moz- and -webkit-
    */
   _proto.prefixed = function prefixed(prop, prefix) {
-    if (prop.indexOf('-start') !== -1) {
+    if (prop.includes('-start')) {
       return prefix + prop.replace('-block-start', '-before');
     }
 
@@ -35,7 +35,7 @@ function (_Declaration) {
   ;
 
   _proto.normalize = function normalize(prop) {
-    if (prop.indexOf('-before') !== -1) {
+    if (prop.includes('-before')) {
       return prop.replace('-before', '-block-start');
     }
 

package/lib/hacks/break-props.js

@@ -31,11 +31,11 @@ function (_Declaration) {
   ;
 
   _proto.normalize = function normalize(prop) {
-    if (prop.indexOf('inside') !== -1) {
+    if (prop.includes('inside')) {
       return 'break-inside';
     }
 
-    if (prop.indexOf('before') !== -1) {
+    if (prop.includes('before')) {
       return 'break-before';
     }
 

package/lib/hacks/filter.js

@@ -24,7 +24,7 @@ function (_Declaration) {
    */
   _proto.check = function check(decl) {
     var v = decl.value;
-    return v.toLowerCase().indexOf('alpha(') === -1 && v.indexOf('DXImageTransform.Microsoft') === -1 && v.indexOf('data:image/svg+xml') === -1;
+    return !v.toLowerCase().includes('alpha(') && !v.includes('DXImageTransform.Microsoft') && !v.includes('data:image/svg+xml');
   };
 
   return Filter;

package/lib/hacks/flex-direction.js

@@ -59,8 +59,8 @@ function (_Declaration) {
       orient = v;
       dir = v;
     } else {
-      orient = v.indexOf('row') !== -1 ? 'horizontal' : 'vertical';
-      dir = v.indexOf('reverse') !== -1 ? 'reverse' : 'normal';
+      orient = v.includes('row') ? 'horizontal' : 'vertical';
+      dir = v.includes('reverse') ? 'reverse' : 'normal';
     }
 
     var cloned = this.clone(decl);

package/lib/hacks/flex-flow.js

@@ -53,8 +53,8 @@ function (_Declaration) {
     }
 
     var value = values[0];
-    var orient = value.indexOf('row') !== -1 ? 'horizontal' : 'vertical';
-    var dir = value.indexOf('reverse') !== -1 ? 'reverse' : 'normal';
+    var orient = value.includes('row') ? 'horizontal' : 'vertical';
+    var dir = value.includes('reverse') ? 'reverse' : 'normal';
     var cloned = this.clone(decl);
     cloned.prop = prefix + 'box-orient';
     cloned.value = orient;

package/lib/hacks/gradient.js

@@ -149,7 +149,7 @@ function (_Value) {
       nodes[0].value = this.normalizeUnit(nodes[0].value, 2 * Math.PI);
     } else if (/-?\d+(.\d+)?turn/.test(nodes[0].value)) {
       nodes[0].value = this.normalizeUnit(nodes[0].value, 1);
-    } else if (nodes[0].value.indexOf('deg') !== -1) {
+    } else if (nodes[0].value.includes('deg')) {
       var num = parseFloat(nodes[0].value);
       num = range.wrap(0, 360, num);
       nodes[0].value = num + "deg";
@@ -249,7 +249,7 @@ function (_Value) {
     if (params.length > 0) {
       if (params[0].value === 'to') {
         this.fixDirection(params);
-      } else if (params[0].value.indexOf('deg') !== -1) {
+      } else if (params[0].value.includes('deg')) {
         this.fixAngle(params);
       } else if (this.isRadial(params)) {
         this.fixRadial(params);
@@ -362,11 +362,11 @@ function (_Value) {
       return false;
     }
 
-    if (nodes[0] && nodes[0].value.indexOf('deg') !== -1) {
+    if (nodes[0] && nodes[0].value.includes('deg')) {
       return false;
     }
 
-    if (string.indexOf('px') !== -1 || string.indexOf('-corner') !== -1 || string.indexOf('-side') !== -1) {
+    if (string.includes('px') || string.includes('-corner') || string.includes('-side')) {
       return false;
     }
 
@@ -558,7 +558,7 @@ function (_Value) {
   _proto.add = function add(decl, prefix) {
     var p = decl.prop;
 
-    if (p.indexOf('mask') !== -1) {
+    if (p.includes('mask')) {
       if (prefix === '-webkit-' || prefix === '-webkit- old') {
         return _Value.prototype.add.call(this, decl, prefix);
       }

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

@@ -23,7 +23,7 @@ function (_Declaration) {
    * Do not prefix flexbox values
    */
   _proto.check = function check(decl) {
-    return decl.value.indexOf('flex-') === -1 && decl.value !== 'baseline';
+    return !decl.value.includes('flex-') && decl.value !== 'baseline';
   }
   /**
    * Change property name for IE

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

@@ -23,7 +23,7 @@ function (_Declaration) {
    * Do not prefix flexbox values
    */
   _proto.check = function check(decl) {
-    return decl.value.indexOf('flex-') === -1 && decl.value !== 'baseline';
+    return !decl.value.includes('flex-') && decl.value !== 'baseline';
   }
   /**
    * Change property name for IE

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

@@ -68,7 +68,9 @@ function (_Declaration) {
       return false;
     }
 
-    var processor = new Processor({});
+    var processor = new Processor({
+      options: {}
+    });
     var status = processor.gridStatus(parent, result);
     var gap = getGridGap(decl);
     gap = inheritGridGap(decl, gap) || gap;
@@ -113,7 +115,7 @@ function (_Declaration) {
       if (!rowDecl && hasGridTemplate) {
         return undefined;
       } else if (!rowDecl && !hasGridTemplate) {
-        decl.warn(result, "Autoplacement does not work without grid-template-rows property");
+        decl.warn(result, 'Autoplacement does not work without grid-template-rows property');
         return undefined;
       }
       /**
@@ -126,7 +128,7 @@ function (_Declaration) {
       });
 
       if (!columnDecl && !hasGridTemplate) {
-        decl.warn(result, "Autoplacement does not work without grid-template-columns property");
+        decl.warn(result, 'Autoplacement does not work without grid-template-columns property');
       }
       /**
        * Autoplace grid items

package/lib/hacks/grid-start.js

@@ -24,7 +24,7 @@ function (_Declaration) {
    */
   _proto.check = function check(decl) {
     var value = decl.value;
-    return value.indexOf('/') === -1 || value.indexOf('span') !== -1;
+    return !value.includes('/') || value.includes('span');
   }
   /**
    * Return a final spec property

package/lib/hacks/grid-utils.js

@@ -783,7 +783,7 @@ function warnTemplateSelectorNotFound(decl, result) {
     }); // warn user if we didn't find template
 
     if (!gridTemplateFound && duplicatesFound) {
-      decl.warn(result, "Autoprefixer cannot find a grid-template " + ("containing the duplicate grid-area \"" + decl.value + "\" ") + ("with full selector matching: " + slicedSelectorArr.join(' ')));
+      decl.warn(result, 'Autoprefixer cannot find a grid-template ' + ("containing the duplicate grid-area \"" + decl.value + "\" ") + ("with full selector matching: " + slicedSelectorArr.join(' ')));
     }
   }
 }
@@ -800,14 +800,14 @@ function warnIfGridRowColumnExists(decl, result) {
   var rule = decl.parent;
   var decls = [];
   rule.walkDecls(/^grid-(row|column)/, function (d) {
-    if (!/-end$/.test(d.prop) && !/^span/.test(d.value)) {
+    if (!d.prop.endsWith('-end') && !d.value.startsWith('span')) {
       decls.push(d);
     }
   });
 
   if (decls.length > 0) {
     decls.forEach(function (d) {
-      d.warn(result, "You already have a grid-area declaration present in the rule. " + ("You should use either grid-area or " + d.prop + ", not both"));
+      d.warn(result, 'You already have a grid-area declaration present in the rule. ' + ("You should use either grid-area or " + d.prop + ", not both"));
     });
   }
 

package/lib/hacks/intrinsic.js

@@ -61,7 +61,7 @@ function (_Value) {
   };
 
   _proto.add = function add(decl, prefix) {
-    if (decl.prop.indexOf('grid') !== -1 && prefix !== '-webkit-') {
+    if (decl.prop.includes('grid') && prefix !== '-webkit-') {
       return undefined;
     }
 

package/lib/hacks/text-decoration.js

@@ -26,7 +26,7 @@ function (_Declaration) {
    */
   _proto.check = function check(decl) {
     return decl.value.split(/\s+/).some(function (i) {
-      return BASIC.indexOf(i) === -1;
+      return !BASIC.includes(i);
     });
   };
 

package/lib/hacks/transform-decl.js

@@ -60,7 +60,7 @@ function (_Declaration) {
 
       var func = _ref;
 
-      if (decl.value.indexOf(func + "(") !== -1) {
+      if (decl.value.includes(func + "(")) {
         return true;
       }
     }

package/lib/processor.js

@@ -79,17 +79,18 @@ function () {
     });
 
     function insideGrid(decl) {
-      return decl.parent.some(function (subDecl) {
-        var displayGrid = subDecl.prop === 'display' && /(inline-)?grid/.test(subDecl.value);
-        var gridTemplate = subDecl.prop.startsWith('grid-template');
-        var gridGap = /^grid-([A-z]+-)?gap/.test(subDecl.prop);
+      return decl.parent.nodes.some(function (node) {
+        if (node.type !== 'decl') return false;
+        var displayGrid = node.prop === 'display' && /(inline-)?grid/.test(node.value);
+        var gridTemplate = node.prop.startsWith('grid-template');
+        var gridGap = /^grid-([A-z]+-)?gap/.test(node.prop);
         return displayGrid || gridTemplate || gridGap;
       });
     }
 
     function insideFlex(decl) {
-      return decl.parent.some(function (subDecl) {
-        return subDecl.prop === 'display' && /(inline-)?flex/.test(subDecl.value);
+      return decl.parent.some(function (node) {
+        return node.prop === 'display' && /(inline-)?flex/.test(node.value);
       });
     }
 
@@ -738,8 +739,16 @@ function () {
         } else {
           value = isParentGrid;
         }
-      } else {
+      } else if (typeof this.prefixes.options.grid !== 'undefined') {
         value = this.prefixes.options.grid;
+      } else if (typeof process.env.AUTOPREFIXER_GRID !== 'undefined') {
+        if (process.env.AUTOPREFIXER_GRID === 'autoplace') {
+          value = 'autoplace';
+        } else {
+          value = true;
+        }
+      } else {
+        value = false;
       }
     }
 

package/lib/selector.js

@@ -4,6 +4,9 @@ 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 _require = require('postcss'),
+    list = _require.list;
+
 var OldSelector = require('./old-selector');
 
 var Prefixer = require('./prefixer');
@@ -74,29 +77,66 @@ function (_Prefixer) {
   ;
 
   _proto.prefixeds = function prefixeds(rule) {
+    var _this2 = this;
+
     if (rule._autoprefixerPrefixeds) {
-      return rule._autoprefixerPrefixeds;
+      if (rule._autoprefixerPrefixeds[this.name]) {
+        return rule._autoprefixerPrefixeds;
+      }
+    } else {
+      rule._autoprefixerPrefixeds = {};
     }
 
     var prefixeds = {};
 
-    for (var _iterator = this.possible(), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref;
+    if (rule.selector.includes(',')) {
+      var ruleParts = list.comma(rule.selector);
+      var toProcess = ruleParts.filter(function (el) {
+        return el.includes(_this2.name);
+      });
+
+      var _loop = function _loop() {
+        if (_isArray) {
+          if (_i >= _iterator.length) return "break";
+          _ref = _iterator[_i++];
+        } else {
+          _i = _iterator.next();
+          if (_i.done) return "break";
+          _ref = _i.value;
+        }
+
+        var prefix = _ref;
+        prefixeds[prefix] = toProcess.map(function (el) {
+          return _this2.replace(el, prefix);
+        }).join(', ');
+      };
 
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref = _i.value;
+      for (var _iterator = this.possible(), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
+        var _ref;
+
+        var _ret = _loop();
+
+        if (_ret === "break") break;
       }
+    } else {
+      for (var _iterator2 = this.possible(), _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 prefix = _ref;
-      prefixeds[prefix] = this.replace(rule.selector, prefix);
+        var prefix = _ref2;
+        prefixeds[prefix] = this.replace(rule.selector, prefix);
+      }
     }
 
-    rule._autoprefixerPrefixeds = prefixeds;
+    rule._autoprefixerPrefixeds[this.name] = prefixeds;
     return rule._autoprefixerPrefixeds;
   }
   /**
@@ -116,8 +156,8 @@ function (_Prefixer) {
 
       var some = false;
 
-      for (var key in prefixeds) {
-        var prefixed = prefixeds[key];
+      for (var key in prefixeds[this.name]) {
+        var prefixed = prefixeds[this.name][key];
 
         if (before.selector === prefixed) {
           if (prefix === key) {
@@ -159,7 +199,7 @@ function (_Prefixer) {
     }
 
     var cloned = this.clone(rule, {
-      selector: prefixeds[prefix]
+      selector: prefixeds[this.name][prefix]
     });
     rule.parent.insertBefore(rule, cloned);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autoprefixer",
-  "version": "9.6.2",
+  "version": "9.7.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,17 +10,18 @@
     "node": ">=6.0.0"
   },
   "dependencies": {
-    "browserslist": "^4.7.0",
-    "caniuse-lite": "^1.0.30000998",
+    "browserslist": "^4.7.2",
+    "caniuse-lite": "^1.0.30001004",
     "chalk": "^2.4.2",
     "normalize-range": "^0.1.2",
     "num2fraction": "^1.2.2",
-    "postcss": "^7.0.18",
+    "postcss": "^7.0.19",
     "postcss-value-parser": "^4.0.2"
   },
   "bin": {
     "autoprefixer": "./bin/autoprefixer"
   },
+  "eslintIgnore": ["build/"],
   "browser": {
     "chalk": false
   },