postcss/autoprefixer 6.3.0

6.3 “Pro rege et lege”

on GitHub

Autoprefixer 6.3 brings Grid Layout supports and custom browsers usage statistics.

Grid Layout

Grid Layout should be released in 2016. But IE already supports the old version of specification with -ms- prefixes.

The old specification is limited and has different properties, that current one. Autoprefixer will try to convert simple usage cases.

.container {
    display: grid;
    grid-template-columns: 200px 1% 1fr;
    grid-template-rows: auto 15px repeat(3, 1fr);
}
.logo {
    grid-column: 1;
    grid-row: 1 / 2;
}

Output:

.container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 200px 1% 1fr;
        grid-template-columns: 200px 1% 1fr;
    -ms-grid-rows: auto 15px (1fr)[3];
        grid-template-rows: auto 15px repeat(3, 1fr);
}
.logo {
    -ms-grid-column-span: 2;
    -ms-grid-column: 1;
        grid-column: 1 / span 2;
}

But Grid support is very limited in IE. So we add a grid: false option to disable this Autoprefixer feature if you want to use JS polyfill.

Also you can disable @supports by supports: false. With flexbox option you can disable this feature completely or disable 2009 limited specification by "no-2009" value.

Custom Browsers Statistics

Autoprefixer 6.3 includes Browserslist 1.1 with custom browsers statistics support by @DanReyLop.

So now you can use Google Analytics data from your site to select browsers by popularity:

postcss([
    autoprefixer({ browers: '> 5% in my stats', stats: './browsers-stats.json' })
])

Browserslist docs contain good instractions how to get this statistics file.

Other

• Add text-spacing support.
• Fix compatibility with other PostCSS plugins.