Merge pull request #97 from styled-components/jacobp100-patch-2

WIP: Set flex-basis to `auto`

Author: jacobp100

src/__tests__/flex.js

@@ -73,27 +73,31 @@ it('transforms flex shorthand with flex-basis set to auto', () => {
   expect(transformCss([['flex', '0 1 auto']])).toEqual({
     flexGrow: 0,
     flexShrink: 1,
+    flexBasis: 'auto',
   })
 })
 
 it('transforms flex shorthand with flex-basis set to auto appearing first', () => {
   expect(transformCss([['flex', 'auto 0 1']])).toEqual({
     flexGrow: 0,
     flexShrink: 1,
+    flexBasis: 'auto',
   })
 })
 
 it('transforms flex auto keyword', () => {
   expect(transformCss([['flex', 'auto']])).toEqual({
     flexGrow: 1,
     flexShrink: 1,
+    flexBasis: 'auto',
   })
 })
 
 it('transforms flex none keyword', () => {
   expect(transformCss([['flex', 'none']])).toEqual({
     flexGrow: 0,
     flexShrink: 0,
+    flexBasis: 'auto',
   })
 })
 

src/transforms/flex.js

@@ -6,21 +6,19 @@ const defaultFlexGrow = 1
 const defaultFlexShrink = 1
 const defaultFlexBasis = 0
 
-const FLEX_BASIS_AUTO = {} // Used for reference equality
-
 export default tokenStream => {
   let flexGrow
   let flexShrink
   let flexBasis
 
   if (tokenStream.matches(NONE)) {
     tokenStream.expectEmpty()
-    return { $merge: { flexGrow: 0, flexShrink: 0 } }
+    return { $merge: { flexGrow: 0, flexShrink: 0, flexBasis: 'auto' } }
   }
 
   tokenStream.saveRewindPoint()
   if (tokenStream.matches(AUTO) && !tokenStream.hasTokens()) {
-    return { $merge: { flexGrow: 1, flexShrink: 1 } }
+    return { $merge: { flexGrow: 1, flexShrink: 1, flexBasis: 'auto' } }
   }
   tokenStream.rewind()
 
@@ -40,7 +38,7 @@ export default tokenStream => {
     } else if (flexBasis === undefined && tokenStream.matches(LENGTH)) {
       flexBasis = tokenStream.lastValue
     } else if (flexBasis === undefined && tokenStream.matches(AUTO)) {
-      flexBasis = FLEX_BASIS_AUTO
+      flexBasis = 'auto'
     } else {
       tokenStream.throw()
     }
@@ -54,7 +52,5 @@ export default tokenStream => {
   if (flexShrink === undefined) flexShrink = defaultFlexShrink
   if (flexBasis === undefined) flexBasis = defaultFlexBasis
 
-  return flexBasis !== FLEX_BASIS_AUTO
-    ? { $merge: { flexGrow, flexShrink, flexBasis } }
-    : { $merge: { flexGrow, flexShrink } }
+  return { $merge: { flexGrow, flexShrink, flexBasis } }
 }