Update dependency autoprefixer to v9.7.4

[renovate]

This PR contains the following updates:

Package	Type	Update	Change
autoprefixer	devDependencies	minor	9.4.7 -> 9.7.4

---

Release Notes

postcss/autoprefixer

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

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

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

Compare Source

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

v9.5.0

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.

---

Renovate configuration

📅 Schedule: At any time (no schedule defined).

🚦 Automerge: Enabled.

♻️ 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 has been generated by WhiteSource Renovate. View repository job log here.