chore(deps): update dependency autoprefixer to v10

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
autoprefixer	8.6.5 -> 10.4.20

---

Release Notes

postcss/autoprefixer (autoprefixer)

v10.4.20

Compare Source

• Fixed fit-content prefix for Firefox.

v10.4.19

Compare Source

• Removed end value has mixed support, consider using flex-end warning
  since end/start now have good support.

v10.4.18

Compare Source

• Fixed removing -webkit-box-orient on -webkit-line-clamp (@​Goodwine).

v10.4.17

Compare Source

• Fixed user-select: contain prefixes.

v10.4.16

Compare Source

• Improved performance (by Romain Menke).
• Fixed docs (by Christian Oliff).

v10.4.15

Compare Source

• Fixed ::backdrop prefixes (by 一丝).
• Fixed docs (by Christian Oliff).

v10.4.14

Compare Source

• Improved startup time and reduced JS bundle size (by Kārlis Gaņģis).

v10.4.13

Compare Source

• Fixed missed prefixes on vendor prefixes in name of CSS Custom Property.

v10.4.12

Compare Source

• Fixed support of unit-less zero angle in backgrounds (by 一丝).

v10.4.11

Compare Source

• Fixed text-decoration prefixes by moving to MDN data (by Romain Menke).

v10.4.10

Compare Source

• Fixed unicode-bidi prefixes by moving to MDN data.

v10.4.9

Compare Source

• Fixed css-unicode-bidi issue from latest Can I Use.

v10.4.8

Compare Source

• Do not print color-adjust warning if print-color-adjust also is in rule.

v10.4.7

Compare Source

• Fixed print-color-adjust support in Firefox.

v10.4.6

Compare Source

• Fixed print-color-adjust support.

v10.4.5

Compare Source

• Fixed NaN in grid (by @​SukkaW).

v10.4.4

Compare Source

• Fixed package.funding to have same value between all PostCSS packages.

v10.4.3

Compare Source

• Fixed package.funding (by Álvaro Mondéjar).

v10.4.2

Compare Source

• Fixed missed -webkit- prefix for width: stretch.

v10.4.1

Compare Source

• Fixed ::backdrop prefixes (by 一丝).
• Fixed docs (by Christian Oliff).

v10.4.0: 10.4 “ǃke e꞉ ǀxarra ǁke”

Compare Source

In Autoprefixer 10.4 @​lukewarlow added :autofill support:

input:-webkit-autofill {
  background-color: red;
}

input:autofill {
  background-color: red;
}

v10.3.7

Compare Source

• Replaced nanocolors to picocolors.

v10.3.6

Compare Source

• Updated nanocolors.
• Reduced package size.

v10.3.5

Compare Source

• Replaced colorette to nanocolors.

v10.3.4

Compare Source

• Fixed stretch value in latest Firefox.

v10.3.3

Compare Source

• Fixed wrong -moz- prefix from ::file-selector-button (by Usman Yunusov).

v10.3.2

Compare Source

• Fixed ::file-selector-button support (by Usman Yunusov).

v10.3.1

Compare Source

• Fixed adding wrong prefixes to content (by Luke Warlow).

v10.3.0: 10.3 “Чести своей не отдам никому”

Compare Source

In Autoprefixer 10.3 @​lukewarlow added ::file-selector-button support.

::-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

Compare Source

• Fixed “no prefixes needed” warning (by @​Pwntheon).

v10.2.5

Compare Source

• Fixed : support in @supports (by Dmitry Semigradsky).
• Fixed docs (by Christian Oliff).

v10.2.4

Compare Source

• Fixed browser names in npx autoprefixer --info.

v10.2.3

Compare Source

• Fixed PostCSS 8 support.

v10.2.2

Compare Source

• Fixed PostCSS 8 plugins compatibility.

v10.2.1

Compare Source

• Fixed transition-property warnings (by @​Sheraff).

v10.2.0: 10.2 “Sub rosa”

Compare Source

Autoprefixer 10.2 now has built-in TypeScript definitions. You do not need @types/autoprefixer anymore.

Thanks to @​Semigradsky and DefinitelyTyped’s contributors.

@​Sheraff also improved docs.

v10.1.0: 10.1 “Pula”

Compare Source

Autoprefixer 10.1 improved min-resolution support.

@​infusion added dpcm unit support and num2fraction with Fraction.js, which uses Farey Sequences as a rational approximation (more precise) and simplifies the fraction using continued fractions to ɛ <0.001 afterward.

