[css-grid] Fix/row column span inheritance bug

lib/hacks/grid-utils.js

@@ -394,6 +394,21 @@ function parseGridTemplatesData (css) {
         return uniq(acc)
       }, [])
 
+      // update grid-row/column-span values for areas with duplicate
+      // area names. @see #1084 and #1146
+      rules.forEach(r => {
+        areaNames.forEach(name => {
+          let area = r.areas[name]
+          if (area && area.row.span !== areas[name].row.span) {
+            areas[name].row.updateSpan = true
+          }
+
+          if (area && area.column.span !== areas[name].column.span) {
+            areas[name].column.updateSpan = true
+          }
+        })
+      })
+
       parsed[index].allAreas = uniq([...allAreas, ...areaNames])
       parsed[index].rules.push({
         hasDuplicates: !hasNoDuplicates,
@@ -520,7 +535,7 @@ function insertAreas (css, isDisabled) {
         let cloned = gridAreaRule.clone()
         cloned.removeAll()
 
-        getMSDecls(area, false, false).reverse()
+        getMSDecls(area, area.row.updateSpan, area.column.updateSpan).reverse()
           .forEach(i => cloned.prepend(
             Object.assign(i, {
               raws: {
@@ -546,7 +561,7 @@ function insertAreas (css, isDisabled) {
         // grid-template has duplicates and not inside media rule
         // see the bottom of grid-template-areas test case for example
         gridAreaRule.walkDecls(/-ms-grid-(row|column)/, d => d.remove())
-        getMSDecls(area, false, false).reverse()
+        getMSDecls(area, area.row.updateSpan, area.column.updateSpan).reverse()
           .forEach(i => gridAreaRule.prepend(
             Object.assign(i, {
               raws: {
@@ -562,24 +577,7 @@ function insertAreas (css, isDisabled) {
         let cloned = gridAreaRule.clone()
         cloned.removeAll()
 
-        // check if we need to add -ms-grid-row/column-span values
-        // by comparing areas for rules with the same selectors
-        // @see #1084
-        let [addRowSpan, addColumnSpan] = data.rules.reduce((acc, r) => {
-          if (!r.areas[value]) {
-            return acc
-          }
-          let isEqual = selectorsEqual(r, rule)
-          if (isEqual && r.areas[value].row.span !== area.row.span) {
-            acc[0] = true
-          }
-          if (isEqual && r.areas[value].column.span !== area.column.span) {
-            acc[1] = true
-          }
-          return acc
-        }, [false, false])
-
-        getMSDecls(area, addRowSpan, addColumnSpan).reverse()
+        getMSDecls(area, area.row.updateSpan, area.column.updateSpan).reverse()
           .forEach(i => cloned.prepend(
             Object.assign(i, {
               raws: {

test/autoprefixer.test.js

@@ -629,22 +629,22 @@ describe('hacks', () => {
       .map(i => i.toString())
       .filter(str => str.includes('grid-template')))
       .toEqual([
-        'autoprefixer: <css input>:143:3: Autoprefixer cannot find ' +
+        'autoprefixer: <css input>:144:3: Autoprefixer cannot find ' +
         'a grid-template containing the duplicate grid-area ' +
         '"child" with full selector matching: .uncle',
-        'autoprefixer: <css input>:148:3: Autoprefixer cannot find ' +
+        'autoprefixer: <css input>:149:3: Autoprefixer cannot find ' +
         'a grid-template containing the duplicate grid-area ' +
         '"child" with full selector matching: .uncle',
-        'autoprefixer: <css input>:153:3: Autoprefixer cannot find ' +
+        'autoprefixer: <css input>:154:3: Autoprefixer cannot find ' +
         'a grid-template containing the duplicate grid-area ' +
         '"child" with full selector matching: .grand-parent .uncle-second',
-        'autoprefixer: <css input>:158:3: Autoprefixer cannot find ' +
+        'autoprefixer: <css input>:159:3: Autoprefixer cannot find ' +
         'a grid-template containing the duplicate grid-area ' +
         '"child" with full selector matching: .grand-parent .uncle-second',
-        'autoprefixer: <css input>:163:3: Autoprefixer cannot find ' +
+        'autoprefixer: <css input>:164:3: Autoprefixer cannot find ' +
         'a grid-template containing the duplicate grid-area ' +
         '"child" with full selector matching: .grand-parent .father.uncle',
-        'autoprefixer: <css input>:168:3: Autoprefixer cannot find ' +
+        'autoprefixer: <css input>:169:3: Autoprefixer cannot find ' +
         'a grid-template containing the duplicate grid-area ' +
         '"child" with full selector matching: .grand-parent.uncle .father'
       ])

test/cases/grid-template-areas.css

@@ -35,7 +35,8 @@
 .grid {
   display: grid;
   grid-template-areas:
-    "a-conflict b-conflict";
+    "a-conflict a-conflict"
+    "b-conflict b-conflict";
 }
 
 .grid.conflict {

test/cases/grid-template-areas.out.css

@@ -58,7 +58,8 @@
   display: -ms-grid;
   display: grid;
   grid-template-areas:
-    "a-conflict b-conflict";
+    "a-conflict a-conflict"
+    "b-conflict b-conflict";
 }
 
 .grid.conflict {
@@ -72,23 +73,27 @@
 .a {
   -ms-grid-row: 1;
   -ms-grid-column: 1;
+  -ms-grid-column-span: 2;
   grid-area: a-conflict;
 }
 
 .grid.conflict > .a {
   -ms-grid-row: 1;
   -ms-grid-column: 1;
+  -ms-grid-column-span: 1;
 }
 
 .b {
-  -ms-grid-row: 1;
-  -ms-grid-column: 2;
+  -ms-grid-row: 2;
+  -ms-grid-column: 1;
+  -ms-grid-column-span: 2;
   grid-area: b-conflict;
 }
 
 .grid.conflict > .b {
   -ms-grid-row: 2;
   -ms-grid-column: 1;
+  -ms-grid-column-span: 1;
 }
 
 /****************\

test/cases/grid-template.out.css

@@ -433,7 +433,9 @@
   }
   .g-conflict-2 > .k-1 {
     -ms-grid-row: 1;
+    -ms-grid-row-span: 1;
     -ms-grid-column: 1;
+    -ms-grid-column-span: 1;
   }
   .k-2 {
     -ms-grid-row: 1;
@@ -443,6 +445,7 @@
   .g-conflict-2 > .k-2 {
     -ms-grid-row: 1;
     -ms-grid-column: 3;
+    -ms-grid-column-span: 1;
   }
 }