Merge pull request #166 from calinoracation/callie--flex-shorthand-ex…

…pansion

Expand shorthand flex syntax for flexbox for IE

modules/__tests__/createPrefixer-test.js

@@ -350,5 +350,73 @@ describe('Static Prefixer', () => {
       expect(prefix(input)).toEqual(output)
       expect(prefix(input)).toEqual(output)
     })
+
+    describe('flexboxIE shorthand expansions', () => {
+      it('should expand basic values', () => {
+        const input = { flex: 'auto' }
+        const output = {
+          flex: 'auto',
+          MozFlex: 'auto',
+          msFlex: '1 1 auto',
+          WebkitFlex: 'auto',
+        }
+        expect(prefix(input)).toEqual(output)
+      })
+
+      it('should expand singular flex-grow', () => {
+        const input = { flex: '1.1' }
+        const output = {
+          flex: '1.1',
+          MozFlex: '1.1',
+          msFlex: '1.1 1 0%',
+          WebkitFlex: '1.1',
+        }
+        expect(prefix(input)).toEqual(output)
+      })
+
+      it('should expand single united values', () => {
+        const input = { flex: '1px' }
+        const output = {
+          flex: '1px',
+          MozFlex: '1px',
+          msFlex: '1 1 1px',
+          WebkitFlex: '1px',
+        }
+        expect(prefix(input)).toEqual(output)
+      })
+
+      it('should expand flex-grow + flex-shrink', () => {
+        const input = { flex: '1 3' }
+        const output = {
+          flex: '1 3',
+          MozFlex: '1 3',
+          msFlex: '1 3 0%',
+          WebkitFlex: '1 3',
+        }
+        expect(prefix(input)).toEqual(output)
+      })
+
+      it('should pass through 3 values', () => {
+        const input = { flex: '2 2 10%' }
+        const output = {
+          flex: '2 2 10%',
+          MozFlex: '2 2 10%',
+          msFlex: '2 2 10%',
+          WebkitFlex: '2 2 10%',
+        }
+        expect(prefix(input)).toEqual(output)
+      })
+
+      it('should expand flex-grow + flex-basis', () => {
+        const input = { flex: '0 30px' }
+        const output = {
+          flex: '0 30px',
+          MozFlex: '0 30px',
+          msFlex: '0 1 30px',
+          WebkitFlex: '0 30px',
+        }
+        expect(prefix(input)).toEqual(output)
+      })
+    })
   })
 })

modules/plugins/flexboxIE.js

@@ -15,13 +15,59 @@ const alternativeProps = {
   flexShrink: 'msFlexNegative',
   flexBasis: 'msFlexPreferredSize',
 }
+// Full expanded syntax is flex-grow | flex-shrink | flex-basis.
+const flexShorthandMappings = {
+  auto: '1 1 auto',
+  inherit: 'inherit',
+  initial: '0 1 auto',
+  none: '0 0 auto',
+  unset: 'unset',
+}
+const isUnitlessNumber = /^\d+(\.\d+)?$/
 
 export default function flexboxIE(
   property: string,
   value: any,
   style: Object
 ): void {
-  if (alternativeProps.hasOwnProperty(property)) {
+  if (Object.prototype.hasOwnProperty.call(alternativeProps, property)) {
     style[alternativeProps[property]] = alternativeValues[value] || value
   }
+  if (property === 'flex') {
+    // For certain values we can do straight mappings based on the spec
+    // for the expansions.
+    if (Object.prototype.hasOwnProperty.call(flexShorthandMappings, value)) {
+      style.msFlex = flexShorthandMappings[value]
+      return
+    }
+    // Here we have no direct mapping, so we favor looking for a
+    // unitless positive number as that will be the most common use-case.
+    if (isUnitlessNumber.test(value)) {
+      style.msFlex = `${value} 1 0%`
+      return
+    }
+
+    // The next thing we can look for is if there are multiple values.
+    const flexValues = value.split(/\s/)
+    // If we only have a single value that wasn't a positive unitless
+    // or a pre-mapped value, then we can assume it is a unit value.
+    switch (flexValues.length) {
+      case 1:
+        style.msFlex = `1 1 ${value}`
+        return
+      case 2:
+        // If we have 2 units, then we expect that the first will
+        // always be a unitless number and represents flex-grow.
+        // The second unit will represent flex-shrink for a unitless
+        // value, or flex-basis otherwise.
+        if (isUnitlessNumber.test(flexValues[1])) {
+          style.msFlex = `${flexValues[0]} ${flexValues[1]} 0%`
+        } else {
+          style.msFlex = `${flexValues[0]} 1 ${flexValues[1]}`
+        }
+        return
+      default:
+        style.msFlex = value
+    }
+  }
 }