Autoprefixer: [css-grid] @media rules are nested in some cases

Created on 5 Jul 2018 · 4Comments · Source: postcss/autoprefixer

Thank you for the grateful feature!
I found a case where @ media rules are nested. This is not works on IE.

Test case:

@media (min-width: 30em) {
  .wrapper {
    display: grid;
    grid-template-areas: "a b";
  }
}

@media (min-width: 60em) {
  .wrapper {
    grid-template-areas: "a b";
  }
}

@media (min-width: 30em) {
  .a {
    grid-area: a;
  }
}

@media (min-width: 30em) {
  .b {
    grid-area: b;
  }
}

Actual:

@media (min-width: 30em) {
  .wrapper {
    display: -ms-grid;
    display: grid;
    grid-template-areas: "a b";
  }
}

@media (min-width: 60em) {
  .wrapper {
    grid-template-areas: "a b";
  }
}

@media (min-width: 30em) {
  .a {
    grid-area: a;
  }
}

@media (min-width: 30em) {
  .b {
    grid-area: b;
  }

@media (min-width: 60em) {
  .a {
      -ms-grid-row: 1;
      -ms-grid-column: 1;
  }
  .b {
      -ms-grid-row: 1;
      -ms-grid-column: 2;
  }
}@media (min-width: 30em) {
  .a {
      -ms-grid-row: 1;
      -ms-grid-column: 1;
  }
  .b {
      -ms-grid-row: 1;
      -ms-grid-column: 2;
  }
}
}

bug

Source