diff --git a/src/TokenStream.js b/src/TokenStream.js index 3650f2b..2e712e2 100644 --- a/src/TokenStream.js +++ b/src/TokenStream.js @@ -1,3 +1,4 @@ +const SYMBOL_BASE_MATCH = 'SYMBOL_BASE_MATCH'; const SYMBOL_MATCH = 'SYMBOL_MATCH'; module.exports = class TokenStream { @@ -16,11 +17,11 @@ 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; @@ -28,18 +29,25 @@ module.exports = class TokenStream { 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; } diff --git a/src/index.test.js b/src/index.test.js index 436dd8d..7e047d4 100644 --- a/src/index.test.js +++ b/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' })); diff --git a/src/transforms/flex.js b/src/transforms/flex.js index 6458870..b76fdf8 100644 --- a/src/transforms/flex.js +++ b/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 } }; };