postcss/autoprefixer 8.5.0

8.5 “Muito Nobre e Sempre Leal”

on GitHub

Autoprefixer 8.5 brings grid-gap support and fix radial-gradient.

Grid Gap

@yepninja continues his amazing work of adding CSS Grid Layout support to Autoprefixer.

Now he brought grid-gap. It is amazing work since IE 11 has gaps support in -ms- grids.

To add grid-gap support for IE 11 Autoprefixer adds addition grid cells. Unfortunately, it will work only if you have grid-template in the same rule with grid-gap. We had big discussion with a community about these limits.

.page {
    grid-gap: 33px;
    -ms-grid-rows: 1fr 33px minmax(100px, 1fr) 33px 2fr;
    -ms-grid-columns: 1fr 33px 100px 33px 1fr;
    grid-template:
        "head head  head" 1fr
        "nav  main  main" minmax(100px, 1fr)
        "nav  foot  foot" 2fr /
        1fr   100px 1fr;
}

Set postcss-gap-properties before Autoprefixer if you want to use new gap property.

Radial Gradients

Old gradients with prefixes used a different direction syntax. Autoprefixer converts direction to old syntax (or warn you to rewrite direction from old to new syntax).

But it has an issue with extent keywords like circle closest-corner. We fixed it after @BaliBalo report.

.mask {
    -webkit-mask-image: -webkit-radial-gradient(100% 50%, circle closest-corner, black, white);
            mask-image: radial-gradient(circle closest-corner at 100% 50%, black, white);
}