[css-grid] move media query cell placements to come after cell styles (…

…#1057)
postcss · Jun 7, 2018 · 34bad61 · 34bad61
1 parent 9a2ab80
commit 34bad61
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 69 deletions.
diff --git a/lib/hacks/grid-utils.js b/lib/hacks/grid-utils.js
@@ -296,6 +296,9 @@ function insertAreas(areas, decl, result) {
     let missed = Object.keys(areas);
 
     const parentMedia = getParentMedia(decl.parent);
+    const rules = [];
+    const areasLength = Object.keys(areas).length;
+    let areasCount = 0;
 
     decl.root().walkDecls('grid-area', gridArea => {
 
@@ -306,13 +309,6 @@ function insertAreas(areas, decl, result) {
 
         if (area && parentMedia) {
 
-            // skip if grid-template-areas already prefixed in media
-            if (parentMedia.some(
-                i => i.selector === gridArea.parent.selector
-            )) {
-                return undefined;
-            }
-
             // create new rule
             const rule = decl.parent.clone({
                 selector: gridArea.parent.selector
@@ -329,8 +325,23 @@ function insertAreas(areas, decl, result) {
                     })
                 ));
 
-            // insert new rule with prefixed decl to existing media
-            parentMedia.append(rule);
+            rules.push(rule);
+            areasCount++;
+            if (areasCount === areasLength) {
+                const next = gridArea.parent.next();
+
+                if (
+                    next.type === 'atrule' &&
+                    next.name === 'media' &&
+                    next.params === parentMedia.params &&
+                    next.first.type === 'rule' &&
+                    next.first.selector && parentMedia.first.selector &&
+                    /^-ms-/.test(next.first.first.prop)
+                ) return undefined;
+
+                const areaMedia = parentMedia.clone().removeAll().append(rules);
+                gridArea.parent.after(areaMedia);
+            }
 
             return undefined;
         }

diff --git a/test/cases/grid-template-areas.css b/test/cases/grid-template-areas.css
@@ -6,6 +6,12 @@
         "another";
 }
 
+@media (max-width: 1000px) {
+    .a {
+        grid-template-areas: "head main";
+    }
+}
+
 .b {
     grid-area: head;
 }
@@ -21,9 +27,3 @@
 .e {
     grid-area: foot;
 }
-
-@media (max-width: 1000px) {
-    .a {
-        grid-template-areas: "head main";
-    }
-}
diff --git a/test/cases/grid-template-areas.out.css b/test/cases/grid-template-areas.out.css
@@ -6,6 +6,12 @@
         "another";
 }
 
+@media (max-width: 1000px) {
+    .a {
+        grid-template-areas: "head main";
+    }
+}
+
 .b {
     -ms-grid-row: 1;
     -ms-grid-column: 1;
@@ -19,6 +25,17 @@
     grid-area: main;
 }
 
+@media (max-width: 1000px) {
+    .b {
+        -ms-grid-row: 1;
+        -ms-grid-column: 1;
+    }
+    .c {
+        -ms-grid-row: 1;
+        -ms-grid-column: 2;
+    }
+}
+
 .d {
     -ms-grid-row: 2;
     -ms-grid-row-span: 2;
@@ -31,17 +48,3 @@
     -ms-grid-column: 2;
     grid-area: foot;
 }
-
-@media (max-width: 1000px) {
-    .a {
-        grid-template-areas: "head main";
-    }
-    .b {
-        -ms-grid-row: 1;
-        -ms-grid-column: 1;
-    }
-    .c {
-        -ms-grid-row: 1;
-        -ms-grid-column: 2;
-    }
-}
diff --git a/test/cases/grid-template.css b/test/cases/grid-template.css
@@ -10,6 +10,17 @@
         / 120px repeat(4, 250px 10px);
 }
 
+@media (min-width: 1000px) {
+    .b {
+        grid-template:
+            [header-left] "head" 30px [header-right]
+            [nav-left]    "nav"  auto  [nav-right]
+            [main-left]   "main" 1fr  [main-right]
+            [footer-left] "foot" 30px [footer-right]
+            / 1fr;
+    }
+}
+
 .c {
     grid-template:
         "hd hd hd hd hd hd hd hd hd" minmax(100px, auto)
@@ -65,14 +76,3 @@
 .ft {
     grid-area: ft;
 }
-
-@media (min-width: 1000px) {
-    .b {
-        grid-template:
-            [header-left] "head" 30px [header-right]
-            [nav-left]    "nav"  auto  [nav-right]
-            [main-left]   "main" 1fr  [main-right]
-            [footer-left] "foot" 30px [footer-right]
-            / 1fr;
-    }
-}
diff --git a/test/cases/grid-template.out.css b/test/cases/grid-template.out.css
@@ -14,6 +14,19 @@
         / 120px repeat(4, 250px 10px);
 }
 
+@media (min-width: 1000px) {
+    .b {
+        -ms-grid-rows: 30px auto 1fr 30px;
+        -ms-grid-columns: 1fr;
+        grid-template:
+            [header-left] "head" 30px [header-right]
+            [nav-left]    "nav"  auto  [nav-right]
+            [main-left]   "main" 1fr  [main-right]
+            [footer-left] "foot" 30px [footer-right]
+            / 1fr;
+    }
+}
+
 .c {
     -ms-grid-rows: minmax(100px, auto) minmax(100px, auto) minmax(100px, auto);
     -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
@@ -70,6 +83,25 @@
     grid-area: foot;
 }
 
+@media (min-width: 1000px) {
+    .head {
+        -ms-grid-row: 1;
+        -ms-grid-column: 1;
+    }
+    .nav {
+        -ms-grid-row: 2;
+        -ms-grid-column: 1;
+    }
+    .main {
+        -ms-grid-row: 3;
+        -ms-grid-column: 1;
+    }
+    .foot {
+        -ms-grid-row: 4;
+        -ms-grid-column: 1;
+    }
+}
+
 .hd {
     -ms-grid-row: 1;
     -ms-grid-column: 1;
@@ -97,32 +129,3 @@
     -ms-grid-column-span: 9;
     grid-area: ft;
 }
-
-@media (min-width: 1000px) {
-    .b {
-        -ms-grid-rows: 30px auto 1fr 30px;
-        -ms-grid-columns: 1fr;
-        grid-template:
-            [header-left] "head" 30px [header-right]
-            [nav-left]    "nav"  auto  [nav-right]
-            [main-left]   "main" 1fr  [main-right]
-            [footer-left] "foot" 30px [footer-right]
-            / 1fr;
-    }
-    .head {
-        -ms-grid-row: 1;
-        -ms-grid-column: 1;
-    }
-    .nav {
-        -ms-grid-row: 2;
-        -ms-grid-column: 1;
-    }
-    .main {
-        -ms-grid-row: 3;
-        -ms-grid-column: 1;
-    }
-    .foot {
-        -ms-grid-row: 4;
-        -ms-grid-column: 1;
-    }
-}