Update dependency autoprefixer to v10
This MR contains the following updates:
Package | Change | Age | Adoption | Passing | Confidence |
---|---|---|---|---|---|
autoprefixer | ^8.6.5 -> ^10.0.0 |
Release Notes
postcss/autoprefixer
v10.0.2
- Removed
-ms-user-select: all
because IE and old Edge don’t support it. - Fixed Grid Layout warning.
v10.0.1
- Fix PostCSS 8.1 compatability.
- Add our OpenCollective to
package.json
. - Clean up code (by Sukka).
v10.0.0
Autoprefixer 10 is based on top of PostCSS 8 (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.
v9.8.6
- Fixed
env
option.
v9.8.5
- Improved Grid Layout warnings (by Daniel Tonon).
- Fixed
align-self
andjustify-self
withdisplay: flex
(by Daniel Tonon).
v9.8.4
- Replace color output library.
v9.8.3
- Return old non-LTS Node.js versions to avoid breaking changes.
v9.8.2
- Remove Node.js 13.0-13.7 from supported engines, because of buggy ESM support.
v9.8.1
- Replace
chalk
tokleur
(by Luke Edwards). - Update docs (by @mbomb007).
v9.8.0
Autoprefixer 9.8 brings IE support for :placeholder-shown
.
Placeholder Shown
@tkrotoff found that input:placeholder-shown
can be emulated with input:-ms-input-placeholder
.
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 <input>
.
v9.7.6
- Revert
-webkit-stretch
fix.
v9.7.5
- Fix
-webkit-stretch
support.
v9.7.4
- Fix warning text (by Dmitry Ishkov).
v9.7.3
- Fix compatibility with PostCSS Modules.
v9.7.2
- Add
-ms-user-select: element
support. - Add funding link for
npm fund
.
v9.7.1
- Avoid unnecessary transitions in prefixed selectors (by Andrey Alexandrov).
- Fix
fit-content
for Firefox.
v9.7.0
Autoprefixer 9.7 brings AUTOMREFIXER_GRID
environment variable and huge performance improvments.
Grid Environment Variable
Autoprefixer can add CSS Grid polyfills 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.
Now Autoprefixer supports environment variable to enable CSS Grid polyfill:
AUTOMREFIXER_GRID=autoplace npm build
Performance Improvements
@Knagis found 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
error
v9.6.5
- Fix selector prefixing (by Andrey Alexandrov).
v9.6.4
- Now the real fix for
'startsWith' of undefined
error.
v9.6.3
- Fix
Cannot read property 'startsWith' of undefined
error.
v9.6.2
- Fix false
Replace fill to stretch
warning.
v9.6.1
- Fix
-webkit-line-clamp
truncating multi-line text support.
v9.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.
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
and babel-preset-env
use them to add only actual polyfills, 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 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:
-
Create
browserslist
key with an array inpackage.json
. -
Copy queries from the
browsers
option. If you havebrowsers: [“last 1 version”, “not dead”]
, then you need:"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:
.image {
background-image: url(image@1x.png);
}
@​media (min-resolution: 2dppx) {
.image {
background-image: url(image@2x.png);
}
}
.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 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
to add polyfills.
Other
-
text-orientation
property support was added. -
@jmmarco added
CONTRIBUTING.md
v9.5.1
- Fix
backdrop-filter
for Edge (by Oleh Aloshkin). - Fix
min-resolution
media query support in Firefox < 16.
v9.5.0
Autoprefixer 9.5 brings mask-composite
support.
a {
mask-composite: add;
}
b {
mask: url(intersect.png) intersect, url(exclude.png);
}
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 for implementation and @iamvdo for suggestion.
v9.4.10
- Add warning for named Grid rows.
v9.4.9
- Fix
grid-template
and@media
case (by Bogdan Dolin).
v9.4.8
- Fix
calc()
support in Grid gap.
v9.4.7
- Fix infinite loop on mismatched parens.
v9.4.6
- Fix warning text (by Albert Juhé Lluveras).
v9.4.5
- Fix
text-decoration-skip-ink
support.
v9.4.4
- Use
direction
value for-ms-writing-mode
(by Denys Kniazevych). - Fix warning text (by @zzzzBov).
v9.4.3
- Add warning to force
flex-start
instead ofstart
(by Antoine du Hamel). - Fix docs (by Christian Oliff).
v9.4.2
- Fix Grid autoplacement warning.
v9.4.1
- Add warning for named Grid rows.
v9.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.
/* Input CSS */
/* autoprefixer grid: autoplace */
.autoplacement-example {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-gap: 20px;
}
/* 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 section before using this new feature.
Thanks to @bogdan0083 for implementing the new feature, @Dan503 for documenting it, and @evandiamond for coming up with the initial idea.
Other Changes
- Remove some unnecessary warnings for Grid (by @fanich37).
v9.3.1
- Fix Grid prefixes with
repeat()
value (by Bogdan Dolin).
v9.3.0
Autoprefixer 9.3 brings place-self
support for Grid Layout
place-self
@Dan503 and @bogdan0083 found a way to impement support for another Grid property
.grid > .center {
place-self: center;
}
.grid > .center {
-ms-grid-row-align: center;
-ms-grid-column-align: center;
place-self: center;
}
Other Changes
@Dan503 and @bogdan0083 also detected and fixed issue with Grid row/column span inheritance.
v9.2.1
- Fix broken AST.
v9.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 added special control comments:
/* 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:
@​supports (grid-auto-rows: 100px) {
/* Autoprefixer will not show Grid warnings and will not add prefixes here */
}
grid-area
Smarter Autoprefixer supports grid-template
even if it was not in IE Grid spec.
But in 9.2 @bogdan0083 really improve it according to @Dan503 idea. Now Autoprefixer supports even overriding grid-template
.
/* 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 and @bogdan0083)
- Improve docs (by @JoshuaHall, @Drarok, @revelt, and @janczer).
v9.1.5
- Remove
@babel/register
from dependencies.
v9.1.4
- Use Babel 7.
v9.1.3
- Sort properties in
autoprefixer --info
alphabetically. - Fix old Firefox gradient prefix.
v9.1.2
- Fix
autoprefixer --info
in new Node.js.
v9.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
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:
.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 [fixed](
Renovate configuration
-
If you want to rebase/retry this MR, check this box
This MR has been generated by WhiteSource Renovate. View repository job log here.