Repository: postcss/autoprefixer
Pull request #1052 (2018-05-26 12:09:27)

Fix grid template parsing in case of auto row sizes
#1049 I added some additional checks so that row size would be defined as 'auto' if not specified.

yepninja: @y-gagar1n This case is about `grid-gap`, so it's better to put tests into `grid-gap.css`.

Also, you can use simpler logic. After `grid-template` parsed you can check rows. If there are no rows, you can add `auto` values according to areas size.
yepninja: Now I understand your test cases. So we need at least two tests in different files (without and with gap).
yepninja: Maybe it is enough to compare the length of areas and rows. And if the length of rows is less then the length of areas it needed to push auto to rows array.
ai: @yepninja we are ready to merge?
y-gagar1n: @ai @yepninja sorry, I'm not finished yet. Commit placing tests in different files will be ready a bit later.
y-gagar1n: > Maybe it is enough to compare the length of areas and rows. And if the length of rows is less then the length of areas it needed to push auto to rows array.

I still don't think it's possible to handle the case with mixed sized and unsized rows that way.  Imagine we had two different cases:

```css
.a {
  grid-template:
      "a b"
      "c d" 20px;
}

.b {
  grid-template:
      "a b" 20px
      "c d" ;
}
```

Both of them would output `rows` equal to `20px` and information about which row had this size would be lost completely during the `parseTemplate` function. Appending `auto` will result in `20px auto` which is wrong in case of `.a`.

y-gagar1n: @ai @yepninja I'm finished now.
yepninja: @y-gagar1n Great PR! Thank you for contributing!
@ai Now we are ready to merge.

Patch:
diff --git a/lib/hacks/grid-utils.js b/lib/hacks/grid-utils.js
index f8c1d03..bd4ce2a 100644
--- a/lib/hacks/grid-utils.js
+++ b/lib/hacks/grid-utils.js
@@ -200,6 +200,13 @@ function testTrack(node) {
     return node.type === 'word' && /^\[.+\]$/.test(node.value);
 }
 
+function verifyRowSize(result) {
+    if (result.areas.length > result.rows.length) {
+        result.rows.push('auto');
+    }
+    return result;
+}
+
 function parseTemplate({
     decl,
     gap
@@ -213,6 +220,7 @@ function parseTemplate({
 
             // area
             if (type === 'string') {
+                result = verifyRowSize(result);
                 result.areas.push(value);
             }
 
@@ -224,6 +232,7 @@ function parseTemplate({
             // devider(/)
             if (type === 'div' && value === '/') {
                 result.key = 'columns';
+                result = verifyRowSize(result);
             }
 
             return result;


Test patch:
diff --git a/test/cases/grid-gap.css b/test/cases/grid-gap.css
index ff9f000..b1011ac 100644
--- a/test/cases/grid-gap.css
+++ b/test/cases/grid-gap.css
@@ -24,6 +24,15 @@
     grid-area: foot;
 }
 
+.f {
+    grid-gap: 10px;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-areas:
+        "head head head"
+        "nav main main"
+        "nav foot foot";
+}
+
 .a-shortcut {
     grid-gap: 1rem;
     grid-template:
@@ -48,3 +57,12 @@
 .e-shortcut {
     grid-area: foot-shortcut;
 }
+
+.f-shortcut {
+    grid-gap: 10px;
+    grid-template:
+        "head-shortcut head-shortcut head-shortcut"
+        "nav-shortcut main-shortcut main-shortcut"
+        "nav-shortcut foot-shortcut foot-shortcut"
+        / 1fr 1fr 1fr;
+}
diff --git a/test/cases/grid-gap.out.css b/test/cases/grid-gap.out.css
index 2d790e7..bd81c88 100644
--- a/test/cases/grid-gap.out.css
+++ b/test/cases/grid-gap.out.css
@@ -38,6 +38,17 @@
     grid-area: foot;
 }
 
+.f {
+    grid-gap: 10px;
+    -ms-grid-columns: 1fr 10px 1fr 10px 1fr;
+    grid-template-columns: 1fr 1fr 1fr;
+    -ms-grid-rows: auto 10px auto 10px auto;
+    grid-template-areas:
+        "head head head"
+        "nav main main"
+        "nav foot foot";
+}
+
 .a-shortcut {
     grid-gap: 1rem;
     -ms-grid-rows: 1fr 1rem minmax(100px, 1fr) 1rem 2fr;
@@ -76,3 +87,14 @@
     -ms-grid-column-span: 3;
     grid-area: foot-shortcut;
 }
+
+.f-shortcut {
+    grid-gap: 10px;
+    -ms-grid-rows: auto 10px auto 10px auto;
+    -ms-grid-columns: 1fr 10px 1fr 10px 1fr;
+    grid-template:
+        "head-shortcut head-shortcut head-shortcut"
+        "nav-shortcut main-shortcut main-shortcut"
+        "nav-shortcut foot-shortcut foot-shortcut"
+        / 1fr 1fr 1fr;
+}
diff --git a/test/cases/grid-template.css b/test/cases/grid-template.css
index 42534f4..ce32b84 100644
--- a/test/cases/grid-template.css
+++ b/test/cases/grid-template.css
@@ -26,6 +26,14 @@
     grid-template: 10px;
 }
 
+.f {
+    grid-template:
+        "head head"
+        "nav main" 20px
+        "nav foot"
+        / 1fr 1fr;
+}
+
 .head {
     grid-area: head;
 }
diff --git a/test/cases/grid-template.out.css b/test/cases/grid-template.out.css
index 3a8dcb1..cbb7d3c 100644
--- a/test/cases/grid-template.out.css
+++ b/test/cases/grid-template.out.css
@@ -34,6 +34,16 @@
     grid-template: 10px;
 }
 
+.f {
+    -ms-grid-rows: auto 20px auto;
+    -ms-grid-columns: 1fr 1fr;
+    grid-template:
+        "head head"
+        "nav main" 20px
+        "nav foot"
+        / 1fr 1fr;
+}
+
 .head {
     -ms-grid-row: 1;
     -ms-grid-column: 1;