autoprefixer 9.7.0 → 9.7.4

package/CHANGELOG.md

@@ -1,6 +1,20 @@
 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 9.7.4
+* Fix warning text (by Dmitry Ishkov).
+
+## 9.7.3
+* Fix compatibility with PostCSS Modules.
+
+## 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.

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)
 
@@ -309,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 = {
@@ -622,16 +624,53 @@ to increase performance.
     * `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.
+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.
 
-Add variable before CLI command, which will build your CSS:
+[Create React App]: (https://reactjs.org/docs/create-a-new-react-app.html#create-react-app)
 
-```sh
-AUTOPREFIXER_GRID=autoplace npm build
+### 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"
+},
 ```
 
-See also [Browserslist environment variables].
+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
 

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

@@ -16,7 +16,7 @@ var data = require('../data/prefixes');
 
 var info = require('./info');
 
-var WARNING = '\n' + '  Replace Autoprefixer `browsers` option to Browserslist config.\n' + '  Use `browserslist` key in `package.json` or `.browserslistrc` file.\n' + '\n' + '  Using `browsers` option cause some error. Browserslist config \n' + '  can be used for Babel, Autoprefixer, postcss-normalize and other tools.\n' + '\n' + '  If you really need to use option, rename it to `overrideBrowserslist`.\n' + '\n' + '  Learn more at:\n' + '  https://github.com/browserslist/browserslist#readme\n' + '  https://twitter.com/browserslist\n' + '\n';
+var WARNING = '\n' + '  Replace Autoprefixer `browsers` option to Browserslist config.\n' + '  Use `browserslist` key in `package.json` or `.browserslistrc` file.\n' + '\n' + '  Using `browsers` option can cause errors. Browserslist config \n' + '  can be used for Babel, Autoprefixer, postcss-normalize and other tools.\n' + '\n' + '  If you really need to use option, rename it to `overrideBrowserslist`.\n' + '\n' + '  Learn more at:\n' + '  https://github.com/browserslist/browserslist#readme\n' + '  https://twitter.com/browserslist\n' + '\n';
 
 function isPlainObject(obj) {
   return Object.prototype.toString.apply(obj) === '[object Object]';

package/lib/hacks/grid-template-areas.js

@@ -18,7 +18,7 @@ var _require = require('./grid-utils'),
     inheritGridGap = _require.inheritGridGap;
 
 function getGridRows(tpl) {
-  return tpl.trim().slice(1, -1).split(/['"]\s*['"]?/g);
+  return tpl.trim().slice(1, -1).split(/["']\s*["']?/g);
 }
 
 var GridTemplateAreas =

package/lib/hacks/grid-utils.js

@@ -235,7 +235,7 @@ function parseGridAreas(_ref6) {
 
 
 function testTrack(node) {
-  return node.type === 'word' && /^\[.+\]$/.test(node.value);
+  return node.type === 'word' && /^\[.+]$/.test(node.value);
 }
 
 function verifyRowSize(result) {

package/lib/hacks/transform-decl.js

@@ -76,7 +76,7 @@ function (_Declaration) {
     decl = _Declaration.prototype.set.call(this, decl, prefix);
 
     if (prefix === '-ms-') {
-      decl.value = decl.value.replace(/rotateZ/gi, 'rotate');
+      decl.value = decl.value.replace(/rotatez/gi, 'rotate');
     }
 
     return decl;

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'));
@@ -97,8 +98,8 @@ function () {
     this.processor = new Processor(this);
   }
   /**
-     * Return clone instance to remove all prefixes
-     */
+   * Return clone instance to remove all prefixes
+   */
 
 
   var _proto = Prefixes.prototype;
@@ -118,8 +119,8 @@ function () {
     return this.cleanerCache;
   }
   /**
-     * Select prefixes from data, which is necessary for selected browsers
-     */
+   * Select prefixes from data, which is necessary for selected browsers
+   */
   ;
 
   _proto.select = function select(list) {
@@ -195,8 +196,8 @@ function () {
     return selected;
   }
   /**
-     * Sort vendor prefixes
-     */
+   * Sort vendor prefixes
+   */
   ;
 
   _proto.sort = function sort(prefixes) {
@@ -212,8 +213,8 @@ function () {
     });
   }
   /**
-     * Cache prefixes data to fast CSS processing
-     */
+   * Cache prefixes data to fast CSS processing
+   */
   ;
 
   _proto.preprocess = function preprocess(selected) {
@@ -435,8 +436,8 @@ function () {
     }
   }
   /**
-     * Return unprefixed version of property
-     */
+   * Return unprefixed version of property
+   */
   ;
 
   _proto.unprefixed = function unprefixed(prop) {
@@ -449,16 +450,16 @@ function () {
     return value;
   }
   /**
-     * Normalize prefix for remover
-     */
+   * Normalize prefix for remover
+   */
   ;
 
   _proto.normalize = function normalize(prop) {
     return this.decl(prop).normalize(prop);
   }
   /**
-     * Return prefixed version of property
-     */
+   * Return prefixed version of property
+   */
   ;
 
   _proto.prefixed = function prefixed(prop, prefix) {
@@ -466,8 +467,8 @@ function () {
     return this.decl(prop).prefixed(prop, prefix);
   }
   /**
-     * Return values, which must be prefixed in selected property
-     */
+   * Return values, which must be prefixed in selected property
+   */
   ;
 
   _proto.values = function values(type, prop) {
@@ -482,8 +483,8 @@ function () {
     }
   }
   /**
-     * Group declaration by unprefixed property to check them
-     */
+   * Group declaration by unprefixed property to check them
+   */
   ;
 
   _proto.group = function group(decl) {

package/lib/processor.js

@@ -360,20 +360,24 @@ function () {
 
       var unprefixed = _this.prefixes.unprefixed(decl.prop);
 
-      for (var _iterator3 = _this.prefixes.values('add', unprefixed), _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-        var _ref3;
+      var list = _this.prefixes.values('add', unprefixed);
 
-        if (_isArray3) {
-          if (_i3 >= _iterator3.length) break;
-          _ref3 = _iterator3[_i3++];
-        } else {
-          _i3 = _iterator3.next();
-          if (_i3.done) break;
-          _ref3 = _i3.value;
-        }
+      if (Array.isArray(list)) {
+        for (var _iterator3 = list, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
+          var _ref3;
+
+          if (_isArray3) {
+            if (_i3 >= _iterator3.length) break;
+            _ref3 = _iterator3[_i3++];
+          } else {
+            _i3 = _iterator3.next();
+            if (_i3.done) break;
+            _ref3 = _i3.value;
+          }
 
-        var value = _ref3;
-        value.process(decl, result);
+          var value = _ref3;
+          if (value.process) value.process(decl, result);
+        }
       }
 
       Value.save(_this.prefixes, decl);
@@ -482,11 +486,8 @@ function () {
         }
 
         var checker = _ref5;
-
-        if (!checker.check(decl.value)) {
-          continue;
-        }
-
+        if (!checker.check) continue;
+        if (!checker.check(decl.value)) continue;
         unprefixed = checker.unprefixed;
 
         var _notHack = _this2.prefixes.group(decl).down(function (other) {

package/lib/selector.js

@@ -47,7 +47,7 @@ function (_Prefixer) {
   ;
 
   _proto.prefixed = function prefixed(prefix) {
-    return this.name.replace(/^([^\w]*)/, "$1" + prefix);
+    return this.name.replace(/^(\W*)/, "$1" + prefix);
   }
   /**
      * Lazy loadRegExp for name

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/lib/utils.js

@@ -56,7 +56,7 @@ module.exports = {
      * Escape RegExp symbols
      */
   escapeRegexp: function escapeRegexp(string) {
-    return string.replace(/[.?*+^$[\]\\(){}|-]/g, '\\$&');
+    return string.replace(/[$()*+-.?[\\\]^{|}]/g, '\\$&');
   },
 
   /**

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "autoprefixer",
-  "version": "9.7.0",
+  "version": "9.7.4",
   "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"],
+  "bin": "./bin/autoprefixer",
+  "funding": {
+    "type": "tidelift",
+    "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+  },
   "author": "Andrey Sitnik <andrey@sitnik.ru>",
   "license": "MIT",
   "repository": "postcss/autoprefixer",
@@ -10,17 +15,14 @@
     "node": ">=6.0.0"
   },
   "dependencies": {
-    "browserslist": "^4.7.2",
-    "caniuse-lite": "^1.0.30001004",
+    "browserslist": "^4.8.3",
+    "caniuse-lite": "^1.0.30001020",
     "chalk": "^2.4.2",
     "normalize-range": "^0.1.2",
     "num2fraction": "^1.2.2",
-    "postcss": "^7.0.19",
+    "postcss": "^7.0.26",
     "postcss-value-parser": "^4.0.2"
   },
-  "bin": {
-    "autoprefixer": "./bin/autoprefixer"
-  },
   "eslintIgnore": ["build/"],
   "browser": {
     "chalk": false