postcss/autoprefixer 7.2.0

7.2 “Ordem e Progresso”

on GitHub

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: 30px auto 30px;
    grid-template-columns: 1fr 3fr;
    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).