Update dependency autoprefixer to v10

[renovate[bot]]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
autoprefixer	6.7.7 -> 10.4.20

---

Release Notes

postcss/autoprefixer (autoprefixer)

### [`v10.4.20`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#10420) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.4.19...10.4.20) - Fixed `fit-content` prefix for Firefox. ### [`v10.4.19`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#10419) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.4.18...10.4.19) - Removed `end value has mixed support, consider using flex-end` warning since `end`/`start` now have good support. ### [`v10.4.18`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#10418) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.4.17...10.4.18) - Fixed removing `-webkit-box-orient` on `-webkit-line-clamp` ([@​Goodwine](https://togithub.com/Goodwine)). ### [`v10.4.17`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#10417) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.4.16...10.4.17) - Fixed `user-select: contain` prefixes. ### [`v10.4.16`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#10416) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.4.15...10.4.16) - Improved performance (by Romain Menke). - Fixed docs (by Christian Oliff). ### [`v10.4.15`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#10415) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.4.14...10.4.15) - Fixed `::backdrop` prefixes (by 一丝). - Fixed docs (by Christian Oliff). ### [`v10.4.14`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#10414) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.4.13...10.4.14) - Improved startup time and reduced JS bundle size (by Kārlis Gaņģis). ### [`v10.4.13`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#10413) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.4.12...10.4.13) - Fixed missed prefixes on vendor prefixes in name of CSS Custom Property. ### [`v10.4.12`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#10412) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.4.11...10.4.12) - Fixed support of unit-less zero angle in backgrounds (by 一丝). ### [`v10.4.11`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#10411) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.4.10...10.4.11) - Fixed `text-decoration` prefixes by moving to MDN data (by Romain Menke). ### [`v10.4.10`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#10410) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.4.9...10.4.10) - Fixed `unicode-bidi` prefixes by moving to MDN data. ### [`v10.4.9`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#1049) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.4.8...10.4.9) - Fixed `css-unicode-bidi` issue from latest Can I Use. ### [`v10.4.8`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#1048) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.4.7...10.4.8) - Do not print `color-adjust` warning if `print-color-adjust` also is in rule. ### [`v10.4.7`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#1047) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.4.6...10.4.7) - Fixed `print-color-adjust` support in Firefox. ### [`v10.4.6`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#1046) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.4.5...10.4.6) - Fixed `print-color-adjust` support. ### [`v10.4.5`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#1045) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.4.4...10.4.5) - Fixed `NaN` in grid (by [@​SukkaW](https://togithub.com/SukkaW)). ### [`v10.4.4`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#1044) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.4.3...10.4.4) - Fixed `package.funding` to have same value between all PostCSS packages. ### [`v10.4.3`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#1043) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.4.2...10.4.3) - Fixed `package.funding` (by Álvaro Mondéjar). ### [`v10.4.2`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#1042) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.4.1...10.4.2) - Fixed missed `-webkit-` prefix for `width: stretch`. ### [`v10.4.1`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#10415) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.4.0...10.4.1) - Fixed `::backdrop` prefixes (by 一丝). - Fixed docs (by Christian Oliff). ### [`v10.4.0`](https://togithub.com/postcss/autoprefixer/releases/tag/10.4.0): 10.4 “ǃke e꞉ ǀxarra ǁke” [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.3.7...10.4.0) In Autoprefixer 10.4 [@​lukewarlow](https://togithub.com/lukewarlow) added `:autofill` support: ```css input:-webkit-autofill { background-color: red; } input:autofill { background-color: red; } ``` ### [`v10.3.7`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#1037) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.3.6...10.3.7) - Replaced `nanocolors` to `picocolors`. ### [`v10.3.6`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#1036) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.3.5...10.3.6) - Updated `nanocolors`. - Reduced package size. ### [`v10.3.5`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#1035) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.3.4...10.3.5) - Replaced `colorette` to `nanocolors`. ### [`v10.3.4`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#1034) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.3.3...10.3.4) - Fixed `stretch` value in latest Firefox. ### [`v10.3.3`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#1033) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.3.2...10.3.3) - Fixed wrong `-moz-` prefix from `::file-selector-button` (by Usman Yunusov). ### [`v10.3.2`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#1032) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.3.1...10.3.2) - Fixed `::file-selector-button` support (by Usman Yunusov). ### [`v10.3.1`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#1031) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.3.0...10.3.1) - Fixed adding wrong prefixes to `content` (by Luke Warlow). ### [`v10.3.0`](https://togithub.com/postcss/autoprefixer/releases/tag/10.3.0): 10.3 “Чести своей не отдам никому” [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.2.6...10.3.0) In Autoprefixer 10.3 [@​lukewarlow](https://togithub.com/lukewarlow) added `::file-selector-button` support. ```css ::-webkit-file-upload-button { border: 2px solid #​6c5ce7; padding: .2em .4em; border-radius: .2em; background-color: #a29bfe; } ::file-selector-button { border: 2px solid #​6c5ce7; padding: .2em .4em; border-radius: .2em; background-color: #a29bfe; } ``` ### [`v10.2.6`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#1026) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.2.5...10.2.6) - Fixed “no prefixes needed” warning (by [@​Pwntheon](https://togithub.com/Pwntheon)). ### [`v10.2.5`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#1025) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.2.4...10.2.5) - Fixed `:` support in `@supports` (by Dmitry Semigradsky). - Fixed docs (by Christian Oliff). ### [`v10.2.4`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#1024) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.2.3...10.2.4) - Fixed browser names in `npx autoprefixer --info`. ### [`v10.2.3`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#1023) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.2.2...10.2.3) - Fixed PostCSS 8 support. ### [`v10.2.2`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#1022) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.2.1...10.2.2) - Fixed PostCSS 8 plugins compatibility. ### [`v10.2.1`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#1021) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.2.0...10.2.1) - Fixed `transition-property` warnings (by [@​Sheraff](https://togithub.com/Sheraff)). ### [`v10.2.0`](https://togithub.com/postcss/autoprefixer/releases/tag/10.2.0): 10.2 “Sub rosa” [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.1.0...10.2.0) Autoprefixer 10.2 now has built-in TypeScript definitions. You do not need `@types/autoprefixer` anymore. Thanks to [@​Semigradsky](https://togithub.com/Semigradsky) and DefinitelyTyped’s contributors. [@​Sheraff](https://togithub.com/Sheraff) also improved docs. ### [`v10.1.0`](https://togithub.com/postcss/autoprefixer/releases/tag/10.1.0): 10.1 “Pula” [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.0.4...10.1.0) Autoprefixer 10.1 improved `min-resolution` support. [@​infusion](https://togithub.com/infusion) added `dpcm` unit support and `num2fraction` with [Fraction.js](https://togithub.com/infusion/Fraction.js/), which uses Farey Sequences as a rational approximation (more precise) and simplifies the fraction using continued fractions to ɛ <0.001 afterward. ```css /* input */ @​media (min-resolution: 113.38dpcm) { … } /* output */ @​media (-webkit-min-device-pixel-ratio: 3), (min--moz-device-pixel-ratio: 3), (-o-min-device-pixel-ratio: 3/1), (min-resolution: 113.38dpcm) { … } ``` ### [`v10.0.4`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#1004) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.0.3...10.0.4) - Fixed `Cannot read property 'proxyOf' of undefined` error (by Igor Kamyshev). ### [`v10.0.3`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#1003) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.0.2...10.0.3) - Fixed `substract` to `subtract` value for `mask-composite` (by Michelle Enos). ### [`v10.0.2`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#1002) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.0.1...10.0.2) - Removed `-ms-user-select: all` because IE and old Edge don’t support it. - Fixed Grid Layout warning. ### [`v10.0.1`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#1001) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/10.0.0...10.0.1) - Fix PostCSS 8.1 compatability. - Add our OpenCollective to `package.json`. - Clean up code (by Sukka). ### [`v10.0.0`](https://togithub.com/postcss/autoprefixer/releases/tag/10.0.0): 10.0 “Alis volat propriis” [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.8.8...10.0.0) Autoprefixer 10 is based on top of [PostCSS 8](https://togithub.com/postcss/postcss/releases/tag/8.0.0) (check **Known Issues** section before updating). Node.js 6.x, 8.x, 11.x support was removed. Now you need to install Autoprefixer by `npm install --save-dev autoprefixer postcss`. We moved `postcss` from `dependencies` to `peerDependencies` according to [new PostCSS plugin guidelines](https://togithub.com/postcss/postcss/blob/master/docs/guidelines/plugin.md). ### [`v9.8.8`](https://togithub.com/postcss/autoprefixer/releases/tag/9.8.8) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.8.7...9.8.8) - Replaced `nanocolors` with `picocolors`. - Reduced package size. ### [`v9.8.7`](https://togithub.com/postcss/autoprefixer/releases/tag/9.8.7) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.8.6...9.8.7) - Replaced `colorette` with `nanocolors`. - Reduced package size. ### [`v9.8.6`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#986) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.8.5...9.8.6) - Fixed `env` option. ### [`v9.8.5`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#985) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.8.4...9.8.5) - Improved Grid Layout warnings (by Daniel Tonon). - Fixed `align-self` and `justify-self` with `display: flex` (by Daniel Tonon). ### [`v9.8.4`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#984) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.8.3...9.8.4) - Replace color output library. ### [`v9.8.3`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#983) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.8.2...9.8.3) - Return old non-LTS Node.js versions to avoid breaking changes. ### [`v9.8.2`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#982) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.8.1...9.8.2) - Remove Node.js 13.0-13.7 from supported engines, because of buggy ESM support. ### [`v9.8.1`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#981) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.8.0...9.8.1) - Replace `chalk` to `kleur` (by Luke Edwards). - Update docs (by [@​mbomb007](https://togithub.com/mbomb007)). ### [`v9.8.0`](https://togithub.com/postcss/autoprefixer/releases/tag/9.8.0): 9.8 “Vigilo Confido” [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.7.6...9.8.0) Autoprefixer 9.8 brings IE support for `:placeholder-shown`. #### Placeholder Shown [@​tkrotoff](https://togithub.com/tkrotoff) [found](https://togithub.com/postcss/autoprefixer/issues/1311) that `input:placeholder-shown` can be emulated with `input:-ms-input-placeholder`. ```css input:-ms-input-placeholder { box-shadow: 0 0 0 1px blue; } input:placeholder-shown { box-shadow: 0 0 0 1px blue; } ``` Note, that we already had support for `::placeholder`. Selector `::placeholder` is for the *text* of the placeholder. `:placeholder-shown` is for the input, where placeholder text is shown. In `::placeholder` you can’t change the border or size of the ``. ### [`v9.7.6`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#976) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.7.5...9.7.6) - Revert `-webkit-stretch` fix. ### [`v9.7.5`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#975) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.7.4...9.7.5) - Fix `-webkit-stretch` support. ### [`v9.7.4`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#974) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.7.3...9.7.4) - Fix warning text (by Dmitry Ishkov). ### [`v9.7.3`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#973) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.7.2...9.7.3) - Fix compatibility with PostCSS Modules. ### [`v9.7.2`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#972) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.7.1...9.7.2) - Add `-ms-user-select: element` support. - Add funding link for `npm fund`. ### [`v9.7.1`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#971) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.7.0...9.7.1) - Avoid unnecessary transitions in prefixed selectors (by Andrey Alexandrov). - Fix `fit-content` for Firefox. ### [`v9.7.0`](https://togithub.com/postcss/autoprefixer/releases/tag/9.7.0): 9.7 “Ad Victoriam” [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.6.5...9.7.0) Autoprefixer 9.7 brings `AUTOPREFIXER_GRID` environment variable and huge performance improvments. ##### Grid Environment Variable Autoprefixer can add [CSS Grid polyfills for IE](https://togithub.com/postcss/autoprefixer#does-autoprefixer-polyfill-grid-layout-for-ie). You need to manually enable it to prove that you understand the limits of polyfill. In previous versions you can enable Grid polyfill by `grid: 'autoplace'` option or by `/* autoprefixer grid: autoplace */` control comment. But in some cases, developers were not able to use both methods. For instance, during [work with Material UI’ CSS-in-JS in Create React App](https://togithub.com/postcss/autoprefixer/issues/1257). Now Autoprefixer supports environment variable to enable CSS Grid polyfill: ```sh AUTOPREFIXER_GRID=autoplace npm build ``` ##### Performance Improvements [@​Knagis](https://togithub.com/Knagis) [found](https://togithub.com/postcss/autoprefixer/issues/1256) that Browserslist takes 70% of the Autoprefixer time.  We did a lot of improvements in Browserslist and now Autoprefixer should work much faster.  ##### Other - Fix [`Cannot read property 'grid' of undefined`](https://togithub.com/postcss/autoprefixer/issues/1244) error ### [`v9.6.5`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#965) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.6.4...9.6.5) - Fix selector prefixing (by Andrey Alexandrov). ### [`v9.6.4`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#964) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.6.3...9.6.4) - Now the real fix for `'startsWith' of undefined` error. ### [`v9.6.3`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#963) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.6.2...9.6.3) - Fix `Cannot read property 'startsWith' of undefined` error. ### [`v9.6.2`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#962) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.6.1...9.6.2) - Fix false `Replace fill to stretch` warning. ### [`v9.6.1`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#961) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.6.0...9.6.1) - Fix `-webkit-line-clamp` truncating multi-line text support. ### [`v9.6.0`](https://togithub.com/postcss/autoprefixer/releases/tag/9.6.0): 9.6 “Nunc id vides, nunc ne vides” [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.5.1...9.6.0) Autoprefixer 9.6 marked `browsers` option as deprecated and added `text-orientation` and `@media (min-resolution: 2x)` support. We added the “Sponsor” button to your repository. You can support Autoprefixer and other open source projects important for your business by [Tidelift](https://tidelift.com/subscription/pkg/npm-autoprefixer). #### Browsers Autoprefixer adds prefixes only for target browsers, browsers which is support on your project. Initially, Autoprefixer had the `browsers` option to set target browsers. But we found that many tools need target browsers too. [`postcss-preset-env`](https://preset-env.cssdb.org/) and `babel-preset-env` use them to add only actual polyfills, [postcss-normalize](https://togithub.com/csstools/postcss-normalize) uses them to add only necessary CSS reset rules, plugins for ESLint and Stylelint will warn you if some of the target browsers doesn’t support your code. This is why we created [Browserslist](https://togithub.com/browserslist/browserslist) config file. It is a single config for all tools. A lot of users still uses the `browsers` option. We understand them; it is hard to change old practice. Unfortunately, using the `browsers` option creates many problems. For instance, you can miss that your build tool has own Autoprefixer inside. It will cut your prefixes because it will not know about your target browsers. This is why, in 9.6, we decided to deprecate the `browsers` option. Autoprefixer will show a warning on this option. In the next 10.0 release, we will drop this option. This is how you can migrate: 1. Create `browserslist` key with an array in `package.json`. 2. Copy queries from the `browsers` option. If you have `browsers: [“last 1 version”, “not dead”]`, then you need: ```js "browserslist": [ "last 1 version", "not dead" ] ``` #### HiDPI Media Query We all need to support HiDPI/retina screen now. Autoprefixer supports specific media query for HiDPI screens: ```css .image { background-image: url(image@1x.png); } @​media (min-resolution: 2dppx) { .image { background-image: url(image@2x.png); } } ``` ```css .image { background-image: url(image@1x.png); } @​media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2dppx) { .image { background-image: url(image@2x.png); } } ``` Bug we found that [CSS Values 4 spec](https://www.w3.org/TR/css-values-4/#resolution) added `x` alias for `dppx`. Autoprefixer 9.6 supports `@media (min-resolution: 2x)` shortcut. Note, that Autoprefixer will not convert it to `2dppx`. Autoprefixer adds only prefixes. Use [`postcss-preset-env`](https://preset-env.cssdb.org/) to add polyfills. #### Other - [`text-orientation`](https://tympanus.net/codrops/css_reference/text-orientation/) property support was added. - [@​jmmarco](https://togithub.com/jmmarco) added `CONTRIBUTING.md` ### [`v9.5.1`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#951) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.5.0...9.5.1) - Fix `backdrop-filter` for Edge (by Oleh Aloshkin). - Fix `min-resolution` media query support in Firefox < 16. ### [`v9.5.0`](https://togithub.com/postcss/autoprefixer/releases/tag/9.5.0): 9.5 “Draco dormiens nunquam titillandus” [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.4.10...9.5.0) Autoprefixer 9.5 brings `mask-composite` support. ```css a { mask-composite: add; } b { mask: url(intersect.png) intersect, url(exclude.png); } ``` ```css a { -webkit-mask-composite: source-over; mask-composite: add; } b { -webkit-mask: url(intersect.png), url(exclude.png); -webkit-mask-composite: source-in, xor; mask: url(intersect.png) intersect, url(exclude.png); } ``` Thanks to [@​semeleven](https://togithub.com/semeleven) for implementation and [@​iamvdo](https://togithub.com/iamvdo) for suggestion. ### [`v9.4.10`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#9410) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.4.9...9.4.10) - Add warning for named Grid rows. ### [`v9.4.9`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#949) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.4.8...9.4.9) - Fix `grid-template` and `@media` case (by Bogdan Dolin). ### [`v9.4.8`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#948) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.4.7...9.4.8) - Fix `calc()` support in Grid gap. ### [`v9.4.7`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#947) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.4.6...9.4.7) - Fix infinite loop on mismatched parens. ### [`v9.4.6`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#946) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.4.5...9.4.6) - Fix warning text (by Albert Juhé Lluveras). ### [`v9.4.5`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#945) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.4.4...9.4.5) - Fix `text-decoration-skip-ink` support. ### [`v9.4.4`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#944) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.4.3...9.4.4) - Use `direction` value for `-ms-writing-mode` (by Denys Kniazevych). - Fix warning text (by [@​zzzzBov](https://togithub.com/zzzzBov)). ### [`v9.4.3`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#943) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.4.2...9.4.3) - Add warning to force `flex-start` instead of `start` (by Antoine du Hamel). - Fix docs (by Christian Oliff). ### [`v9.4.2`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#942) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.4.1...9.4.2) - Fix Grid autoplacement warning. ### [`v9.4.1`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#9410) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.4.0...9.4.1) - Add warning for named Grid rows. ### [`v9.4.0`](https://togithub.com/postcss/autoprefixer/releases/tag/9.4.0): 9.4 “Advance Australia” [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.3.1...9.4.0) Autoprefixer 9.4.0 brings limited **autoplacement** support to the IE CSS Grid. #### Grid Autoplacement If the `grid` option is set to `"autoplace"`, limited autoplacement support is now added to the Autoprefixer CSS Grid translations. You can also use the `/* autoprefixer grid: autoplace */` control comment to enable autoplacement directly in your CSS. In order to use the new autoplacement feature, you **must define both rows and columns** when declaring the grid template. ```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; } ``` Autoplacement support in Autoprefixer is currently very limited in what it can do. Please read the [Grid Autoplacement support in IE ](https://togithub.com/postcss/autoprefixer#grid-autoplacement-support-in-ie) section before using this new feature. Thanks to [@​bogdan0083](https://togithub.com/bogdan0083) for implementing the new feature, [@​Dan503](https://togithub.com/Dan503) for documenting it, and [@​evandiamond](https://togithub.com/evandiamond) for coming up with the initial idea. #### Other Changes - Remove some unnecessary warnings for Grid (by [@​fanich37](https://togithub.com/fanich37)). ### [`v9.3.1`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#931) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.3.0...9.3.1) - Fix Grid prefixes with `repeat()` value (by Bogdan Dolin). ### [`v9.3.0`](https://togithub.com/postcss/autoprefixer/releases/tag/9.3.0): 9.3 “Labor omnia vincit” [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.2.1...9.3.0) Autoprefixer 9.3 brings `place-self` support for Grid Layout #### `place-self` [@​Dan503](https://togithub.com/Dan503) and [@​bogdan0083](https://togithub.com/bogdan0083) [found](https://togithub.com/postcss/autoprefixer/issues/1143) a way to impement support for another Grid property ```css .grid > .center { place-self: center; } ``` ```css .grid > .center { -ms-grid-row-align: center; -ms-grid-column-align: center; place-self: center; } ``` #### Other Changes [@​Dan503](https://togithub.com/Dan503) and [@​bogdan0083](https://togithub.com/bogdan0083) also [detected and fixed](https://togithub.com/postcss/autoprefixer/issues/1146) issue with Grid row/column span inheritance. ### [`v9.2.1`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#921) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.2.0...9.2.1) - Fix broken AST. ### [`v9.2.0`](https://togithub.com/postcss/autoprefixer/releases/tag/9.2.0): 9.2 “Onyi est glavnaya krepost” [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.1.5...9.2.0) Autoprefixer 9.2 brings many new improvements for `-ms-` prefixes for Grid Layout. #### New Ways to Enable/Disable Grid Layout In previous versions, you had needed to pass `grid: true` to enable prefixes for Grid Layout. But not all users have access to Autoprefixer options. CodePen, Create Reat App or Angular CLI doesn’t allow you to do it. In Autoprefixer 9.2 [@​fanich37](https://togithub.com/fanich37) added special control comments: ```css /* autoprefixer grid: on */ .grid { display: grid; grid-gap: 33px; grid-template: "head head head" 1fr "nav main main" minmax(100px, 1fr) "nav foot foot" 2fr / 1fr 100px 1fr; } .non-ie .grid { /* autoprefixer grid: off */ … } ``` Autoprefixer doesn’t support Grid properties and values with `auto`. In 9.2 it will ignore whole `@supports` content if it contains these Grid properties: ```css @​supports (grid-auto-rows: 100px) { /* Autoprefixer will not show Grid warnings and will not add prefixes here */ } ``` #### Smarter `grid-area` Autoprefixer supports `grid-template` even if it was not in IE Grid spec. But in 9.2 [@​bogdan0083](https://togithub.com/bogdan0083) really improve it according to [@​Dan503](https://togithub.com/Dan503) idea. Now Autoprefixer supports even overriding `grid-template`. ```css /* autoprefixer grid: on */ .grid { display: grid; grid-template: "nav main" minmax(100px, 1fr) "nav foot" 2fr / 100px 1fr; } .grid.no-menu { grid-template: "main" minmax(100px, 1fr) "foot" 2fr } ``` #### Other Changes - Improve Grid warnings (by [@​Dan503](https://togithub.com/Dan503) and [@​bogdan0083](https://togithub.com/bogdan0083)) - Improve docs (by [@​JoshuaHall](https://togithub.com/JoshuaHall), [@​Drarok](https://togithub.com/Drarok), [@​revelt](https://togithub.com/revelt), and [@​janczer](https://togithub.com/janczer)). ### [`v9.1.5`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#915) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.1.4...9.1.5) - Remove `@babel/register` from dependencies. ### [`v9.1.4`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#914) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.1.3...9.1.4) - Use Babel 7. ### [`v9.1.3`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#913) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.1.2...9.1.3) - Sort properties in `autoprefixer --info` alphabetically. - Fix old Firefox gradient prefix. ### [`v9.1.2`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#912) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.1.1...9.1.2) - Fix `autoprefixer --info` in new Node.js. ### [`v9.1.1`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#911) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.1.0...9.1.1) - Retain `grid-gap` through `@media` (by Bogdan Dolin). - Fix `grid-template` and `@media` (by Bogdan Dolin). - Fix Grid areas searching error (by Bogdan Dolin). - Fix `span X` Grid prefix (by Bogdan Dolin). - Fix docs (by Eduard Kyvenko). ### [`v9.1.0`](https://togithub.com/postcss/autoprefixer/releases/tag/9.1.0): 9.1 “Equality before the law” [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.0.2...9.1.0) Autoprefixer 9.1 brings `background-clip: text` and fix `span` in IE Grid. #### Background Clip `background-clip: text` become to be the standard and got Edge support. So we added it to Autoprefixer: ```css .title { background: linear-gradient(yellow, red); -webkit-background-clip: text; background-clip: text; } ``` Note, that Edge expect `-webkit-` prefix for this property. #### Grid Layout Fix [@​bogdan0083](https://togithub.com/bogdan0083) [fixed](https://togithub.com/postcss/autoprefixer/pull/1086) [an issue](https://togithub.com/postcss/autoprefixer/issues/1084) when media-query override some `grid-template`. ### [`v9.0.2`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#902) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.0.1...9.0.2) - Show warning on Grid area names conflict (by Bogdan Dolin). - Fix documentation (by Sven Wagner). ### [`v9.0.1`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#901) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/9.0.0...9.0.1) - Fix nested at-rules in Grid prefixes (by Ivan Malov). ### [`v9.0.0`](https://togithub.com/postcss/autoprefixer/releases/tag/9.0.0): 9.0 “A Mari Usque Ad Mare” [Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.6.5...9.0.0) Autoprefixer 9.0 brings Browserslist 4.0 and drops Node.js 4 support. #### Breaking Changes We removed Node.js 4 and Node.js 9 support since it doesn’t have security updates anymore. We removed IE and “dead” browsers (without security updates) from Babel’s targets. Don't worry, Autoprefixer still generate IE-compatible code. These changes affect websites which run Autoprefixer on client-side like CodePen. last 2 version not dead not Explorer 11 not ExplorerMobile 11 node 10 node 8 node 6 [Autoprefixer Rails](https://togithub.com/ai/autoprefixer-rails) 9.0 dropped the RubyRacer and Sprockets 3 support. #### Browserslist 4.0 Autoprefixer 9.0 uses [Browserslist](https://togithub.com/browserslist/browserslist) 4.0 to get your target browsers. Now you use Browserslist to specify Node.js versions. Babel 7 will use Browserslist config as well. Also, Browserslist 4.0 will warn you if you didn’t update Can I Use DB for last than 6 month. #### PostCSS 7.0 Autoprefixer 9.0 uses [PostCSS 7.0](https://togithub.com/postcss/postcss/releases/tag/7.0.0) ### [`v8.6.5`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#865) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.6.4...8.6.5) - Do not show Grid warnings if IE was not selected. ### [`v8.6.4`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#864) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.6.3...8.6.4) - Fix `stretch` prefix in Chrome >= 46. ### [`v8.6.3`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#863) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.6.2...8.6.3) - Add warnings for unsupported Grid features. - Add warnings about wrong Grid properties. - Add note about `grid` option for grid properties in `autoprefixer --info`. ### [`v8.6.2`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#862) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.6.1...8.6.2) - Fix error during adding Grid prefixes in `@media` (by Evgeny Petukhov). ### [`v8.6.1`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#861) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.6.0...8.6.1) - Fix `grid-template` with media queries (by Evgeny Petukhov). ### [`v8.6.0`](https://togithub.com/postcss/autoprefixer/releases/tag/8.6.0): 8.6 “Follow Reason” [Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.5.2...8.6.0) Autoprefixer 8.6 brings `gap` property support and two values support for `grid-gap`/`gap`. ##### Grid Gap CSSWG [renamed](https://drafts.csswg.org/css-grid/#change-2016-grid-gap) `grid-gap` property to `gap`. [@​yepninja](https://togithub.com/yepninja) added `gap` support with 2 values support. Grid layout code bellow will work even in IE if you pass `grid: true` option to Autoprefixer: ```css .main { gap: 10px 20px; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "head head head" "nav main main" "nav foot foot"; } ``` ##### Other Changes - Add `ignoreUnknownVersions` option for [Browserslist](https://togithub.com/browserslist/browserslist) ### [`v8.5.2`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#852) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.5.1...8.5.2) - Fix `grid-template` support wit auto row sizes (by Yury Timofeev). ### [`v8.5.1`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#851) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.5.0...8.5.1) - Remove unnecessary warning on `-webkit-fill-available`. ### [`v8.5.0`](https://togithub.com/postcss/autoprefixer/releases/tag/8.5.0): 8.5 “Muito Nobre e Sempre Leal” [Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.4.1...8.5.0) Autoprefixer 8.5 brings `grid-gap` support and fix `radial-gradient`. ##### Grid Gap [@​yepninja](https://togithub.com/yepninja) continues his amazing work of adding CSS Grid Layout support to Autoprefixer. Now he brought `grid-gap`. It is amazing work since IE 11 has gaps support in `-ms-` grids. To add `grid-gap` support for IE 11 Autoprefixer adds addition grid cells. Unfortunately, it will work only if you have `grid-template` in the same rule with `grid-gap`. We had [big discussion](https://togithub.com/postcss/autoprefixer/pull/1032) with a community about these limits. ```css .page { grid-gap: 33px; -ms-grid-rows: 1fr 33px minmax(100px, 1fr) 33px 2fr; -ms-grid-columns: 1fr 33px 100px 33px 1fr; grid-template: "head head head" 1fr "nav main main" minmax(100px, 1fr) "nav foot foot" 2fr / 1fr 100px 1fr; } ``` Set [`postcss-gap-properties`](https://togithub.com/jonathantneal/postcss-gap-properties) before Autoprefixer if you want to use new `gap` property. ##### Radial Gradients Old gradients with prefixes used a different direction syntax. Autoprefixer converts direction to old syntax (or warn you to rewrite direction from old to new syntax). But it has an issue with extent keywords like `circle closest-corner`. We fixed it after [@​BaliBalo](https://togithub.com/BaliBalo) [report](https://togithub.com/postcss/autoprefixer/issues/1002). ```css .mask { -webkit-mask-image: -webkit-radial-gradient(100% 50%, circle closest-corner, black, white); mask-image: radial-gradient(circle closest-corner at 100% 50%, black, white); } ``` ### [`v8.4.1`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#841) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.4.0...8.4.1) - Fix working in old PostCSS versions (by Diablohu). ### [`v8.4.0`](https://togithub.com/postcss/autoprefixer/releases/tag/8.4.0): 8.4 “Non in aves, sed in angues” [Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.3.0...8.4.0) Autoprefixer 8.4 brings new control comment to ignore next line. [@​vostrik](https://togithub.com/vostrik) implemented the [@​levin-du](https://togithub.com/levin-du)’s idea of having control comment to disable only next property/rule: ```css .logo { /* autoprefixer: ignore next */ user-select: none; /* ← ignored */ mask: url(mask.jpg); /* ← will be prefixed */ } /* autoprefixer: ignore next */ ::placholder /* ← ignored */ { text-decoration-style: dotted; /* ← will be prefixed */ } ``` ### [`v8.3.0`](https://togithub.com/postcss/autoprefixer/releases/tag/8.3.0): 8.3 “Benigno Numine” [Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.2.0...8.3.0) Autoprefixer 8.3 adds `@media` support for `grid-template` and fixes gradient direction warning. ##### Media and Grid Layout [@​evgeny-petukhov](https://togithub.com/evgeny-petukhov) continues his great work for Grid Layout support in Autoprefixer. Now he improved `@media` support. Now this CSS will work in IE: ```css body { grid-template: [header-left] "head head" 30px [header-right] [main-left] "nav main" 1fr [main-right] [footer-left] "nav foot" 30px [footer-right] / 120px repeat(4, 250px 10px); } header { grid-area: head; } main { grid-area: main; } footer { grid-area: footer; } @​media (min-width: 1000px) { body { grid-template: [header-left] "head" 30px [header-right] [main-left] "main" 1fr [main-right] [footer-left] "footer" 30px [footer-right] / 1fr; } } ``` Don’t forget that Autoprefixer inserts Grid Layout prefixes only if you set `grid: true` option. ##### Gradient Warning [@​radium-v](https://togithub.com/radium-v) found that Autoprefixer show warning even if `cover` is outside of `radial-gradient`. ```css a { background: radial-gradient(#fff, transparent) 0 0 / cover no-repeat #f0f; } ``` [@​kotfire](https://togithub.com/kotfire) improve old direction detection and fix this issue. ### [`v8.2.0`](https://togithub.com/postcss/autoprefixer/releases/tag/8.2.0): 8.2 “Ad Astra per Aspera” [Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.1.0...8.2.0) Autoprefixer 8.2 brings [`color-adjust`](https://drafts.csswg.org/css-color-4/#color-adjust) support. [@​YozhikM](https://togithub.com/YozhikM), [@​soul-wish](https://togithub.com/soul-wish), and [@​yuriyalekseyev](https://togithub.com/yuriyalekseyev) did a great work. They added new data to Can I Use and implemented a new feature to Autoprefixer. ```css body { -webkit-print-color-adjust: exact; color-adjust: exact; } ``` ### [`v8.1.0`](https://togithub.com/postcss/autoprefixer/releases/tag/8.1.0): 8.1 “Rex, Familia et Ultio” [Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.0.0...8.1.0) Autoprefixer 8.1 brings `overscroll-behavior` and better Grid support. ##### Overscroll Behavior [@​Malvoz](https://togithub.com/Malvoz) [suggested](https://togithub.com/postcss/autoprefixer/issues/956) the great idea to polyfill `overscroll-behavior` for IE 11 and Edge by `-ms-scroll-chaining`. ```css .none { -ms-scroll-chaining: none; overscroll-behavior: none; } .contain { -ms-scroll-chaining: none; overscroll-behavior: contain; } .auto { -ms-scroll-chaining: chained; overscroll-behavior: auto; } ``` Note, that `overscroll-behavior-x` and `overscroll-behavior-y` are not supported since `-ms-` property doesn’t have this freedom. ##### Better Grid Layout [@​evgeny-petukhov](https://togithub.com/evgeny-petukhov) continues his amazing work and now Autoprefixer polyfills Grid Layout for IE in more cases. He added `grid-template` shortcut support and improve support of `grid-column-end` and `grid-row-end`. Grid properties were fixed in `@supports`. We recommend: - To select modern Grid browsers and IE 11: `@supports (display: grid)`. - To select only Grid browsers without IE 11: `@supports (grid-gap: 0)`. Note, that you need `grid: true` option to Autoprefixer to add `-ms-` prefixes for Grid Layout. ### [`v8.0.0`](https://togithub.com/postcss/autoprefixer/releases/tag/8.0.0): 8.0 “Excelsior” [Compare Source](https://togithub.com/postcss/autoprefixer/compare/7.2.6...8.0.0) Autoprefixer 8.0 uses Browserslist 3.0, has `autoprefixer` CLI tool instead of `autoprefixer-info`. ##### Browserslist 3.0 The main feature of Autoprefixer 8.0 is Browserslist 3.0. In the new version, it brings new default browsers. It will affect you only if you don’t change browsers by `.browserslistrc` or `browserslist` key in `package.json` (we don’t recommend to use `browsers` option). In one hand, Browserslist 3.0 usage statistics limit for default browsers was reduced from `>1%` to `>0.5%`. In another hand, we remove dead browsers from default browsers. The dead browser is a browser with < than 1% in the global market and who don’t have security updates. Right now IE 10 and BlackBerry browser are dead browsers. Read other notable changes in [Browserslist 3.0 changelog](https://togithub.com/ai/browserslist/blob/master/CHANGELOG.md#30). We recommend subscribing for [@​Browserslist](https://twitter.com/browserslist) twitter account. ##### CLI Tool CLI tool to show target browsers and used prefixes was renamed to `autoprefixer`: $ npx autoprefixer --info Browsers: Edge: 16 These browsers account for 0.04% of all users globally At-Rules: @​viewport: ms Selectors: ::placeholder: ms Properties: user-select: ms hyphens: ms appearance: webkit scroll-snap-type: ms scroll-snap-coordinate: ms scroll-snap-destination: ms scroll-snap-points-x: ms scroll-snap-points-y: ms flow-into: ms flow-from: ms region-fragment: ms text-spacing: ms With the new name, `npx` will install Autoprefixer automatically if it is missed in the current project. ##### Page Breaks for Firefox Previous Autoprefixer versions replace `break-*` properties to `page-break-*` for Firefox. But this feature didn’t add any vendor prefix. Autoprefixer goal is to take care only about prefixes, not polyfills. For better consistency, we removed this feature from Autoprefixer. Don’t afraid, the PostCSS ecosystem has many plugins for CSS polyfills. We recommend to take look at [postcss-preset-env](https://togithub.com/jonathantneal/postcss-preset-env) to write future CSS today. ### [`v7.2.6`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#726) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/7.2.5...7.2.6) - Fix `-ms-` prefix for grid cells with same `grid-area` (by Evgeny Petukhov). ### [`v7.2.5`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#725) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/7.2.4...7.2.5) - Fix multiple prefixes in declaration value. ### [`v7.2.4`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#724) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/7.2.3...7.2.4) - Fix IE 10 support. ### [`v7.2.3`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#723) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/7.2.2...7.2.3) - Fix `grid-template-areas` in `@media` (by Evgeny Petukhov). ### [`v7.2.2`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#722) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/7.2.1...7.2.2) - Fix `_autoprefixerDisabled is undefined` issue. ### [`v7.2.1`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#721) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/7.2.0...7.2.1) - Fix IE and other old JS runtimes support. ### [`v7.2.0`](https://togithub.com/postcss/autoprefixer/releases/tag/7.2.0): 7.2 “Ordem e Progresso” [Compare Source](https://togithub.com/postcss/autoprefixer/compare/7.1.6...7.2.0) Autoprefixer 7.2 brings better Grid support for IE
and `autoprefixer-info` CLI tool. ##### Grid Layout With `grid: true` option Autoprefixer adds `-ms-` prefixes to Grid Layout properties. But this feature was very limited. In 7.0 we dramatically improved Grid support for IE. [@​Alex7Kom](https://togithub.com/Alex7Kom) added `grid-area` and improved `grid-row` and `grid-column` support. [@​evgeny-petukhov](https://togithub.com/evgeny-petukhov) added `grid-template-areas` and `grid-template` support. Even this complex emoji example will work with new Autoprefixer ([output](https://gist.github.com/ai/a1426ec4ad404119467c391522cf32a7)): ```css body { display: grid; grid-template-rows: 30px auto 30px; grid-template-columns: 1fr 3fr; grid-template-areas: "🎩 🎩" "🍔 📰" "👞 👞"; } .header { grid-area: 🎩; } .nav { grid-area: 🍔; } .main { grid-area: 📰; } .footer { grid-area: 👞; } ``` Just don’t forget to set `grid: true` option: ```js auoprefixer({ grid: true }) ``` ##### Info CLI Tool Autoprefixer 7.2 ships with new CLI tool to check which browsers are selected and which properties will be prefixed. Just go to your project directory and run `npx autoprefixer-info`: Browsers: Edge: 16 These browsers account for 0.04% of all users globally At-Rules: @​viewport: ms Selectors: ::placeholder: ms Properties: user-select: ms hyphens: ms appearance: webkit scroll-snap-type: ms scroll-snap-coordinate: ms scroll-snap-destination: ms scroll-snap-points-x: ms scroll-snap-points-y: ms flow-into: ms flow-from: ms region-fragment: ms text-spacing: ms Also, [@​pdokas](https://togithub.com/pdokas) added default value (current working dir) for `from` option in `autoprefixer.info()`. ##### Other Changes - Add wrong `radial-gradient` properties warning. - Do not prefix `reverse` animation direction. - Improve test coverage (by [@​Semigradsky](https://togithub.com/Semigradsky)). ### [`v7.1.6`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#716) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/7.1.5...7.1.6) - Add warning for using `browserslist` option instead of `browsers`. - Add warning for multiple control comments in the same scope. - Fix `Invalid array length` error during indent changes. ### [`v7.1.5`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#715) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/7.1.4...7.1.5) - Fix `::placeholder` prefix for Edge. - Fix `inherit`/`initial`/`unset` values for `flex-direction`. - Fix RegExp usage in gradients (by Yet Another Minion). ### [`v7.1.4`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#714) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/7.1.3...7.1.4) - Fix `radial-gradient` direction conversion. - Fix `image-set` in `cursor`. ### [`v7.1.3`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#713) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/7.1.2...7.1.3) - Add warning for old `radial-gradient` direction syntax. ### [`v7.1.2`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#712) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/7.1.1...7.1.2) - Fix `text-decoration` shortcut support. ### [`v7.1.1`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#711) [Compare Source](https://togithub.com/postcss/autoprefixer/compare/7.1.0...7.1.1) - Remove non-`-webkit-` intrinsic prefixes in Grid Layout (by 一丝). ### [`v7.1.0`](https://togithub.com/postcss/autoprefixer/releases/tag/7.1.0): 7.1 “Universitas litterarum” [Compare Source](https://togithub.com/postcss/autoprefixer/compare/7.0.1...7.1.0) Autoprefixer 7.1 brings `unicode-bidi` support, `-webkit-appearance` to Edge and fix intrinsic widths prefixes in Grid Layout. #### `unicode-bidi` Autoprefixer 7.1 will add prefixes for `isolate`, `plaintext` and `isolate-override` values in `unicode-bidi`: ```css .foo { unicode-bidi: -webkit-isolate; unicode-bidi: isolate; } ``` ##### Edge and `-webkit-appearance` Prefixes sometime could be very strange. Edge started to support `appearance` property with a prefix. But because of many only-for-Safari websites it supports `-webkit-appearance` instead of `-ms-appearance`. Autoprefixer 7.1 knows it and will generate `-webkit-appearance` even if you set only `"last 1 Edge version"` in [browserslist](https://togithub.com/ai/browserslist) config. ##### Intrinsic Widths `min-content`, `stretch` and other Intrinsic sizes was fixed in `grid-template-columns` and other Grid Layout properties. ```css .foo { grid-template-columns: minmax(100px, -webkit-min-content); grid-template-columns: minmax(100px, min-content); } ``` ##### Browserslist in `info()` By accident Browserslist 1 loaded config from current working dir if file path was missed. In Browserslist 2 we fixed it and now you must specify path to file in explicit way. It is not a problem for Autoprefixer user, because Autoprefixer takes CSS file path from PostCSS. But `autoprefixer.info()` stopped to load conifg in 7.0. In 7.1 we added `from` option to `info()`. Set the path to your CSS file and `info()` will show what prefixes and why it will added to this CSS file: ```js autoprefixer.info({ from: './scr/app.css' }) //=> Browsers: // Chrome: 58 // // These browsers account for 1.68% of all user

---

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• [ ] If you want to rebase/retry this PR, check this box

---

This PR was generated by Mend Renovate. View the repository job log.

[gitstream-cm[bot]]

This PR is missing a Jira ticket reference in the title or description. Please add a Jira ticket reference to the title or description of this PR.

[gitstream-cm[bot]]

🥷 Code experts: lauraluiz

lauraluiz has most 🧠 knowledge in the files.

See details

`package-lock.json` Knowledge based on git-blame: lauraluiz: 55% `package.json` Knowledge based on git-blame: lauraluiz: 72%

To learn more about /:\ gitStream - Visit our Docs