Autoprefixer: [css-grid] Idea on how to 100% support duplicate area names

Created on 4 Aug 2018 · 25Comments · Source: postcss/autoprefixer

I've realized a use case where duplicate area names makes sense.

<div class="grid">
  <div class="grid-cell a"></div>
  <div class="grid-cell b"></div>
</div>

<!-- I want this to have a slightly different layout. -->
<!-- It is the same component but this time with a modifier class on it -->
<div class="grid conflict">
  <div class="grid-cell a"></div>
  <div class="grid-cell b"></div>
</div>

Input CSS

.grid {
  display: grid;
  grid-template-areas:
    "a b";
}

.grid.conflict {
  display: grid;
  grid-template-areas:
    "a"
    "b";
}

.a { grid-area: a; }
.b { grid-area: b; }

Current Output CSS (and it warns the user that there is a duplicate area name in rule .grid.conflict)

.grid {
  display: -ms-grid;
  display: grid;
  grid-template-areas: "a b";
}

.grid.conflict {
  display: -ms-grid;
  display: grid;
  grid-template-areas:
    "a"
    "b";
}

.a {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: a;
}

.b {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: b;
}

This is my proposed output idea:

.grid {
  display: -ms-grid;
  display: grid;
  grid-template-areas: "a b";
}

.grid.conflict {
  display: -ms-grid;
  display: grid;
  grid-template-areas:
    "a"
    "b";
}

/* It uses the first area by default */
.a {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: a;
}
.b {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: b;
}

