[css-grid] Implement autoplacement (#1148)

gulpfile.js

@@ -97,7 +97,7 @@ gulp.task('compile-playground', () => {
   let autoprefixer = require('./build')
   return gulp.src('./playground/input.css')
     .pipe(rename('output.css'))
-    .pipe(postcss([autoprefixer({ grid: true })]))
+    .pipe(postcss([autoprefixer({ grid: 'autoplace' })]))
     .pipe(gulp.dest('./playground'))
 })
 

lib/hacks/grid-rows-columns.js

@@ -1,8 +1,12 @@
 let Declaration = require('../declaration')
 let {
   prefixTrackProp,
-  prefixTrackValue
+  prefixTrackValue,
+  autoplaceGridItems,
+  getGridGap,
+  inheritGridGap
 } = require('./grid-utils')
+let Processor = require('../processor')
 
 class GridRowsColumns extends Declaration {
   static names = [
@@ -27,14 +31,77 @@ class GridRowsColumns extends Declaration {
     return prop.replace(/^grid-(rows|columns)/, 'grid-template-$1')
   }
 
-  /**
-   * Change repeating syntax for IE
-   */
-  set (decl, prefix) {
-    if (prefix === '-ms-' && decl.value.indexOf('repeat(') !== -1) {
-      decl.value = prefixTrackValue({ value: decl.value })
+  insert (decl, prefix, prefixes, result) {
+    if (prefix !== '-ms-') return super.insert(decl, prefix, prefixes)
+
+    let { parent, prop, value } = decl
+    let isRowProp = prop.includes('rows')
+    let isColumnProp = prop.includes('columns')
+
+    let hasGridTemplate = parent.some(i =>
+      i.prop === 'grid-template' || i.prop === 'grid-template-areas')
+
+    /**
+     * Not to prefix rows declaration if grid-template(-areas) is present
+     */
+    if (hasGridTemplate && isRowProp) {
+      return false
+    }
+
+    let processor = new Processor({})
+    let status = processor.gridStatus(parent, result)
+    let gap = getGridGap(decl)
+    gap = inheritGridGap(decl, gap) || gap
+
+    let gapValue = isRowProp ? gap.row : gap.column
+
+    if ((status === 'no-autoplace' || status === true) && !hasGridTemplate) {
+      gapValue = null
+    }
+
+    let prefixValue = prefixTrackValue({
+      value,
+      gap: gapValue
+    })
+
+    /**
+     * Insert prefixes
+     */
+    decl.cloneBefore({
+      prop: prefixTrackProp({ prop, prefix }),
+      value: prefixValue
+    })
+
+    let autoflow = parent.nodes.find(i => i.prop === 'grid-auto-flow')
+    let autoflowValue = 'row'
+
+    if (autoflow && !processor.disabled(autoflow, result)) {
+      autoflowValue = autoflow.value.trim()
+    }
+
+    /**
+     * Show warning if grid-template-rows decl is not found
+     */
+    let rowDecl = parent.nodes.find(i => i.prop === 'grid-template-rows')
+
+    if (!rowDecl && hasGridTemplate) {
+      return undefined
+    } else if (!rowDecl && !hasGridTemplate) {
+      decl.warn(result,
+        `Autoplacement does not work without grid-template-rows property`
+      )
+      return undefined
     }
-    return super.set(decl, prefix)
+
+    /**
+     * Autoplace grid items
+     */
+    let autoplaceEnabled = status === 'autoplace'
+    if (isColumnProp && !hasGridTemplate && autoplaceEnabled) {
+      autoplaceGridItems(decl, result, gap, autoflowValue)
+    }
+
+    return undefined
   }
 }
 

lib/hacks/grid-template-areas.js

@@ -26,52 +26,23 @@ class GridTemplateAreas extends Declaration {
     let hasRows = false
     let parent = decl.parent
     let gap = getGridGap(decl)
-    let inheritedGap = inheritGridGap(decl, gap)
+    gap = inheritGridGap(decl, gap) || gap
 
-    // remove already prefixed rows and columns
-    // without gutter to prevent doubling prefixes
-    parent.walkDecls(/-ms-grid-(rows|columns)/, i => i.remove())
+    // remove already prefixed rows
+    // to prevent doubling prefixes
+    parent.walkDecls(/-ms-grid-rows/, i => i.remove())
 
-    // add empty tracks to rows and columns
+    // add empty tracks to rows
     parent.walkDecls(/grid-template-(rows|columns)/, trackDecl => {
       if (trackDecl.prop === 'grid-template-rows') {
         hasRows = true
         let { prop, value } = trackDecl
-
-        /**
-         * we must insert inherited gap values in some cases:
-         * if we are inside media query && if we have no grid-gap value
-        */
-        if (inheritedGap) {
-          trackDecl.cloneBefore({
-            prop: prefixTrackProp({ prop, prefix }),
-            value: prefixTrackValue({ value, gap: inheritedGap.row })
-          })
-        } else {
-          trackDecl.cloneBefore({
-            prop: prefixTrackProp({ prop, prefix }),
-            value: prefixTrackValue({ value, gap: gap.row })
-          })
-        }
+        trackDecl.cloneBefore({
+          prop: prefixTrackProp({ prop, prefix }),
+          value: prefixTrackValue({ value, gap: gap.row })
+        })
       } else {
         hasColumns = true
-        let { prop, value } = trackDecl
-
-        /**
-         * we must insert inherited gap values in some cases:
-         * if we are inside media query && if we have no grid-gap value
-        */
-        if (inheritedGap) {
-          trackDecl.cloneBefore({
-            prop: prefixTrackProp({ prop, prefix }),
-            value: prefixTrackValue({ value, gap: inheritedGap.column })
-          })
-        } else {
-          trackDecl.cloneBefore({
-            prop: prefixTrackProp({ prop, prefix }),
-            value: prefixTrackValue({ value, gap: gap.column })
-          })
-        }
       }
     })
 

lib/hacks/grid-utils.js

@@ -525,6 +525,7 @@ function insertAreas (css, isDisabled) {
 
       if ((!rule.hasDuplicates || !hasDuplicateName) && !rule.params) {
         // grid-template has no duplicates and not inside media rule
+
         getMSDecls(area, false, false).reverse()
           .forEach(i => gridAreaRule.prepend(
             Object.assign(i, {
@@ -945,6 +946,108 @@ function warnGridGap ({
   }
 }
 
+/**
+ * normalize the grid-template-rows/columns values
+ * @param  {String} str grid-template-rows/columns value
+ * @return {Array} normalized array with values
+ * @example
+ * let normalized = normalizeRowColumn('1fr repeat(2, 20px 50px) 1fr')
+ * normalized // <= ['1fr', '20px', '50px', '20px', '50px', '1fr']
+ */
+function normalizeRowColumn (str) {
+  let normalized = parser(str)
+    .nodes
+    .reduce((result, node) => {
+      if (node.type === 'function' && node.value === 'repeat') {
+        let key = 'count'
+
+        let [count, value] = node.nodes.reduce((acc, n) => {
+          if (n.type === 'word' && key === 'count') {
+            acc[0] = Math.abs(parseInt(n.value))
+            return acc
+          }
+          if (n.type === 'div' && n.value === ',') {
+            key = 'value'
+            return acc
+          }
+          if (key === 'value') {
+            acc[1] += parser.stringify(n)
+          }
+          return acc
+        }, [0, ''])
+
+        if (count) {
+          for (let i = 0; i < count; i++) {
+            result.push(value)
+          }
+        }
+
+        return result
+      }
+      if (node.type === 'space') {
+        return result
+      }
+      return result.concat(parser.stringify(node))
+    }, [])
+
+  return normalized
+}
+
+/**
+ * Autoplace grid items
+ * @param {Declaration} decl
+ * @param {Result} result
+ * @param {Object} gap gap values
+ * @param {String} autoflowValue grid-auto-flow value
+ * @return {void}
+ * @see https://github.com/postcss/autoprefixer/issues/1148
+ */
+function autoplaceGridItems (decl, result, gap, autoflowValue = 'row') {
+  let { parent } = decl
+
+  let rowDecl = parent.nodes.find(i => i.prop === 'grid-template-rows')
+  let rows = normalizeRowColumn(rowDecl.value)
+  let columns = normalizeRowColumn(decl.value)
+
+  // Build array of area names with dummy values. If we have 3 columns and
+  // 2 rows, filledRows will be equal to ['1 2 3', '4 5 6']
+  let filledRows = rows.map((_, rowIndex) => {
+    return Array.from({ length: columns.length }, (v, k) =>
+      k + (rowIndex * columns.length) + 1).join(' ')
+  })
+
+  let areas = parseGridAreas({ rows: filledRows, gap })
+  let keys = Object.keys(areas)
+  let items = keys.map(i => areas[i])
+
+  // Change the order of cells if grid-auto-flow value is 'column'
+  if (autoflowValue.includes('column')) {
+    items = items.sort((a, b) => a.column.start - b.column.start)
+  }
+
+  // Insert new rules
+  items.reverse().forEach((item, index) => {
+    let { column, row } = item
+    let nodeSelector = parent.selectors.map(sel =>
+      sel + ` > *:nth-child(${ keys.length - index })`).join(', ')
+
+    // create new rule
+    let node = parent.clone().removeAll()
+
+    // change rule selector
+    node.selector = nodeSelector
+
+    // insert prefixed row/column values
+    node.append({ prop: '-ms-grid-row', value: row.start })
+    node.append({ prop: '-ms-grid-column', value: column.start })
+
+    // insert rule
+    parent.after(node)
+  })
+
+  return undefined
+}
+
 module.exports = {
   parse,
   translate,
@@ -959,5 +1062,6 @@ module.exports = {
   warnGridGap,
   warnTemplateSelectorNotFound,
   warnIfGridRowColumnExists,
-  inheritGridGap
+  inheritGridGap,
+  autoplaceGridItems
 }