Update dependency autoprefixer to v9

[renovate]

This PR contains the following updates:

Package	Type	Update	Change	References
autoprefixer	dependencies	major	8.6.5 -> 9.4.9	source

---

Release Notes

postcss/autoprefixer

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

• Fix unnecessary Flexbox prefixes in Grid elements.

v9.4.0

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

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

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

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

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

---

Renovate configuration

📅 Schedule: "on thursday" (UTC).

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

♻️ Rebasing: Whenever PR becomes conflicted, or if you modify the PR title to begin with "rebase!".

🔕 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 Renovate Bot. View repository job log here.

[renovate]

PR has been edited

👷 This PR has received other commits, so Renovate will stop updating it to avoid conflicts or other problems. If you wish to abandon your changes and have Renovate start over then you can add the label rebase to this PR and Renovate will reset/recreate it.