/* 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

Compare Source

• Fixed Cannot read property 'proxyOf' of undefined error (by Igor Kamyshev).

v10.0.3

Compare Source

• Fixed substract to subtract value for mask-composite (by Michelle Enos).

v10.0.2

Compare Source

• Removed -ms-user-select: all because IE and old Edge don’t support it.
• Fixed Grid Layout warning.

v10.0.1

Compare Source

• Fix PostCSS 8.1 compatability.
• Add our OpenCollective to package.json.
• Clean up code (by Sukka).

v10.0.0: 10.0 “Alis volat propriis”

Compare Source

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.8

Compare Source

• Replaced nanocolors with picocolors.
• Reduced package size.

v9.8.7

Compare Source

• Replaced colorette with nanocolors.
• Reduced package size.

v9.8.6

Compare Source

• Fixed env option.

v9.8.5

Compare Source

• Improved Grid Layout warnings (by Daniel Tonon).
• Fixed align-self and justify-self with display: flex (by Daniel Tonon).

v9.8.4

Compare Source

• Replace color output library.

v9.8.3

Compare Source

• Return old non-LTS Node.js versions to avoid breaking changes.

v9.8.2

Compare Source

• Remove Node.js 13.0-13.7 from supported engines, because of buggy ESM support.

v9.8.1

Compare Source

• Replace chalk to kleur (by Luke Edwards).
• Update docs (by @​mbomb007).

v9.8.0: 9.8 “Vigilo Confido”

Compare Source

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

Compare Source

• Revert -webkit-stretch fix.

v9.7.5

Compare Source

• Fix -webkit-stretch support.

v9.7.4

Compare Source

• Fix warning text (by Dmitry Ishkov).

v9.7.3

Compare Source

• Fix compatibility with PostCSS Modules.

v9.7.2

Compare Source

• Add -ms-user-select: element support.
• Add funding link for npm fund.

v9.7.1

Compare Source

• Avoid unnecessary transitions in prefixed selectors (by Andrey Alexandrov).
• Fix fit-content for Firefox.

v9.7.0: 9.7 “Ad Victoriam”

Compare Source

Autoprefixer 9.7 brings AUTOPREFIXER_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:

AUTOPREFIXER_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

Compare Source

• Fix selector prefixing (by Andrey Alexandrov).

v9.6.4

Compare Source

• Now the real fix for 'startsWith' of undefined error.

v9.6.3

Compare Source

• Fix Cannot read property 'startsWith' of undefined error.

v9.6.2

Compare Source

• Fix false Replace fill to stretch warning.

v9.6.1

Compare Source

• Fix -webkit-line-clamp truncating multi-line text support.

v9.6.0: 9.6 “Nunc id vides, nunc ne vides”

Compare Source

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:

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:

      "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([email protected]);
}
@​media (min-resolution: 2dppx) {
  .image {
    background-image: url([email protected]);
  }
}

.image {
  background-image: url([email protected]);
}
@​media (-webkit-min-device-pixel-ratio: 2),
       (-o-min-device-pixel-ratio: 2/1),
       (min-resolution: 2dppx) {
  .image {
    background-image: url([email protected]);
  }
}

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

Compare Source

• Fix backdrop-filter for Edge (by Oleh Aloshkin).
• Fix min-resolution media query support in Firefox < 16.

v9.5.0: 9.5 “Draco dormiens nunquam titillandus”

Compare Source

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

Compare Source

• Add warning for named Grid rows.

v9.4.9

Compare Source

• Fix grid-template and @media case (by Bogdan Dolin).

v9.4.8

Compare Source

• Fix calc() support in Grid gap.

v9.4.7

Compare Source

• Fix infinite loop on mismatched parens.

v9.4.6

Compare Source

• Fix warning text (by Albert Juhé Lluveras).

v9.4.5

Compare Source

• Fix text-decoration-skip-ink support.

v9.4.4

Compare Source

• Use direction value for -ms-writing-mode (by Denys Kniazevych).
• Fix warning text (by @​zzzzBov).

v9.4.3

Compare Source

• Add warning to force flex-start instead of start (by Antoine du Hamel).
• Fix docs (by Christian Oliff).

v9.4.2

Compare Source

• Fix Grid autoplacement warning.

v9.4.1

Compare Source

• Add warning for named Grid rows.

v9.4.0: 9.4 “Advance Australia”

Compare Source

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

Compare Source

• Fix Grid prefixes with repeat() value (by Bogdan Dolin).

v9.3.0: 9.3 “Labor omnia vincit”

Compare Source

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

Compare Source

• Fix broken AST.

v9.2.0: 9.2 “Onyi est glavnaya krepost”

Compare Source

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 */
}

Smarter grid-area

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

Compare Source

• Remove @babel/register from dependencies.

v9.1.4

Compare Source

• Use Babel 7.

v9.1.3

Compare Source

• Sort properties in autoprefixer --info alphabetically.
• Fix old Firefox gradient prefix.

v9.1.2

Compare Source

• Fix autoprefixer --info in new Node.js.

v9.1.1

Compare Source

• 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: 9.1 “Equality before the law”

Compare Source

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 an issue when media-query override some grid-template.

v9.0.2

Compare Source

• Show warning on Grid area names conflict (by Bogdan Dolin).
• Fix documentation (by Sven Wagner).

v9.0.1

Compare Source

• Fix nested at-rules in Grid prefixes (by Ivan Malov).

v9.0.0: 9.0 “A Mari Usque Ad Mare”

Compare Source

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 9.0 dropped the RubyRacer and Sprockets 3 support.

Browserslist 4.0

Autoprefixer 9.0 uses 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

---

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.