postcss/autoprefixer (autoprefixer)
### [`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`
[ ] If you want to rebase/retry this PR, check this box
This PR contains the following updates:
^9.5.1->^10.0.0By merging this PR, the below issues will be automatically resolved and closed:
By merging this PR, the below issues will be automatically resolved and closed:
Release Notes
postcss/autoprefixer (autoprefixer)
### [`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)