[css-grid] Fix bug when grid-rows/columns are prefixed with wrong val…

…ues (#1149)

* [css-grid] Fix bug when grid-rows/columns are prefixed with wrong values

* [css-grid] Add test cases

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/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:
+    ". . . . . ."
+    ". . . . . .";
+}

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:
+    ". . . . . ."
+    ". . . . . .";
+}

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:
+    ". . . . . ."
+    ". . . . . .";
+}