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

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.

[Dan503]

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

[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?