Implement auto keyword for flex including in shorthand for flex-basis

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

@@ -16,7 +16,7 @@ module.exports = (tokenStream) => {
   if (tokenStream.matches(NONE)) {
     tokenStream.expectEmpty();
     return { $merge: { flexGrow: 0, flexShrink: 0 } };
-  } else if (tokenStream.matches(AUTO) && !tokenStream.lookAhead().hasTokens()) {
+  } else if (tokenStream.test(AUTO) && !tokenStream.lookAhead().hasTokens()) {
     return { $merge: { flexGrow: 1, flexShrink: 1 } };
   }
 
@@ -27,7 +27,7 @@ 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);
       }