[css-grid] Report a warning if duplicate area names are detected

[Dan503]

Take this css:

.grid-alpha {
  grid-template-areas: "delta  echo";
}

.grid-beta {
  grid-template-areas: "echo  delta";
}

.grid-cell {
  -ms-grid-column: ???; /* what column does .grid-cell go in? */
  arid-area: echo;
}

Autoprefixer has no access to the DOM so it doesn't really know what area .grid-cell belongs to.

Currently Autoprefixer silently just goes with whatever the last grid-template-areas definition was in the style-sheet (in this case "echo delta"). If a user places .grid-cell in .grid-alpha then it will look great in modern browsers but be placed in the wrong column in IE.

Since it is silent, a user could end up building their whole site blissfully unaware of this issue, using duplicate area names everywhere, then finally open IE to see their whole layout go to shit.

Autoprefixer should detect if there are any area name conflicts and if so, warn users to use unique area names at all times.

[yepninja]

Good suggestion! I think we can do it.

[Dan503]

Oh I just realised that you will need to be careful not to trigger false positives on media queries.

This code would be valid:

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template:
    "a   b" 100px
    "c   d" 100px
    "e   f" 100px /
    1fr  1fr;
}

@media (min-width: 600px){
  .grid {
    grid-template-areas:
      "a   b   c"
      "d   e   f";
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 100px);
  }
}

.cell-A {
  grid-area: a;
}

.cell-B {
  grid-area: b;
}

.cell-C {
  grid-area: c;
}

.cell-D {
  grid-area: d;
}

[yepninja]

@Dan503 grid-template-areas in media is processed separately, so it's not a problem.

[Dan503]

Not if issue #1045 is fixed.

I think it would be safe though to just ignore area names that are inside media queries and only report a warning if duplicates are found outside of media queries.

update: I've posted a better idea further down.

[ShaggyDude]

+1

[ai]

I sent this task to our Cult of Martians.

[Dan503]

I'm thinking that if a duplicate area name is found in a media query, if the selector for the element is different then it should trigger the warning.

It is likely to cause some false positives but it will also likely catch out a lot more true positives than ignoring media queries completly.

[Dan503]

For comma seperated lists, each comma should be assessed separately as to weather the selector matches or not.

[ai]

Fixed #1080

[jdalegonzalez]

Forgive me if I'm missing something but isn't this:

grid-template-areas:
    "Header           Header   Header"
    "TableOfContents  Tabs     Sidebar"
    "TableOfContents  Main     Sidebar"
    "Footer           Footer   Footer";

the way you're supposed to describe a grid with what amounts to rowSpan and colSpan sections? Something like....

+===============================+
|           Header              |
+=======+==============+========+
|       |     Tabs     |        |
|       +==============+        |
|       |              |        |
| TOC   |              |  Side  |
|       |     Main     |        |
|       |              |        |
|       |              |        |
+=======+==============+========+
|           Footer              |
+===============================+

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

Are you saying that while it's legal, it isn't supported by IE? It seems like a problem that legal CSS generates a warning. Is there a better way to accomplish the layout and still get autoprefixer support?

[ai]

@jdalegonzalez it is OK.

We spoke about same are names in two different grid-template.

[Dan503]

@jdalegonzalez read the issue carefully. The problem isn't duplicate area names being used in the same template declaration.

The problem comes in when two completely different grid elements try to use the same area names. Autoprefixer gets confused over what grid cells need to go in what grids.

[Dan503]

@ai I've removed the references to this issue in the CSS Tricks article since it has been fixed now.

[jdalegonzalez]

@Dan503 Thanks for the clarification. I think what was tripping me up is that error reads "duplicate area names detected in rule: rule with issue", making it feel like the problem was scoped to the single rule as opposed to something like, "duplicate area names detected in rules: first rule defining area and second rule defining area", which emphasizes the fact that it's a conflict between two rules. Adding to my confusion was that in this particular case, the two rules would never conflict because we either assign one css class or the other, never both. But I get that there is no way for autoprefixer to know that.

[Dan503]

@jdalegonzalez actually we've figured out how to safely support duplicate area names now!

Take a look at this github issue, we are working on implementing it right now :)
#1091