autoprefixer: CSS-Grid wrong ms prop values w/ media queries

Description When a container with display: grid; changes the grid-template-areas property in a media query, children with a grid-area property will end up with values for -ms-grid-row, -ms-grid-column and -ms-grid-column-span that correspond to whichever grid-template-areas comes first, any other instances are ignored resulting in wrong placement.

Expected or desired result Depending on whether you consider this a bug, an oversight or a feature request 😉

Children with a grid-area property should be rendered once inside a new media query for each time its parent’s grid changes with MS values corresponding to these new grid values.

Example I don’t know how to add the grid: true config option to CodePen’s Autoprefixer so unfortunately, you’re going to have to try this example locally. Here’s a link to the pen anyway, in case anyone knows.

If you let Autoprefixer transpile the following code you’ll notice that the third box will have only received -ms- property values for the 768px media query and that it will still span two columns and be on a second row which no long exists above 1200px.

<div class="container">
  <div class="box boxFirst">First box</div>
  <div class="box boxSecond">Second box</div>
  <div class="box boxThird">Third box</div>
</div>

@media screen and (min-width: 768px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "boxFirst boxSecond"
      "boxThird boxThird";
  }
}

@media screen and (min-width: 1200px) {
  .container {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "boxFirst boxSecond boxThird";
  }
}

.box { padding: 16px; text-align: center; color: white; font-family: sans-serif; }

.boxFirst { grid-area: boxFirst; background-color: #90afc5;  }
.boxSecond { grid-area: boxSecond; background-color: #2a3132; }
.boxThird { grid-area: boxThird; background-color: #763626; }

After transpilation:

.boxThird {
  background-color: background-color: #763626;
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: boxThird;
}

Expected after transpilation:

@media screen and (min-width: 768px) {
  .boxThird {
    background-color: background-color: #763626;
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-area: boxThird;
  }
}

@media screen and (min-width: 1200px) {
  .boxThird {
    background-color: background-color: #763626;
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
    grid-area: boxThird;
  }
}