From aaecf3bd0370c56a8263422606dda8ec9d204004 Mon Sep 17 00:00:00 2001
From: Evgeny Petukhov <petukhov.yevgeny@gmail.com>
Date: Sat, 10 Feb 2018 01:10:58 +0300
Subject: [PATCH] [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
---
 lib/hacks/grid-template-areas.js       | 13 ++++++++-----
 test/cases/grid-template-areas.css     | 11 ++++++++++-
 test/cases/grid-template-areas.out.css | 15 ++++++++++++++-
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/lib/hacks/grid-template-areas.js b/lib/hacks/grid-template-areas.js
index 2c27d76a9..0c84f4624 100644
--- a/lib/hacks/grid-template-areas.js
+++ b/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(', '));
         }
diff --git a/test/cases/grid-template-areas.css b/test/cases/grid-template-areas.css
index 41b96b3f0..fbf2318f7 100644
--- a/test/cases/grid-template-areas.css
+++ b/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;
+    }
 }
diff --git a/test/cases/grid-template-areas.out.css b/test/cases/grid-template-areas.out.css
index 68e50ecfc..348c6cec2 100644
--- a/test/cases/grid-template-areas.out.css
+++ b/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;
+    }
 }