/* It has detected a conflict, it now prefixes with the conflicting grid selector */
.grid.conflict > .a {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
.grid.conflict > .b {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}

This is what we know purely from looking at the CSS and knowing how CSS Grid works:

A grid cell _must_ be a direct descendant of the parent grid container that controls it in the HTML for CSS Grid to work.
.grid.conflict > .a will only work on .a elements that have been placed _directly_ inside a .grid.conflict element.
.grid.conflict > .a will have no effect on .a elements inside .grid elements.
.grid.conflict > .a will have no effect on .a elements nested deeply inside .grid.conflict elements.

If we create these additional prefixed rules with [grid-selector] > I think we can pretty safely support duplicate area names without having to give out a warning.

There is a danger in that we are increasing the rule specificity. I think specificity issues will be easier to work around than trying to work around not being able to use duplicate area names though.

For example, you could work around the specificity issue by writing a rule like .grid > .a { grid-area: a; } instead of just .a { grid-area: a; }.

enhancement

Source

Dan503

All 25 comments

This is how I think media queries should be handled.

Input CSS

.grid {
  display: grid;
  grid-template-areas: "a b";
}

@media (max-width: 600px) {
  .grid {
    grid-template-areas:
      "a"
      "b";
  }
}

.grid.conflict {
  display: grid;
  grid-template-areas:
    "a"
    "b";
}

@media (min-width: 601px) {
  .grid.conflict {
    grid-template-areas: "a b";
  }
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

My idea for output CSS:

.grid {
  display: -ms-grid;
  display: grid;
  grid-template-areas: "a b";
}

@media (max-width: 600px) {
  .grid {
    grid-template-areas:
      "a"
      "b";
  }
}

.grid.conflict {
  display: -ms-grid;
  display: grid;
  grid-template-areas:
    "a"
    "b";
}

@media (min-width: 601px) {
  .grid.conflict {
    grid-template-areas: "a b";
  }
}

.a {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: a;
}

.b {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: b;
}

@media (max-width: 600px) {
  .a {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .b {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }
}

.grid.conflict > .a {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.grid.conflict > .b {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}

@media (min-width: 601px) {
  .grid.conflict > .a {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .grid.conflict > .b {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }
}

Dan503 on 4 Aug 2018

Wow! This idea is looking awesome and it won't be much of a problem to implement it. I need to think about it in my spare time.

bogdan0083 on 4 Aug 2018

❤1

Awesome! I wasn't sure how difficult it would be to implement.

If we could get this issue fixed then it would open up a whole new world of new CSS Grid in IE possibilities! 🤩

Dan503 on 4 Aug 2018

🎉1

I might even write up a new article for CSS Tricks looking at the sorts of new possibilities that this opens up if we can get this implemented :)

Dan503 on 4 Aug 2018

Wow, awesome idea

ai on 4 Aug 2018

Two little snags that we need to handle:

If someone uses a selector that contains a space in it when declaring the grid area, this won't work and will need to throw a warning of some sort.

/* we can't support this */
.grand-parent .parent .child {
  grid-area: a;
}

We need to support the following as a way for people to control specificity.

If .grand-parent .grid is an identical selector to the grid initializer, this should act like a replacement for our generated conflict resolution selector.

.grand-parent .grid > .cell {
  grid-area: a;
}

Basically we don't want Autoprefixer outputting this if they provided that as source code:

.grand-parent .grid > .grand-parent .grid > .cell {
  grid-area: a;
}

Dan503 on 5 Aug 2018

Oh I just realized that display: contents; is another thing that will cause issues.

<div class="grid">
    <div class="display-contents-element">
        <div class="grid-cell a"></div>
        <div class="grid-cell b"></div>
    </div>
</div>
<div class="grid conflict">
    <div class="display-contents-element">
        <div class="grid-cell a"></div>
        <div class="grid-cell b"></div>
    </div>
</div>

```css
/* This allows the grid to ignore .display-contents-element in modern browsers */
.display-contents-element {
display: contents;
}

.grid {
display: grid;
grid-template-areas:
"a b";
}
.grid.conflict {
display: grid;
grid-template-areas:
"a"
"b";
}
.a { grid-area: a; }
.b { grid-area: b; }

```css
/* This will not work in this scenario */
.grid.conflict > .a {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
.grid.conflict > .b {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}

To avoid this issue, I think if the grid setting is enabled we should just shout out a warning not to use display: contents if someone uses it. We have no way of getting IE to replicate display: contents functionality anyway so I think preventing people from using display: contents is a fair restriction to put on people that want to use Autoprefixer grid translations.

Dan503 on 5 Aug 2018

👍1

Thank you very much for the comments! They are really helpful and informative. I'm going to open WIP PR soon and we will work through every detail step by step :)

bogdan0083 on 5 Aug 2018

👍1

/* we can't support this */

Actually I've changed my mind. Now I'm thinking that if a user wrote this:

.grand-parent .parent {
  display: grid;
  grid-template-areas: "a";
}
.grand-parent .parent .child {
  grid-area: a;
}

We should support that.

We should treat that scenario the same way as if the user wrote this:

.grand-parent .parent {
  display: grid;
  grid-template-areas: "a";
}
.grand-parent .parent > .child {
  grid-area: a;
}

Dan503 on 5 Aug 2018

If someone writes something like this though:

.grand-parent .mother {
  display: grid;
  grid-template-areas: "a";
}

.grand-parent .father {
  display: grid;
  grid-template-areas: "a";
}

/* output a warning */
.uncle .child {
  grid-area: a;
}

That should output a warning since .uncle does not equal .grand-parent .mother or .grand-parent .father.

Dan503 on 5 Aug 2018

it won't be much of a problem to implement it.
@bogdan0083

Lol, so much for not being a problem to implement. It ended up needing the entire area names part of Autoprefixer to be re-written. 😆

Dan503 on 20 Sep 2018

😄1

@ai This has been fixed for a while now but it still hasn't been released in any new versions as far as I can tell. Is there something you're waiting for?

Dan503 on 30 Sep 2018

Yeap, for the minor update I am waiting for this issues to be solved:

https://github.com/postcss/autoprefixer/issues/1118
https://github.com/postcss/autoprefixer/issues/1122

ai on 30 Sep 2018

... both of those issues are already solved, fixed, and merged aren't they? 😕

Dan503 on 30 Sep 2018

This task is not solved https://github.com/postcss/autoprefixer/issues/1118

ai on 30 Sep 2018

Also, I have issue for /* autoprefixer gird: on */ control comment (but in CRA repository)

ai on 30 Sep 2018