autoprefixer 9.6.4 → 9.7.2

package/CHANGELOG.md

@@ -1,6 +1,21 @@
 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 9.7.2
+* Add `-ms-user-select: element` support.
+* Add funding link for `npm fund`.
+
+## 9.7.1
+* Avoid unnecessary transitions in prefixed selectors (by Andrey Alexandrov).
+* Fix `fit-content` for Firefox.
+
+## 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.
 

package/README.md

@@ -95,6 +95,8 @@ Twitter account for news and releases: [@autoprefixer].
 - [Warnings](#warnings)
 - [Disabling](#disabling)
 - [Options](#options)
+- [Environment variables](#environment-variables)
+  - [Using environment variables to support CSS Grid prefixes in Create React App](#using-environment-variables-to-support-css-grid-prefixes-in-create-react-app)
 - [Grid Autoplacement support in IE](#grid-autoplacement-support-in-ie)
 - [Debug](#debug)
 
@@ -113,10 +115,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 +132,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.
@@ -307,7 +311,7 @@ module.exports = {
 ### CSS-in-JS
 
 The best way to use PostCSS with CSS-in-JS is [`astroturf`].
-Add it’s loader to your `webpack.config.js`:
+Add its loader to your `webpack.config.js`:
 
 ```js
 module.exports = {
@@ -582,7 +586,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 +612,82 @@ 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 are useful, when you want to change Autoprefixer options but don't have access to config files.
+[Create React App] is a good example of this.
+
+[Create React App]: (https://reactjs.org/docs/create-a-new-react-app.html#create-react-app)
+
+### Using environment variables to support CSS Grid prefixes in Create React App
+
+1. Install the latest version of Autoprefixer and [cross-env](https://www.npmjs.com/package/cross-env):
+
+```
+npm install autoprefixer@latest cross-env --save-dev
+```
+
+2. Under `"browserslist"` > `"development"` in the package.json file, add `"last 1 ie version"`
+
+```
+"browserslist": {
+  "production": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all"
+  ],
+  "development": [
+    "last 1 chrome version",
+    "last 1 firefox version",
+    "last 1 safari version",
+    "last 1 ie version"
+  ]
+}
+```
+
+3. Update `"scripts"` in the package.json file to the following:
+
+```
+"scripts": {
+  "start": "cross-env AUTOPREFIXER_GRID=autoplace react-scripts start",
+  "build": "cross-env AUTOPREFIXER_GRID=autoplace react-scripts build",
+  "test": "cross-env AUTOPREFIXER_GRID=autoplace react-scripts test",
+  "eject": "react-scripts eject"
+},
+```
+
+Replace `autoplace` with `no-autoplace` in the above example if you prefer to disable Autoprefixer Grid autoplacement support.
+
+Now when you run `npm start` you will see CSS Grid prefixes automatically being applied to your output CSS.
+
+See also [Browserslist environment variables] for more examples on how to use environment variables in your project.
+
+[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 +804,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 +834,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 +1091,6 @@ JS API is also available:
 console.log(autoprefixer().info())
 ```
 
-
 ## Security Contact
 
 To report a security vulnerability, please use the [Tidelift security contact].

package/data/prefixes.js

@@ -374,9 +374,10 @@ f(require('caniuse-lite/data/features/css3-tabsize'), function (browsers) {
 
 var intrinsic = require('caniuse-lite/data/features/intrinsic-width');
 
+var sizeProps = ['width', 'min-width', 'max-width', 'height', 'min-height', 'max-height', 'inline-size', 'min-inline-size', 'max-inline-size', 'block-size', 'min-block-size', 'max-block-size', 'grid', 'grid-template', 'grid-template-rows', 'grid-template-columns', 'grid-auto-columns', 'grid-auto-rows'];
 f(intrinsic, function (browsers) {
-  return prefix(['max-content', 'min-content', 'fit-content'], {
-    props: ['width', 'min-width', 'max-width', 'height', 'min-height', 'max-height', 'inline-size', 'min-inline-size', 'max-inline-size', 'block-size', 'min-block-size', 'max-block-size', 'grid', 'grid-template', 'grid-template-rows', 'grid-template-columns', 'grid-auto-columns', 'grid-auto-rows'],
+  return prefix(['max-content', 'min-content'], {
+    props: sizeProps,
     feature: 'intrinsic-width',
     browsers: browsers
   });
@@ -385,7 +386,16 @@ f(intrinsic, {
   match: /x|\s#4/
 }, function (browsers) {
   return prefix(['fill', 'fill-available', 'stretch'], {
-    props: ['width', 'min-width', 'max-width', 'height', 'min-height', 'max-height', 'inline-size', 'min-inline-size', 'max-inline-size', 'block-size', 'min-block-size', 'max-block-size', 'grid', 'grid-template', 'grid-template-rows', 'grid-template-columns', 'grid-auto-columns', 'grid-auto-rows'],
+    props: sizeProps,
+    feature: 'intrinsic-width',
+    browsers: browsers
+  });
+});
+f(intrinsic, {
+  match: /x|\s#5/
+}, function (browsers) {
+  return prefix(['fit-content'], {
+    props: sizeProps,
     feature: 'intrinsic-width',
     browsers: browsers
   });

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/hacks/user-select.js

@@ -0,0 +1,38 @@
+"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 UserSelect =
+/*#__PURE__*/
+function (_Declaration) {
+  _inheritsLoose(UserSelect, _Declaration);
+
+  function UserSelect() {
+    return _Declaration.apply(this, arguments) || this;
+  }
+
+  var _proto = UserSelect.prototype;
+
+  /**
+   * Change prefixed value for IE
+   */
+  _proto.set = function set(decl, prefix) {
+    if (prefix === '-ms-' && decl.value === 'contain') {
+      decl.value = 'element';
+    }
+
+    return _Declaration.prototype.set.call(this, decl, prefix);
+  };
+
+  return UserSelect;
+}(Declaration);
+
+_defineProperty(UserSelect, "names", ['user-select']);
+
+module.exports = UserSelect;

package/lib/prefixes.js

@@ -41,6 +41,7 @@ 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/user-select'));
 Declaration.hack(require('./hacks/flex-shrink'));
 Declaration.hack(require('./hacks/break-props'));
 Declaration.hack(require('./hacks/color-adjust'));

package/lib/processor.js

@@ -739,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/lib/transition.js

@@ -8,6 +8,8 @@ var vendor = require('postcss').vendor;
 
 var list = require('postcss').list;
 
+var Browsers = require('./browsers');
+
 var Transition =
 /*#__PURE__*/
 function () {
@@ -28,7 +30,8 @@ function () {
 
     var prefix, prop;
     var add = this.prefixes.add[decl.prop];
-    var declPrefixes = add && add.prefixes || [];
+    var vendorPrefixes = this.ruleVendorPrefixes(decl);
+    var declPrefixes = vendorPrefixes || add && add.prefixes || [];
     var params = this.parse(decl.value);
     var names = params.map(function (i) {
       return _this.findProp(i);
@@ -69,6 +72,12 @@ function () {
           prefix = _i3.value;
         }
 
+        if (vendorPrefixes && !vendorPrefixes.some(function (p) {
+          return prefix.includes(p);
+        })) {
+          continue;
+        }
+
         var prefixed = this.prefixes.prefixed(prop, prefix);
 
         if (prefixed !== '-ms-transform' && !names.includes(prefixed)) {
@@ -473,6 +482,25 @@ function () {
     }
 
     return undefined;
+  }
+  /**
+   * Check if transition prop is inside vendor specific rule
+   */
+  ;
+
+  _proto.ruleVendorPrefixes = function ruleVendorPrefixes(decl) {
+    var parent = decl.parent;
+
+    if (parent.type !== 'rule') {
+      return false;
+    } else if (!parent.selector.includes(':-')) {
+      return false;
+    }
+
+    var selectors = Browsers.prefixes().filter(function (s) {
+      return parent.selector.includes(':' + s);
+    });
+    return selectors.length > 0 ? selectors : false;
   };
 
   return Transition;

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "autoprefixer",
-  "version": "9.6.4",
+  "version": "9.7.2",
   "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"],
+  "funding": {
+    "type": "tidelift",
+    "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+  },
   "author": "Andrey Sitnik <andrey@sitnik.ru>",
   "license": "MIT",
   "repository": "postcss/autoprefixer",
@@ -10,17 +14,18 @@
     "node": ">=6.0.0"
   },
   "dependencies": {
-    "browserslist": "^4.7.0",
-    "caniuse-lite": "^1.0.30000998",
+    "browserslist": "^4.7.3",
+    "caniuse-lite": "^1.0.30001010",
     "chalk": "^2.4.2",
     "normalize-range": "^0.1.2",
     "num2fraction": "^1.2.2",
-    "postcss": "^7.0.18",
+    "postcss": "^7.0.23",
     "postcss-value-parser": "^4.0.2"
   },
   "bin": {
     "autoprefixer": "./bin/autoprefixer"
   },
+  "eslintIgnore": ["build/"],
   "browser": {
     "chalk": false
   },