Skip to content

Fix parsing various shorthands when a value is zero (fixes #38) #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 22, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "css-to-react-native",
"version": "2.0.3",
"version": "2.0.4",
"description": "Convert CSS text to a React Native stylesheet object",
"main": "dist/index.js",
"scripts": {
Expand Down
10 changes: 8 additions & 2 deletions src/TokenStream.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
const SYMBOL_MATCH = 'SYMBOL_MATCH';

module.exports = class TokenStream {
constructor(nodes, parent) {
this.nodes = nodes;
Expand All @@ -18,7 +20,7 @@ module.exports = class TokenStream {
return new TokenStream(this.nodes.slice(1), this.parent);
}

match(...tokenDescriptors) {
[SYMBOL_MATCH](...tokenDescriptors) {
const node = this.node;

if (!node) return null;
Expand All @@ -38,8 +40,12 @@ module.exports = class TokenStream {
return null;
}

matches(...tokenDescriptors) {
return this[SYMBOL_MATCH](...tokenDescriptors) !== null;
}

expect(...tokenDescriptors) {
const value = this.match(...tokenDescriptors);
const value = this[SYMBOL_MATCH](...tokenDescriptors);
if (value !== null) return value;
return this.throw();
}
Expand Down
4 changes: 2 additions & 2 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ export const transformRawValue = (input) => {
const value = input.trim();

const numberMatch = value.match(numberOrLengthRe);
if (numberMatch) return Number(numberMatch[1]);
if (numberMatch !== null) return Number(numberMatch[1]);

const boolMatch = input.match(boolRe);
if (boolMatch) return boolMatch[0].toLowerCase() === 'true';
if (boolMatch !== null) return boolMatch[0].toLowerCase() === 'true';

return value;
};
Expand Down
33 changes: 29 additions & 4 deletions src/index.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -232,13 +232,34 @@ it('transforms flex shorthand with 3 values in reverse order', () => runTest([
['flex', '3px 1 2'],
], { flexGrow: 1, flexShrink: 2, flexBasis: 3 }));

it('transforms flex shorthand with 2 values', () => runTest([
it('transforms flex shorthand with 2 values of flex-grow and flex-shrink', () => runTest([
['flex', '1 2'],
], { flexGrow: 1, flexShrink: 2, flexBasis: 0 }));

it('transforms flex shorthand with 1 values', () => runTest([
['flex', '1'],
], { flexGrow: 1, flexShrink: 1, flexBasis: 0 }));
it('transforms flex shorthand with 2 values of flex-grow and flex-basis', () => runTest([
['flex', '2 2px'],
], { flexGrow: 2, flexShrink: 1, flexBasis: 2 }));

it('transforms flex shorthand with 2 values of flex-grow and flex-basis (reversed)', () => runTest([
['flex', '2px 2'],
], { flexGrow: 2, flexShrink: 1, flexBasis: 2 }));

it('transforms flex shorthand with 1 value of flex-grow', () => runTest([
['flex', '2'],
], { flexGrow: 2, flexShrink: 1, flexBasis: 0 }));

it('transforms flex shorthand with 1 value of flex-basis', () => runTest([
['flex', '10px'],
], { flexGrow: 1, flexShrink: 1, flexBasis: 10 }));

/*
A unitless zero that is not already preceded by two flex factors must be interpreted as a flex
factor. To avoid misinterpretation or invalid declarations, authors must specify a zero
<‘flex-basis’> component with a unit or precede it by two flex factors.
*/
it('transforms flex shorthand with flex-grow/shrink taking priority over basis', () => runTest([
['flex', '0 1 0'],
], { flexGrow: 0, flexShrink: 1, flexBasis: 0 }));

it('transforms flexFlow shorthand with two values', () => runTest([
['flex-flow', 'column wrap'],
Expand Down Expand Up @@ -401,6 +422,10 @@ it('does not transform invalid unquoted font-family', () => {
expect(() => transformCss([['font-family', 'Goudy Bookletter 1911']])).toThrow();
});

it('does not transform invalid flex', () => {
expect(() => transformCss([['flex', '1 2px 3']])).toThrow();
});

it('allows blacklisting shorthands', () => {
const actualStyles = transformCss([['border-radius', '50']], ['borderRadius']);
expect(actualStyles).toEqual({ borderRadius: 50 });
Expand Down
6 changes: 4 additions & 2 deletions src/tokenTypes.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ const matchColor = (node) => {
return null;
};

const noneRe = /^(none)$/;
const noneRe = /^(none)$/i;
const autoRe = /^(auto)$/i;
const identRe = /(^-?[_a-z][_a-z0-9-]*$)/i;
// Note if these are wrong, you'll need to change index.js too
const numberRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)$/;
Expand All @@ -39,7 +40,7 @@ const regExpToken = (regExp, transform = String) => (node) => {
if (node.type !== 'word') return null;

const match = node.value.match(regExp);
if (!match) return null;
if (match === null) return null;

const value = transform(match[1]);

Expand All @@ -54,6 +55,7 @@ module.exports.tokens = {
COMMA: noopToken(node => node.type === 'div' && node.value === ','),
WORD: valueForTypeToken('word'),
NONE: regExpToken(noneRe),
AUTO: regExpToken(autoRe),
NUMBER: regExpToken(numberRe, Number),
LENGTH: regExpToken(lengthRe, Number),
ANGLE: regExpToken(angleRe),
Expand Down
17 changes: 10 additions & 7 deletions src/transforms/flex.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const { tokens } = require('../tokenTypes');

const { NONE, NUMBER, LENGTH, SPACE } = tokens;
const { NONE, AUTO, NUMBER, LENGTH, SPACE } = tokens;

const defaultFlexGrow = 1;
const defaultFlexShrink = 1;
Expand All @@ -11,23 +11,26 @@ module.exports = (tokenStream) => {
let flexShrink;
let flexBasis;

if (tokenStream.match(NONE)) {
if (tokenStream.matches(NONE)) {
tokenStream.expectEmpty();
return { $merge: { flexGrow: 0, flexShrink: 0 } };
} else if (tokenStream.matches(AUTO)) {
tokenStream.expectEmpty();
return { $merge: { flexGrow: 1, flexShrink: 1 } };
}

let partsParsed = 0;
while (partsParsed < 2 && tokenStream.hasTokens()) {
if (partsParsed) tokenStream.expect(SPACE);
if (partsParsed !== 0) tokenStream.expect(SPACE);

if (flexGrow === undefined && tokenStream.match(NUMBER)) {
if (flexGrow === undefined && tokenStream.matches(NUMBER)) {
flexGrow = tokenStream.lastValue;

if (tokenStream.lookahead().match(NUMBER)) {
if (tokenStream.lookahead().matches(NUMBER)) {
tokenStream.expect(SPACE);
flexShrink = tokenStream.match(NUMBER);
flexShrink = tokenStream.expect(NUMBER);
}
} else if (flexBasis === undefined && tokenStream.match(LENGTH)) {
} else if (flexBasis === undefined && tokenStream.matches(LENGTH)) {
flexBasis = tokenStream.lastValue;
} else {
tokenStream.throw();
Expand Down
12 changes: 6 additions & 6 deletions src/transforms/font.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,13 @@ module.exports = (tokenStream) => {

let numStyleWeightVariantMatched = 0;
while (numStyleWeightVariantMatched < 3 && tokenStream.hasTokens()) {
if (tokenStream.match(NORMAL)) {
if (tokenStream.matches(NORMAL)) {
/* pass */
} else if (fontStyle === undefined && tokenStream.match(STYLE)) {
} else if (fontStyle === undefined && tokenStream.matches(STYLE)) {
fontStyle = tokenStream.lastValue;
} else if (fontWeight === undefined && tokenStream.match(WEIGHT)) {
} else if (fontWeight === undefined && tokenStream.matches(WEIGHT)) {
fontWeight = tokenStream.lastValue;
} else if (fontVariant === undefined && tokenStream.match(VARIANT)) {
} else if (fontVariant === undefined && tokenStream.matches(VARIANT)) {
fontVariant = [tokenStream.lastValue];
} else {
break;
Expand All @@ -39,8 +39,8 @@ module.exports = (tokenStream) => {

const fontSize = tokenStream.expect(LENGTH);

if (tokenStream.match(SLASH)) {
if (tokenStream.match(NUMBER)) {
if (tokenStream.matches(SLASH)) {
if (tokenStream.matches(NUMBER)) {
lineHeight = fontSize * tokenStream.lastValue;
} else {
lineHeight = tokenStream.expect(LENGTH);
Expand Down
2 changes: 1 addition & 1 deletion src/transforms/fontFamily.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const { SPACE, IDENT, STRING } = tokens;
module.exports = (tokenStream) => {
let fontFamily;

if (tokenStream.match(STRING)) {
if (tokenStream.matches(STRING)) {
fontFamily = tokenStream.lastValue;
} else {
fontFamily = tokenStream.expect(IDENT);
Expand Down
6 changes: 3 additions & 3 deletions src/transforms/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const { directionFactory, anyOrderFactory, shadowOffsetFactory } = require('./ut

const { IDENT, WORD, COLOR } = tokens;

const background = tokenStream => ({ $merge: { backgroundColor: tokenStream.match(COLOR) } });
const background = tokenStream => ({ $merge: { backgroundColor: tokenStream.expect(COLOR) } });
const border = anyOrderFactory({
borderWidth: {
token: tokens.LENGTH,
Expand Down Expand Up @@ -45,8 +45,8 @@ const flexFlow = anyOrderFactory({
default: 'row',
},
});
const fontVariant = tokenStream => [tokenStream.match(IDENT)];
const fontWeight = tokenStream => tokenStream.match(WORD); // Also match numbers as strings
const fontVariant = tokenStream => [tokenStream.expect(IDENT)];
const fontWeight = tokenStream => tokenStream.expect(WORD); // Also match numbers as strings
const shadowOffset = shadowOffsetFactory();
const textShadowOffset = shadowOffsetFactory();

Expand Down
4 changes: 2 additions & 2 deletions src/transforms/util.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ module.exports.anyOrderFactory = (properties, delim = SPACE) => (tokenStream) =>
if (numParsed) tokenStream.expect(delim);

const matchedPropertyName = propertyNames.find(propertyName => (
values[propertyName] === undefined && tokenStream.match(properties[propertyName].token)
values[propertyName] === undefined && tokenStream.matches(properties[propertyName].token)
));

if (!matchedPropertyName) {
Expand All @@ -69,7 +69,7 @@ module.exports.anyOrderFactory = (properties, delim = SPACE) => (tokenStream) =>

module.exports.shadowOffsetFactory = () => (tokenStream) => {
const width = tokenStream.expect(LENGTH);
const height = tokenStream.match(SPACE)
const height = tokenStream.matches(SPACE)
? tokenStream.expect(LENGTH)
: width;
tokenStream.expectEmpty();
Expand Down