cssobj-plugin-flexbox/src/cssobj-plugin-flexbox.js

cssobj plugin for generate right flexbox CSS, auto vendor prefixer for flexbox in browser, input one line, give you right flexbox!

// cssobj plugin flexbox

function display(val) {
  return val == 'flex'
    ? [
      '-webkit-box',
      '-webkit-flex',
      '-moz-box',
      '-ms-flexbox',
      'flex'
    ]
    : val == 'inline-flex'
    ? [
      '-webkit-inline-box',
      '-webkit-inline-flex',
      '-moz-inline-box',
      '-ms-inline-flexbox',
      'inline-flex'
    ]
    : val
}

function flexDirection(val) {

  let getVal = value => {
    let valArr = value.split('-')
    let orient = valArr[0]=='row' ? 'horizontal' : 'vertical'
    let direction = valArr[1]=='reverse' ? 'reverse' : 'normal'
    return {
      '-webkit-box-orient': orient,
      '-moz-box-orient': orient,
      '-webkit-box-direction': direction,
      '-moz-box-direction': direction,
      flexDirection: value
    }
  }

  return getVal(val+'')
}

function justifyContent(val) {
  let valueDict = {
    'flex-start': {
      '-ms-flex-pack': 'start',
      '-webkit-box-pack': 'start',
      '-moz-box-pack': 'start',
      justifyContent: 'flex-start'
    },
    'flex-end':{
      '-ms-flex-pack': 'end',
      '-webkit-box-pack': 'end',
      '-moz-box-pack': 'end',
      justifyContent: 'flex-end'
    },
    'center':{
      '-ms-flex-pack': 'center',
      '-webkit-box-pack': 'center',
      '-moz-box-pack': 'center',
      justifyContent: 'center'
    },
    'space-between': {
      '-ms-flex-pack': 'justify',
      '-webkit-box-pack': 'justify',
      '-moz-box-pack': 'justify',
      justifyContent: 'space-between'
    },
    'space-around': {
      '-ms-flex-pack': 'distribute',
      justifyContent: 'space-around'
    }
  }

  return valueDict[val] || {
    '-ms-flex-pack': val,
    '-webkit-box-pack': val,
    '-moz-box-pack': val,
    justifyContent: val
  }
}

function alignItems(val) {
  let valueDict = {
    'flex-start': {
      '-ms-flex-align': 'start',
      '-webkit-box-align': 'start',
      '-moz-box-align': 'start',
      alignItems: 'flex-start'
    },
    'flex-end': {
      '-ms-flex-align': 'end',
      '-webkit-box-align': 'end',
      '-moz-box-align': 'end',
      alignItems: 'flex-end'
    }
  }

  return valueDict[val] || {
    '-ms-flex-align': val,
    '-webkit-box-align': val,
    '-moz-box-align': val,
    alignItems: val
  }
}

function order(val) {
  // ensure it's number type
  let oldForm = isNaN(val) ? val : val + 1
  return {
    '-ms-flex-order': val,
    '-webkit-box-ordinal-group': oldForm,
    '-moz-box-ordinal-group': oldForm,
    order: val
  }
}

function flexGrow(val) {
  return {
    '-ms-flex-positive': val,
    '-webkit-box-flex': val,
    '-moz-box-flex': val,
    flexGrow: val
  }
}

function flexShrink(val) {
  return {
    '-ms-flex-negative': val,
    flexShrink: val
  }
}

function flexBasis(val) {
  return {
    '-ms-flex-preferred-size': val,
    flexBasis: val
  }
}

function flex(val) {
  // ensure it's numeric type for 'none'
  let first = (val+'').split(' ').shift()
  let oldForm = first == 'auto'
      ? 1
      : first == 'none'
      ? 0
      : first
  return {
    '-webkit-box-flex': oldForm,
    '-moz-box-flex': oldForm,
    '-ms-flex': val,
    flex: val
  }
}

function alignSelf(val) {

  let valueDict = {
    'flex-start': {
      '-ms-flex-item-align': 'start',
      alignSelf: 'flex-start'
    },
    'flex-end': {
      '-ms-flex-item-align': 'end',
      alignSelf: 'flex-end'
    },
    'baseline': {
      '-ms-flex-item-align': 'baseline',
      alignSelf: 'baseline'
    }
  }

  return valueDict[val] || {
    '-ms-flex-item-align': val,
    '-ms-grid-row-align': val,
    alignSelf: val
  }
}


let presetFlexBox = {
  display,
  flexDirection,
  justifyContent,
  alignItems,
  order,
  flexGrow,
  flexShrink,
  flexBasis,
  flex,
  alignSelf
}


export default function cssobj_plugin_flexbox (option={}) {

  let userDefined = option.define

  return {
    value: (value, key, node, result, propKey) => {

      // prevent recursive loop with display: flex
      if(propKey!==void 0) return value

      var valueFunction = userDefined && userDefined[key] || presetFlexBox[key]

      return valueFunction
        ? valueFunction(value)
        : value
    }
  }
}