An in-range update of autoprefixer is breaking the build 🚨 about preact-boilerplate HOT 3 CLOSED

Autoprefixer 7.2 brings better Grid support for IE
and autoprefixer-info CLI tool.

Grid Layout

With grid: true option Autoprefixer adds -ms- prefixes to Grid Layout properties. But this feature was very limited.

In 7.0 we dramatically improved Grid support for IE. @Alex7Kom added grid-area and improved grid-row and grid-column support. @evgeny-petukhov added grid-template-areas and grid-template support.

Even this complex emoji example will work with new Autoprefixer (output):

body {
    display: grid;
    grid-template-rows: auto 300px;
    grid-template-columns: 3fr 1fr;
    grid-template-areas: "🎩 🎩"
                         "🍔 📰"
                         "👞 👞";
}
header {
    grid-area: 🎩;
}
nav {
    grid-area: 🍔;
}
main {
    grid-area: 📰;
}
footer {
    grid-area: 👞;
}

Just don’t forget to set grid: true option:

auoprefixer({ grid: true })

Info CLI Tool

Autoprefixer 7.2 ships with new CLI tool to check which browsers are selected and which properties will be prefixed.

Just go to your project directory and run npx autoprefixer-info:

Browsers:
  Edge: 16
These browsers account for 0.04% of all users globally
At-Rules:

@viewport: ms
Selectors:

::placeholder: ms
Properties:

user-select: ms

hyphens: ms

appearance: webkit

scroll-snap-type: ms

scroll-snap-coordinate: ms

scroll-snap-destination: ms

scroll-snap-points-x: ms

scroll-snap-points-y: ms

flow-into: ms

flow-from: ms

region-fragment: ms

text-spacing: ms

Also, @pdokas added default value (current working dir) for from option in autoprefixer.info().

Other Changes

• Add wrong radial-gradient properties warning.
• Do not prefix reverse animation direction.
• Improve test coverage (by @Semigradsky).

• Fix IE and other old JS runtimes support.