BEM Modifier class + media query = incorrect grid columns on IE

[IOIIOOIO]

Hi, I'm having an issue that I'm not sure can be solved by autoprefixer. I may need to come up with an alternative solution. I thought it may help to share it with you. Also, perhaps someone can think of a clever workaround for me.

Please Note:

• I have posted SCSS code below because it makes it easier to read the code. Let me know if you'd prefer plain CSS.
• If you remove the media queries then it works as expected. I will post an example without the media queries in my next reply to this post.

Input SCSS:

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "a a a"
    "b b b";
  @media screen and (min-width: 992px) {
    grid-template-areas:
      "a b c"
      "a b c";
  }
  &--reverse {
    grid-template-columns: 3fr 2fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "a a a"
      "b b b";
    @media screen and (min-width: 992px) {
      grid-template-areas:
        "c b a"
        "c b a";
    }
  }
  &__a {
    grid-area: a;
  }
  &__b {
    grid-area: b;
  }
  &__c {
    display: none;
    @media screen and (min-width: 992px) {
      grid-area: c;
    }
  }
}

Output CSS (the incorrect CSS is right at the bottom of the output):

/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */
.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2fr 3fr;
  grid-template-columns: 1fr 2fr 3fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
      grid-template-areas: "a a a" "b b b";
}
@media screen and (min-width: 992px) {
  .grid {
        grid-template-areas: "a b c" "a b c";
  }
}
.grid--reverse {
  -ms-grid-columns: 3fr 2fr 1fr;
  grid-template-columns: 3fr 2fr 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
      grid-template-areas: "a a a" "b b b";
}
@media screen and (min-width: 992px) {
  .grid--reverse {
        grid-template-areas: "c b a" "c b a";
  }
}
.grid__a {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: a;
}
.grid--reverse > .grid__a {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
}
.grid__b {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: b;
}
.grid--reverse > .grid__b {
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
}
.grid__c {
  display: none;
}
@media screen and (min-width: 992px) {
  .grid__c {
    grid-area: c;
  }
}
@media screen and (min-width: 992px) {
  .grid__a {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .grid--reverse > .grid__a {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
  }
  .grid__b {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }
  .grid--reverse > .grid__b {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }
  .grid__c {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 3; /* This is the correct value for grid-area C */
  }
  .grid__c {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 1; /* This is the incorrect value and should only be applied by the ".grid--reverse" modifier class */
  }
}

Expected Output CSS (shortened for brevity)

/* all the other stuff, and then at the end followed by: */
@media screen and (min-width: 992px) {
  .grid__c {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 3;
  }
  .grid--reverse > .grid__c {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 1;  /* Now this is the correct value, because it's preceded by the " .grid--reverse" selector */
  }
}

[IOIIOOIO]

As mentioned in my original post, if I remove the media queries then things work out fine, for example:

Input SCSS

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "a b c"
    "a b c";
  &--reverse {
    grid-template-columns: 3fr 2fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "c b a"
      "c b a";
  }
  &__a {
    grid-area: a;
  }
  &__b {
    grid-area: b;
  }
  &__c {
    grid-area: c;
  }
}

Output CSS

/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2fr 3fr;
  grid-template-columns: 1fr 2fr 3fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
      grid-template-areas: "a b c" "a b c";
}
.grid--reverse {
  -ms-grid-columns: 3fr 2fr 1fr;
  grid-template-columns: 3fr 2fr 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
      grid-template-areas: "c b a" "c b a";
}
.grid__a {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;
  grid-area: a;
}
.grid--reverse > .grid__a {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 3;
}
.grid__b {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 2;
  grid-area: b;
}
.grid--reverse > .grid__b {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 2;
}
.grid__c {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 3;
  grid-area: c;
}
.grid--reverse > .grid__c {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1; /* This is now correctly preceded by the ".grid--reverse" class */
}

[ai]

Thanks for the report (you provide all details, which we need).

Unfortunately, I will not have in the next months for this issue. But if you will try to made a PR, I will help you with advice and quick release.

Look for lib/hacks/grid-* files.

[IOIIOOIO]

Ok thanks, I will just use an override in the CSS for now. I would be happy to work on a permanent fix with you but I will have to do it over the weekend.