postcss/autoprefixer 9.2.0

9.2 “Onyi est glavnaya krepost”

on GitHub

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