lib/hacks/grid-utils.js
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
}
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
}
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 + ` ${ 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 }
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
Autoplace grid items