Autoprefixer: grid-area prefixing missing when multiple cells target the same grid-template-area

Created on 30 Jan 2018 · 6Comments · Source: postcss/autoprefixer

This might be more of an edge-case...

Notice: #a and #b elements are targeting the same content cell which is valid in CSS grid as I understood it.

SCSS input:

.box {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 100px 1fr 50px;
    grid-template-areas: "header" "content" "footer";

    header {
        grid-area: header;
    }

    #a {
        grid-area: content;
    }

    #b {
        grid-area: content;
    }


    footer {
        grid-area: footer;
    }
}

CSS output:

Notice: -ms-grid-row and -ms-grid-column props are missing for #b.

.google-shopping.alternate-offer-lander .box {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  -ms-grid-rows: 100px 1fr 50px;
  grid-template-rows: 100px 1fr 50px;
  grid-template-areas: "header" "content" "footer";
}

.google-shopping.alternate-offer-lander .box header {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: header;
}

.google-shopping.alternate-offer-lander .box #a {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: content;
}

.google-shopping.alternate-offer-lander .box #b {
  grid-area: content;
}

.google-shopping.alternate-offer-lander .box footer {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: footer;
}

bug

Source

derzwen

👍1

Most helpful comment

Yeap! https://github.com/postcss/autoprefixer/blob/master/lib/hacks/grid-template-areas.js#L64
Now areas are removed from the array when it is used once. It was necessary in order to throw warning with unused areas.
I'll fix it.