Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
IOIIOOIO opened this issue Jan 28, 2020 · 3 comments
Open

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

IOIIOOIO opened this issue Jan 28, 2020 · 3 comments

Comments

@IOIIOOIO
Copy link

IOIIOOIO commented Jan 28, 2020

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
Copy link
Author

IOIIOOIO commented Jan 28, 2020

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 */
}

@IOIIOOIO IOIIOOIO changed the title BEM Modifier class + media query = Incorrect grid columns on IE BEM Modifier class + media query = incorrect grid columns on IE Jan 28, 2020
@ai
Copy link
Member

ai commented Jan 28, 2020

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants