Repository: postcss/autoprefixer
Pull request #1149 (2018-10-24 05:58:29)

[css-grid] Fix bug when grid-rows/columns are prefixed with wrong values
We discussed the bug here: #1148 

When `repeat` function were used with multiple values (e.g `repeat(1, 1fr 2fr)`) it output the wrong values.

Input: 
```css
.grid {
  grid-template-columns: 50px repeat(2, 1fr 2fr) 50px;
  grid-template-rows: repeat(1, auto 100px);
  grid-gap: 20px;
  grid-template-areas:
    ". . . . . ."
    ". . . . . .";
}
```
Before fix:
```css
.grid {
  /* gaps are place wrongly and commas should not be here */
  -ms-grid-columns: 50px 20px 1fr, ,2fr 20px 1fr, ,2fr 20px 50px;
  grid-template-columns: 50px repeat(2, 1fr 2fr) 50px;
  /* gaps are place wrongly and commas should not be here */
  -ms-grid-rows: auto, ,100px;
  grid-template-rows: repeat(1, auto 100px);
  grid-gap: 20px;
  grid-template-areas:
    ". . . . . ."
    ". . . . . .";
}

```
After fix:
```css
.grid {
  -ms-grid-columns: 50px 20px 1fr 20px 2fr 20px 1fr 20px 2fr 20px 50px;
  grid-template-columns: 50px repeat(2, 1fr 2fr) 50px;
  -ms-grid-rows: auto 20px 100px;
  grid-template-rows: repeat(1, auto 100px);
  grid-gap: 20px;
  grid-template-areas:
    ". . . . . ."
    ". . . . . .";
}
```


/cc @Dan503 

Dan503: If you remove `grid-template-areas` it ignores the grid gap (I know, we don't support `grid-gap` if areas are not defined, well not yet)

It didn't produce any warning though that `grid-gap` was being ignored. It's probably not worth adding a warning that will soon need to be removed though I guess.

Other than that, I couldn't find any issues.

@ai if you are happy for there to not be a warning, you can review and merge.

The no warning thing is a bit of a separate issue.

Patch:
diff --git a/lib/hacks/grid-utils.js b/lib/hacks/grid-utils.js
index a6fb02f..825224f 100644
--- a/lib/hacks/grid-utils.js
+++ b/lib/hacks/grid-utils.js
@@ -106,14 +106,19 @@ function transformRepeat ({ nodes }, { gap }) {
     count: []
   })
 
+  // insert gap values
   if (gap) {
+    size = size.filter(i => i.trim())
     let val = []
     for (let i = 1; i <= count; i++) {
-      if (gap && i > 1) {
-        val.push(gap)
-      }
-      val.push(size.join())
+      size.forEach((item, index) => {
+        if (index > 0 || i > 1) {
+          val.push(gap)
+        }
+        val.push(item)
+      })
     }
+
     return val.join(' ')
   }
 


Test patch:
diff --git a/test/cases/grid.css b/test/cases/grid.css
index 4f6fbaa..da1e7a1 100644
--- a/test/cases/grid.css
+++ b/test/cases/grid.css
@@ -148,3 +148,14 @@
 .place-self-b {
   place-self: start end;
 }
+
+/* must have correct -ms-grid-rows/columns values */
+.grid-correct-rows-columns {
+  display: grid;
+  grid-template-columns: 50px repeat(2, 1fr 2fr) 50px;
+  grid-template-rows: repeat(1, auto 100px);
+  grid-gap: 20px;
+  grid-template-areas:
+    ". . . . . ."
+    ". . . . . .";
+}
diff --git a/test/cases/grid.disabled.css b/test/cases/grid.disabled.css
index 93bde18..cf78178 100644
--- a/test/cases/grid.disabled.css
+++ b/test/cases/grid.disabled.css
@@ -152,3 +152,14 @@
 .place-self-b {
   place-self: start end;
 }
+
+/* must have correct -ms-grid-rows/columns values */
+.grid-correct-rows-columns {
+  display: grid;
+  grid-template-columns: 50px repeat(2, 1fr 2fr) 50px;
+  grid-template-rows: repeat(1, auto 100px);
+  grid-gap: 20px;
+  grid-template-areas:
+    ". . . . . ."
+    ". . . . . .";
+}
diff --git a/test/cases/grid.out.css b/test/cases/grid.out.css
index 9b0b9f9..418df6a 100644
--- a/test/cases/grid.out.css
+++ b/test/cases/grid.out.css
@@ -199,3 +199,17 @@
   -ms-grid-column-align: end;
   place-self: start end;
 }
+
+/* must have correct -ms-grid-rows/columns values */
+.grid-correct-rows-columns {
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: 50px 20px 1fr 20px 2fr 20px 1fr 20px 2fr 20px 50px;
+  grid-template-columns: 50px repeat(2, 1fr 2fr) 50px;
+  -ms-grid-rows: auto 20px 100px;
+  grid-template-rows: repeat(1, auto 100px);
+  grid-gap: 20px;
+  grid-template-areas:
+    ". . . . . ."
+    ". . . . . .";
+}