[grid-template-areas] Repetitive grid-area declarations (#983)

* [grid-template-areas] Add test for repetitive grid-area declarations

* [grid-template-areas] Fix prefixing of repetitive grid-area declarations

Author: yepninja

lib/hacks/grid-template-areas.js

@@ -58,16 +58,20 @@ class GridTemplateAreas extends Declaration {
         if (prefix !== '-ms-') return super.insert(decl, prefix, prefixes);
 
         const areas = parseGridAreas(decl.value);
+        let missed = Object.keys(areas);
+
         this.getRoot(decl.parent).walkDecls('grid-area', gridArea => {
             const value = gridArea.value;
             const area = areas[value];
-            delete areas[value];
 
-            if (gridArea.parent.some(i => i.prop === '-ms-grid-row')) {
-                return undefined;
-            }
+            missed = missed.filter(e => e !== value);
 
             if (area) {
+                gridArea.parent
+                    .walkDecls(/-ms-grid-(row|column)/, (d) => {
+                        d.remove();
+                    });
+
                 gridArea.cloneBefore({
                     prop: '-ms-grid-row',
                     value: String(area.row.start)
@@ -92,7 +96,6 @@ class GridTemplateAreas extends Declaration {
             return undefined;
         });
 
-        const missed = Object.keys(areas);
         if (missed.length > 0) {
             decl.warn(result, 'Can not find grid areas: ' + missed.join(', '));
         }

test/cases/grid-template-areas.css

@@ -2,7 +2,8 @@
     grid-template-areas:
         "head head"
         "nav  main"
-        "nav  foot";
+        "nav  foot"
+        "another";
 }
 
 .b {
@@ -21,6 +22,10 @@
     grid-area: foot;
 }
 
+.f {
+    grid-area: foot;
+}
+
 @media (max-width: 1000px) {
     .a {
         grid-template-areas: "head main";
@@ -33,4 +38,8 @@
     .c {
         grid-area: main;
     }
+
+    .d {
+        grid-area: main;
+    }
 }

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

@@ -2,7 +2,8 @@
     grid-template-areas:
         "head head"
         "nav  main"
-        "nav  foot";
+        "nav  foot"
+        "another";
 }
 
 .b {
@@ -31,6 +32,12 @@
     grid-area: foot;
 }
 
+.f {
+    -ms-grid-row: 3;
+    -ms-grid-column: 2;
+    grid-area: foot;
+}
+
 @media (max-width: 1000px) {
     .a {
         grid-template-areas: "head main";
@@ -47,4 +54,10 @@
         -ms-grid-column: 2;
         grid-area: main;
     }
+
+    .d {
+        -ms-grid-row: 1;
+        -ms-grid-column: 2;
+        grid-area: main;
+    }
 }