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

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; }.