autoprefixer 10.3.2 → 10.3.6

package/README.md

@@ -65,1051 +65,5 @@ Twitter account for news and releases: [@autoprefixer].
 [cult]:             http://cultofmartians.com/tasks/autoprefixer-grid.html
 
 
-## Contents
-
-* [Contents](#contents)
-* [Browsers](#browsers)
-* [FAQ](#faq)
-  * [Does Autoprefixer polyfill Grid Layout for IE?](#does-autoprefixer-polyfill-grid-layout-for-ie)
-  * [Does it add polyfills?](#does-it-add-polyfills)
-  * [Why doesn’t Autoprefixer add prefixes to `border-radius`?](#why-doesnt-autoprefixer-add-prefixes-to-border-radius)
-  * [Why does Autoprefixer use unprefixed properties in `@-webkit-keyframes`?](#why-does-autoprefixer-use-unprefixed-properties-in--webkit-keyframes)
-  * [How to work with legacy `-webkit-` only code?](#how-to-work-with-legacy--webkit--only-code)
-  * [Does Autoprefixer add `-epub-` prefix?](#does-autoprefixer-add--epub--prefix)
-  * [Why doesn’t Autoprefixer transform generic font-family `system-ui`?](#why-doesnt-autoprefixer-transform-generic-font-family-system-ui)
-* [Usage](#usage)
-  * [Gulp](#gulp)
-  * [Webpack](#webpack)
-  * [CSS-in-JS](#css-in-js)
-  * [CLI](#cli)
-  * [Other Build Tools](#other-build-tools)
-    * [Preprocessors](#preprocessors)
-    * [GUI Tools](#gui-tools)
-  * [JavaScript](#javascript)
-  * [Text Editors and IDE](#text-editors-and-ide)
-* [Warnings](#warnings)
-* [Disabling](#disabling)
-  * [Prefixes](#prefixes)
-  * [Features](#features)
-  * [Control Comments](#control-comments)
-* [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)
-  * [Beware of enabling autoplacement in old projects](#beware-of-enabling-autoplacement-in-old-projects)
-  * [Autoplacement limitations](#autoplacement-limitations)
-    * [Both columns and rows must be defined](#both-columns-and-rows-must-be-defined)
-    * [Repeat auto-fit and auto-fill are not supported](#repeat-auto-fit-and-auto-fill-are-not-supported)
-    * [No manual cell placement or column/row spans allowed inside an autoplacement grid](#no-manual-cell-placement-or-columnrow-spans-allowed-inside-an-autoplacement-grid)
-    * [Do not create `::before` and `::after` pseudo elements](#do-not-create-before-and-after-pseudo-elements)
-    * [When changing the `grid gap` value, columns and rows must be re-declared](#when-changing-the-grid-gap-value-columns-and-rows-must-be-re-declared)
-* [Debug](#debug)
-* [Security Contact](#security-contact)
-* [For Enterprise](#for-enterprise)
-
-## Browsers
-
-Autoprefixer uses [Browserslist], so you can specify the browsers
-you want to target in your project with queries like `> 5%`
-(see [Best Practices]).
-
-The best way to provide browsers is a `.browserslistrc` file in your project
-root, or by adding a `browserslist` key to your `package.json`.
-
-We recommend the use of these options over passing options to Autoprefixer so
-that the config can be shared with other tools such as [babel-preset-env] and
-[Stylelint].
-
-See [Browserslist docs] for queries, browser names, config format, and defaults.
-
-[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/browserslist/browserslist
-[Stylelint]:         https://stylelint.io/
-
-
-## FAQ
-
-### 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.
-
-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.
-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.
-
-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 {
-  display: grid;
-  grid-gap: 33px;
-  grid-template:
-    "head head  head" 1fr
-    "nav  main  main" minmax(100px, 1fr)
-    "nav  foot  foot" 2fr /
-    1fr   100px 1fr;
-}
-.page__head {
-  grid-area: head;
-}
-.page__nav {
-  grid-area: nav;
-}
-.page__main {
-  grid-area: main;
-}
-.page__footer {
-  grid-area: foot;
-}
-```
-
-See also:
-
-* [The guide about Grids in IE and Autoprefixer].
-* [`postcss-gap-properties`] to use new `gap` property
-  instead of old `grid-gap`.
-* [`postcss-grid-kiss`] has alternate “everything in one property” syntax,
-  which makes using Autoprefixer’s Grid translations safer.
-
-[The guide about Grids in IE and Autoprefixer]: https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/
-[`postcss-gap-properties`]:                     https://github.com/jonathantneal/postcss-gap-properties
-[`postcss-grid-kiss`]:                          https://github.com/sylvainpolletvillard/postcss-grid-kiss
-
-
-### Does it add polyfills?
-
-No. Autoprefixer only adds prefixes.
-
-Most new CSS features will require client side JavaScript to handle a new
-behavior correctly.
-
-Depending on what you consider to be a “polyfill”, you can take a look at some
-other tools and libraries. If you are just looking for syntax sugar,
-you might take a look at:
-
-- [postcss-preset-env] is a plugins preset with polyfills and Autoprefixer
-  to write future CSS today.
-- [Oldie], a PostCSS plugin that handles some IE hacks (opacity, rgba, etc).
-- [postcss-flexbugs-fixes], a PostCSS plugin to fix flexbox issues.
-
-[postcss-flexbugs-fixes]: https://github.com/luisrudge/postcss-flexbugs-fixes
-[postcss-preset-env]:     https://github.com/jonathantneal/postcss-preset-env
-[Oldie]:                  https://github.com/jonathantneal/oldie
-
-
-### Why doesn’t Autoprefixer add prefixes to `border-radius`?
-
-Developers are often surprised by how few prefixes are required today.
-If Autoprefixer doesn’t add prefixes to your CSS, check if they’re still
-required on [Can I Use].
-
-[Can I Use]: https://caniuse.com/
-
-
-### Why does Autoprefixer use unprefixed properties in `@-webkit-keyframes`?
-
-Browser teams can remove some prefixes before others, so we try to use all
-combinations of prefixed/unprefixed values.
-
-
-### How to work with legacy `-webkit-` only code?
-
-Autoprefixer needs unprefixed property to add prefixes. So if you only
-wrote `-webkit-gradient` without W3C’s `gradient`,
-Autoprefixer will not add other prefixes.
-
-But [PostCSS] has plugins to convert CSS to unprefixed state.
-Use [postcss-unprefix] before Autoprefixer.
-
-[postcss-unprefix]: https://github.com/gucong3000/postcss-unprefix
-
-
-### Does Autoprefixer add `-epub-` prefix?
-
-No, Autoprefixer works only with browsers prefixes from Can I Use.
-But you can use [postcss-epub] for prefixing ePub3 properties.
-
-[postcss-epub]: https://github.com/Rycochet/postcss-epub
-
-
-### Why doesn’t Autoprefixer transform generic font-family `system-ui`?
-
-`system-ui` is technically not a prefix and the transformation is not
-future-proof. You can use [postcss-font-family-system-ui] to transform
-`system-ui` to a practical font-family list.
-
-[postcss-font-family-system-ui]: https://github.com/JLHwung/postcss-font-family-system-ui
-
-
-## Usage
-
-### Gulp
-
-In Gulp you can use [gulp-postcss] with `autoprefixer` npm package.
-
-```js
-gulp.task('autoprefixer', () => {
-  const autoprefixer = require('autoprefixer')
-  const sourcemaps = require('gulp-sourcemaps')
-  const postcss = require('gulp-postcss')
-
-  return gulp.src('./src/*.css')
-    .pipe(sourcemaps.init())
-    .pipe(postcss([ autoprefixer() ]))
-    .pipe(sourcemaps.write('.'))
-    .pipe(gulp.dest('./dest'))
-})
-```
-
-With `gulp-postcss` you also can combine Autoprefixer
-with [other PostCSS plugins].
-
-[gulp-postcss]:          https://github.com/postcss/gulp-postcss
-[other PostCSS plugins]: https://github.com/postcss/postcss#plugins
-
-
-### Webpack
-
-In [webpack] you can use [postcss-loader] with `autoprefixer`
-and [other PostCSS plugins].
-
-```js
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: ["style-loader", "css-loader", "postcss-loader"]
-      }
-    ]
-  }
-}
-```
-
-And create a `postcss.config.js` with:
-
-```js
-module.exports = {
-  plugins: [
-    require('autoprefixer')
-  ]
-}
-```
-
-[other PostCSS plugins]: https://github.com/postcss/postcss#plugins
-[postcss-loader]:        https://github.com/postcss/postcss-loader
-[webpack]:               https://webpack.js.org/
-
-
-### CSS-in-JS
-
-The best way to use PostCSS with CSS-in-JS is [`astroturf`].
-Add its loader to your `webpack.config.js`:
-
-```js
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'postcss-loader'],
-      },
-      {
-        test: /\.jsx?$/,
-        use: ['babel-loader', 'astroturf/loader'],
-      }
-    ]
-  }
-}
-```
-
-Then create `postcss.config.js`:
-
-```js
-module.exports = {
-  plugins: [
-    require('autoprefixer')
-  ]
-}
-```
-
-[`astroturf`]: https://github.com/4Catalyzer/astroturf
-
-
-### CLI
-
-You can use the [postcss-cli] to run Autoprefixer from CLI:
-
-```sh
-npm install postcss-cli autoprefixer
-npx postcss *.css --use autoprefixer -d build/
-```
-
-See `postcss -h` for help.
-
-[postcss-cli]: https://github.com/postcss/postcss-cli
-
-
-### Other Build Tools
-
-* **Grunt:** [grunt-postcss]
-* **Ruby on Rails**: [autoprefixer-rails]
-* **Neutrino**: [neutrino-middleware-postcss]
-* **Jekyll**: add `autoprefixer-rails` and `jekyll-assets` to `Gemfile`
-* **Brunch**: [postcss-brunch]
-* **Broccoli**: [broccoli-postcss]
-* **Middleman**: [middleman-autoprefixer]
-* **Mincer**: add `autoprefixer` npm package and enable it:
-  `environment.enable('autoprefixer')`
-
-[neutrino-middleware-postcss]: https://www.npmjs.com/package/neutrino-middleware-postcss
-[middleman-autoprefixer]:      https://github.com/middleman/middleman-autoprefixer
-[autoprefixer-rails]:          https://github.com/ai/autoprefixer-rails
-[broccoli-postcss]:            https://github.com/jeffjewiss/broccoli-postcss
-[postcss-brunch]:              https://github.com/iamvdo/postcss-brunch
-[grunt-postcss]:               https://github.com/C-Lodder/grunt-postcss
-
-
-#### Preprocessors
-
-* **Less**: [less-plugin-autoprefix]
-* **Stylus**: [autoprefixer-stylus]
-* **Compass**: [autoprefixer-rails#compass]
-
-[less-plugin-autoprefix]: https://github.com/less/less-plugin-autoprefix
-[autoprefixer-stylus]:    https://github.com/jenius/autoprefixer-stylus
-[autoprefixer-rails#compass]:     https://github.com/ai/autoprefixer-rails#compass
-
-
-#### GUI Tools
-
-* [CodeKit](https://codekitapp.com/help/autoprefixer/)
-* [Prepros](https://prepros.io)
-
-
-### JavaScript
-
-You can use Autoprefixer with [PostCSS] in your Node.js application
-or if you want to develop an Autoprefixer plugin for a new environment.
-
-```js
-const autoprefixer = require('autoprefixer')
-const postcss = require('postcss')
-
-postcss([ autoprefixer ]).process(css).then(result => {
-  result.warnings().forEach(warn => {
-    console.warn(warn.toString())
-  })
-  console.log(result.css)
-})
-```
-
-There is also a [standalone build] for the browser or for a non-Node.js runtime.
-
-You can use [html-autoprefixer] to process HTML with inlined CSS.
-
-[html-autoprefixer]: https://github.com/RebelMail/html-autoprefixer
-[standalone build]:  https://raw.github.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js
-[PostCSS]:           https://github.com/postcss/postcss
-
-
-### Text Editors and IDE
-
-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 [Parcel].
-They work much better and will open you a whole new world of useful plugins
-and automation.
-
-If you can’t move to a build tool, you can use text editor plugins:
-
-* [Visual Studio Code](https://github.com/mrmlnc/vscode-autoprefixer)
-* [Atom Editor](https://github.com/sindresorhus/atom-autoprefixer)
-* [Sublime Text](https://github.com/sindresorhus/sublime-autoprefixer)
-* [Brackets](https://github.com/mikaeljorhult/brackets-autoprefixer)
-
-[Parcel]: https://parceljs.org/
-
-
-## Warnings
-
-Autoprefixer uses the [PostCSS warning API] to warn about really important
-problems in your CSS:
-
-* Old direction syntax in gradients.
-* Old unprefixed `display: box` instead of `display: flex`
-  by latest specification version.
-
-You can get warnings from `result.warnings()`:
-
-```js
-result.warnings().forEach(warn => {
-  console.warn(warn.toString())
-})
-```
-
-Every Autoprefixer runner should display these warnings.
-
-[PostCSS warning API]: http://api.postcss.org/Warning.html
-
-
-## Disabling
-
-### Prefixes
-
-Autoprefixer was designed to have no interface – it just works.
-If you need some browser specific hack just write a prefixed property
-after the unprefixed one.
-
-```css
-a {
-  transform: scale(0.5);
-  -moz-transform: scale(0.6);
-}
-```
-
-If some prefixes were generated incorrectly, please create an [issue on GitHub].
-
-[issue on GitHub]: https://github.com/postcss/autoprefixer/issues
-
-
-### Features
-
-You can use these plugin options to control some of Autoprefixer’s features.
-
-* `grid: "autoplace"` will enable `-ms-` prefixes for Grid Layout including some
-  [limited autoplacement support](#grid-autoplacement-support-in-ie).
-* `supports: false` will disable `@supports` parameters prefixing.
-* `flexbox: false` will disable flexbox properties prefixing.
-  Or `flexbox: "no-2009"` will add prefixes only for final and IE
-  versions of specification.
-* `remove: false` will disable cleaning outdated prefixes.
-
-You should set them inside the plugin like so:
-
-```js
-autoprefixer({ grid: 'autoplace' })
-```
-
-
-### Control Comments
-
-If you do not need Autoprefixer in some part of your CSS,
-you can use control comments to disable Autoprefixer.
-
-```css
-.a {
-  transition: 1s; /* will be prefixed */
-}
-
-.b {
-  /* autoprefixer: off */
-  transition: 1s; /* will not be prefixed */
-}
-
-.c {
-  /* autoprefixer: ignore next */
-  transition: 1s; /* will not be prefixed */
-  mask: url(image.png); /* will be prefixed */
-}
-```
-
-There are three types of control comments:
-
-* `/* autoprefixer: (on|off) */`: enable/disable all Autoprefixer translations for the
-  whole block both *before* and *after* the comment.
-* `/* autoprefixer: ignore next */`: disable Autoprefixer only for the next property
-  or next rule selector or at-rule parameters (but not rule/at‑rule body).
-* `/* autoprefixer grid: (autoplace|no-autoplace|off) */`: control how Autoprefixer handles
-  grid translations for the whole block:
-  * `autoplace`: enable grid translations with autoplacement support.
-  * `no-autoplace`: enable grid translations with autoplacement
-    support *disabled* (alias for deprecated value `on`).
-  * `off`: disable all grid translations.
-
-You can also use comments recursively:
-
-```css
-/* autoprefixer: off */
-@supports (transition: all) {
-  /* autoprefixer: on */
-  a {
-    /* autoprefixer: off */
-  }
-}
-```
-
-Note that comments that disable the whole block should not be featured in the same
-block twice:
-
-```css
-/* How not to use block level control comments */
-
-.do-not-do-this {
-  /* autoprefixer: off */
-  transition: 1s;
-  /* autoprefixer: on */
-  transform: rotate(20deg);
-}
-```
-
-
-## Options
-
-Function `autoprefixer(options)` returns a new PostCSS plugin.
-See [PostCSS API] for plugin usage documentation.
-
-```js
-autoprefixer({ cascade: false })
-```
-
-Available options are:
-
-* `env` (string): environment for Browserslist.
-* `cascade` (boolean): should Autoprefixer use Visual Cascade,
-  if CSS is uncompressed. Default: `true`
-* `add` (boolean): should Autoprefixer add prefixes. Default is `true`.
-* `remove` (boolean): should Autoprefixer [remove outdated] prefixes.
-  Default is `true`.
-* `supports` (boolean): should Autoprefixer add prefixes for `@supports`
-  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 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.
-* `overrideBrowserslist` (array): list of queries for target browsers.
-  Try to not use it. The best practice is to use `.browserslistrc` config
-  or `browserslist` key in `package.json` to share target browsers
-  with Babel, ESLint and Stylelint. See [Browserslist docs]
-  for available queries and default value.
-* `ignoreUnknownVersions` (boolean): do not raise error on unknown browser
-  version in Browserslist config. Default is `false`.
-
-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/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 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 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 */
-
-/* autoprefixer grid: autoplace */
-
-.autoplacement-example {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: auto auto;
-  grid-gap: 20px;
-}
-```
-
-```css
-/* Output CSS */
-
-/* autoprefixer grid: autoplace */
-
-.autoplacement-example {
-  display: -ms-grid;
-  display: grid;
-  -ms-grid-columns: 1fr 20px 1fr;
-  grid-template-columns: 1fr 1fr;
-  -ms-grid-rows: auto 20px auto;
-  grid-template-rows: auto auto;
-  grid-gap: 20px;
-}
-
-.autoplacement-example > *:nth-child(1) {
-  -ms-grid-row: 1;
-  -ms-grid-column: 1;
-}
-
-.autoplacement-example > *:nth-child(2) {
-  -ms-grid-row: 1;
-  -ms-grid-column: 3;
-}
-
-.autoplacement-example > *:nth-child(3) {
-  -ms-grid-row: 3;
-  -ms-grid-column: 1;
-}
-
-.autoplacement-example > *:nth-child(4) {
-  -ms-grid-row: 3;
-  -ms-grid-column: 3;
-}
-```
-
-### Beware of enabling autoplacement in old projects
-
-Be careful about enabling autoplacement in any already established projects that have
-previously not used Autoprefixer's grid autoplacement feature before.
-
-If this was your html:
-
-```html
-<div class="grid">
-  <div class="grid-cell"></div>
-</div>
-```
-
-The following CSS will not work as expected with the autoplacement feature enabled:
-
-```css
-/* Unsafe CSS when Autoplacement is enabled */
-
-.grid-cell {
-  grid-column: 2;
-  grid-row: 2;
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, 1fr);
-}
-```
-
-Swapping the rules around will not fix the issue either:
-
-```css
-/* Also unsafe to use this CSS */
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, 1fr);
-}
-
-.grid-cell {
-  grid-column: 2;
-  grid-row: 2;
-}
-```
-
-One way to deal with this issue is to disable autoplacement in the
-grid-declaration rule:
-
-```css
-/* Disable autoplacement to fix the issue */
-
-.grid {
-  /* autoprefixer grid: no-autoplace */
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, 1fr);
-}
-
-.grid-cell {
-  grid-column: 2;
-  grid-row: 2;
-}
-```
-
-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 */
-/* autoprefixer grid: no-autoplace */
-
-/* Old code will function the same way it always has */
-.old-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, 1fr);
-}
-.old-grid-cell {
-  grid-column: 2;
-  grid-row: 2;
-}
-
-/* Enable autoplacement when you want to use it in new code */
-.new-autoplace-friendly-grid {
-  /* autoprefixer grid: autoplace */
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, auto);
-}
-```
-
-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.
-
-### Autoplacement limitations
-
-#### Both columns and rows must be defined
-
-Autoplacement only works inside the explicit grid. The columns and rows need to be defined
-so that Autoprefixer knows how many `nth-child` selectors to generate.
-
-```css
-.not-allowed {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
-.is-allowed {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(10, auto);
-}
-```
-
-#### Repeat auto-fit and auto-fill are not supported
-
-The `repeat(auto-fit, ...)` and `repeat(auto-fill, ...)` grid functionality relies on
-knowledge from the browser about screen dimensions and the number of available grid
-items for it to work properly. Autoprefixer does not have access to this information
-so unfortunately this little snippet will _never_ be IE friendly.
-
-```css
-.grid {
-  /* This will never be IE friendly */
-  grid-template-columns: repeat(auto-fit, min-max(200px, 1fr))
-}
-```
-
-#### 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.
-
-```css
-.autoplacement-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, auto);
-}
-
-/* Grid cells placed inside the explicit grid
-   will break the layout in IE */
-.not-permitted-grid-cell {
-  grid-column: 1;
-  grid-row: 1;
-}
-
-/* Grid cells placed outside the
-   explicit grid will work in IE */
-.permitted-grid-cell {
-  grid-column: 1 / span 2;
-  grid-row: 4;
-}
-```
-
-If manual cell placement is required, we recommend using `grid-template` or
-`grid-template-areas` instead:
-
-```css
-.page {
-  display: grid;
-  grid-gap: 30px;
-  grid-template:
-      "head head"
-      "nav  main" minmax(100px, 1fr)
-      "foot foot" /
-      200px 1fr;
-}
-.page__head {
-  grid-area: head;
-}
-.page__nav {
-  grid-area: nav;
-}
-.page__main {
-  grid-area: main;
-}
-.page__footer {
-  grid-area: foot;
-}
-```
-
-#### Do not create `::before` and `::after` pseudo elements
-
-Let's say you have this HTML:
-
-```html
-<div class="grid">
-  <div class="grid-cell"></div>
-</div>
-```
-
-And you write this CSS:
-
-```css
-.grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: auto;
-}
-
-.grid::before {
-  content: 'before';
-}
-
-.grid::after {
-  content: 'after';
-}
-```
-
-This will be the output:
-
-```css
-.grid {
-  display: -ms-grid;
-  display: grid;
-  -ms-grid-columns: 1fr 1fr;
-  grid-template-columns: 1fr 1fr;
-  -ms-grid-rows: auto;
-  grid-template-rows: auto;
-}
-
-.grid > *:nth-child(1) {
-  -ms-grid-row: 1;
-  -ms-grid-column: 1;
-}
-
-
-.grid > *:nth-child(2) {
-  -ms-grid-row: 1;
-  -ms-grid-column: 2;
-}
-
-.grid::before {
-  content: 'before';
-}
-
-.grid::after {
-  content: 'after';
-}
-```
-
-IE will place `.grid-cell`, `::before` and `::after` in row 1 column 1.
-Modern browsers on the other hand will place `::before` in row 1 column 1,
-`.grid-cell` in row 1 column 2, and `::after` in row 2 column 1.
-
-See this [CodePen](https://codepen.io/daniel-tonon/pen/gBymVw) to see a visualization
-of the issue. View the CodePen in both a modern browser and IE to see the difference.
-
-Note that you can still create `::before` and `::after` elements as long as you manually
-place them outside the explicit grid.
-
-#### When changing the `grid gap` value, columns and rows must be re-declared
-
-If you wish to change the size of a `grid-gap`, you will need to redeclare the grid columns and rows.
-
-```css
-.grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: auto;
-  grid-gap: 50px;
-}
-
-/* This will *NOT* work in IE */
-@media (max-width: 600px) {
-  .grid {
-    grid-gap: 20px;
-  }
-}
-
-/* This will *NOT* work in IE */
-.grid.small-gap {
-  grid-gap: 20px;
-}
-```
-
-```css
-.grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: auto;
-  grid-gap: 50px;
-}
-
-/* This *WILL* work in IE */
-@media (max-width: 600px) {
-  .grid {
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto;
-    grid-gap: 20px;
-  }
-}
-
-/* This *WILL* work in IE */
-.grid.small-gap {
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: auto;
-  grid-gap: 20px;
-}
-```
-
-## Debug
-
-Run `npx autoprefixer --info` in your project directory to check
-which browsers are selected and which properties will be prefixed:
-
-```console
-$ npx autoprefixer --info
-Browsers:
-  Edge: 16
-
-These browsers account for 0.26% of all users globally
-
-At-Rules:
-  @viewport: ms
-
-Selectors:
-  ::placeholder: ms
-
-Properties:
-  appearance: webkit
-  flow-from: ms
-  flow-into: ms
-  hyphens: ms
-  overscroll-behavior: ms
-  region-fragment: ms
-  scroll-snap-coordinate: ms
-  scroll-snap-destination: ms
-  scroll-snap-points-x: ms
-  scroll-snap-points-y: ms
-  scroll-snap-type: ms
-  text-size-adjust: ms
-  text-spacing: ms
-  user-select: ms
-```
-
-JS API is also available:
-
-```js
-console.log(autoprefixer().info())
-```
-
-## Security Contact
-
-To report a security vulnerability, please use the [Tidelift security contact].
-Tidelift will coordinate the fix and disclosure.
-
-[Tidelift security contact]: https://tidelift.com/security
-
-## For Enterprise
-
-Available as part of the Tidelift Subscription.
-
-The maintainers of `autoprefixer` and thousands of other packages are working
-with Tidelift to deliver commercial support and maintenance for the open source
-dependencies you use to build your applications. Save time, reduce risk,
-and improve code health, while paying the maintainers of the exact dependencies
-you use. [Learn more.](https://tidelift.com/subscription/pkg/npm-autoprefixer?utm_source=npm-autoprefixer&utm_medium=referral&utm_campaign=enterprise&utm_term=repo)
+## Docs
+Read **[full docs](https://github.com/postcss/autoprefixer#readme)** on GitHub.

package/data/prefixes.js

@@ -583,7 +583,15 @@ f(prefixIntrinsic, browsers =>
 )
 
 f(prefixIntrinsic, { match: /x|\s#4/ }, browsers =>
-  prefix(['fill', 'fill-available', 'stretch'], {
+  prefix(['fill', 'fill-available'], {
+    props: sizeProps,
+    feature: 'intrinsic-width',
+    browsers
+  })
+)
+
+f(prefixIntrinsic, { match: /x|\s#5/ }, browsers =>
+  prefix(['stretch'], {
     props: sizeProps,
     feature: 'intrinsic-width',
     browsers

package/lib/autoprefixer.js

@@ -1,6 +1,6 @@
+let { yellow, red } = require('nanocolors')
 let browserslist = require('browserslist')
 let { agents } = require('caniuse-lite')
-let colorette = require('colorette')
 
 let Browsers = require('./browsers')
 let Prefixes = require('./prefixes')
@@ -89,15 +89,9 @@ function plugin(...reqs) {
     reqs = options.overrideBrowserslist
   } else if (options.browsers) {
     if (typeof console !== 'undefined' && console.warn) {
-      if (colorette.red) {
-        console.warn(
-          colorette.red(
-            WARNING.replace(/`[^`]+`/g, i => colorette.yellow(i.slice(1, -1)))
-          )
-        )
-      } else {
-        console.warn(WARNING)
-      }
+      console.warn(
+        red(WARNING.replace(/`[^`]+`/g, i => yellow(i.slice(1, -1))))
+      )
     }
     reqs = options.browsers
   }

package/lib/hacks/file-selector-button.js

@@ -1,6 +1,19 @@
 let Selector = require('../selector')
+let utils = require('../utils')
 
 class FileSelectorButton extends Selector {
+  constructor(name, prefixes, all) {
+    super(name, prefixes, all)
+
+    if (this.prefixes) {
+      this.prefixes = utils.uniq(
+        this.prefixes.map(i => {
+          return '-webkit-'
+        })
+      )
+    }
+  }
+
   /**
    * Return different selectors depend on prefix
    */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autoprefixer",
-  "version": "10.3.2",
+  "version": "10.3.6",
   "description": "Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website",
   "engines": {
     "node": "^10 || ^12 || >=14"
@@ -26,15 +26,11 @@
     "postcss": "^8.1.0"
   },
   "dependencies": {
-    "browserslist": "^4.16.8",
-    "caniuse-lite": "^1.0.30001251",
-    "colorette": "^1.3.0",
+    "browserslist": "^4.17.1",
+    "caniuse-lite": "^1.0.30001260",
     "fraction.js": "^4.1.1",
+    "nanocolors": "^0.2.8",
     "normalize-range": "^0.1.2",
     "postcss-value-parser": "^4.1.0"
-  },
-  "browser": {
-    "colorette": false,
-    "chalk": false
   }
 }