Merge pull request #44 from styled-components/flex-shorthand-basis-auto

Update flex.js

Author: jacobp100

src/TokenStream.js

@@ -1,3 +1,4 @@
+const SYMBOL_BASE_MATCH = 'SYMBOL_BASE_MATCH';
 const SYMBOL_MATCH = 'SYMBOL_MATCH';
 
 module.exports = class TokenStream {
@@ -16,30 +17,37 @@ module.exports = class TokenStream {
     return this.nodes.length > 0;
   }
 
-  lookahead() {
+  lookAhead() {
     return new TokenStream(this.nodes.slice(1), this.parent);
   }
 
-  [SYMBOL_MATCH](...tokenDescriptors) {
+  [SYMBOL_BASE_MATCH](...tokenDescriptors) {
     const node = this.node;
 
     if (!node) return null;
 
     for (let i = 0; i < tokenDescriptors.length; i += 1) {
       const tokenDescriptor = tokenDescriptors[i];
       const value = tokenDescriptor(node);
-
-      if (value !== null) {
-        this.nodes = this.nodes.slice(1);
-        this.lastFunction = null;
-        this.lastValue = value;
-        return value;
-      }
+      if (value !== null) return value;
     }
 
     return null;
   }
 
+  [SYMBOL_MATCH](...tokenDescriptors) {
+    const value = this[SYMBOL_BASE_MATCH](...tokenDescriptors);
+    if (value === null) return null;
+    this.nodes = this.nodes.slice(1);
+    this.lastFunction = null;
+    this.lastValue = value;
+    return value;
+  }
+
+  test(...tokenDescriptors) {
+    return this[SYMBOL_BASE_MATCH](...tokenDescriptors) !== null;
+  }
+
   matches(...tokenDescriptors) {
     return this[SYMBOL_MATCH](...tokenDescriptors) !== null;
   }

src/index.test.js

@@ -261,6 +261,22 @@ it('transforms flex shorthand with flex-grow/shrink taking priority over basis',
   ['flex', '0 1 0'],
 ], { flexGrow: 0, flexShrink: 1, flexBasis: 0 }));
 
+it('transforms flex shorthand with flex-basis set to auto', () => runTest([
+  ['flex', '0 1 auto'],
+], { flexGrow: 0, flexShrink: 1 }));
+
+it('transforms flex shorthand with flex-basis set to auto appearing first', () => runTest([
+  ['flex', 'auto 0 1'],
+], { flexGrow: 0, flexShrink: 1 }));
+
+it('transforms flex auto keyword', () => runTest([
+  ['flex', 'auto'],
+], { flexGrow: 1, flexShrink: 1 }));
+
+it('transforms flex none keyword', () => runTest([
+  ['flex', 'none'],
+], { flexGrow: 0, flexShrink: 0 }));
+
 it('transforms flexFlow shorthand with two values', () => runTest([
   ['flex-flow', 'column wrap'],
 ], { flexDirection: 'column', flexWrap: 'wrap' }));

src/transforms/flex.js

@@ -6,6 +6,8 @@ const defaultFlexGrow = 1;
 const defaultFlexShrink = 1;
 const defaultFlexBasis = 0;
 
+const FLEX_BASIS_AUTO = {}; // Used for reference equality
+
 module.exports = (tokenStream) => {
   let flexGrow;
   let flexShrink;
@@ -14,8 +16,7 @@ module.exports = (tokenStream) => {
   if (tokenStream.matches(NONE)) {
     tokenStream.expectEmpty();
     return { $merge: { flexGrow: 0, flexShrink: 0 } };
-  } else if (tokenStream.matches(AUTO)) {
-    tokenStream.expectEmpty();
+  } else if (tokenStream.test(AUTO) && !tokenStream.lookAhead().hasTokens()) {
     return { $merge: { flexGrow: 1, flexShrink: 1 } };
   }
 
@@ -26,12 +27,14 @@ module.exports = (tokenStream) => {
     if (flexGrow === undefined && tokenStream.matches(NUMBER)) {
       flexGrow = tokenStream.lastValue;
 
-      if (tokenStream.lookahead().matches(NUMBER)) {
+      if (tokenStream.lookAhead().matches(NUMBER)) {
         tokenStream.expect(SPACE);
         flexShrink = tokenStream.expect(NUMBER);
       }
     } else if (flexBasis === undefined && tokenStream.matches(LENGTH)) {
       flexBasis = tokenStream.lastValue;
+    } else if (flexBasis === undefined && tokenStream.matches(AUTO)) {
+      flexBasis = FLEX_BASIS_AUTO;
     } else {
       tokenStream.throw();
     }
@@ -45,5 +48,7 @@ module.exports = (tokenStream) => {
   if (flexShrink === undefined) flexShrink = defaultFlexShrink;
   if (flexBasis === undefined) flexBasis = defaultFlexBasis;
 
-  return { $merge: { flexGrow, flexShrink, flexBasis } };
+  return flexBasis !== FLEX_BASIS_AUTO
+    ? { $merge: { flexGrow, flexShrink, flexBasis } }
+    : { $merge: { flexGrow, flexShrink } };
 };