autoprefixer 9.7.1 → 9.7.2

package/CHANGELOG.md

@@ -1,6 +1,10 @@
 # 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.

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

@@ -1,8 +1,12 @@
 {
   "name": "autoprefixer",
-  "version": "9.7.1",
+  "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,12 +14,12 @@
     "node": ">=6.0.0"
   },
   "dependencies": {
-    "browserslist": "^4.7.2",
-    "caniuse-lite": "^1.0.30001006",
+    "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.21",
+    "postcss": "^7.0.23",
     "postcss-value-parser": "^4.0.2"
   },
   "bin": {