Allow percent values, cleanup

Author: jacobp100

src/index.test.js

@@ -52,6 +52,15 @@ it('allows negative values in transformed values', () => runTest([
   borderBottomLeftRadius: -1.5,
 }));
 
+it('allows percent values in transformed values', () => runTest([
+  ['margin', '10%'],
+], {
+  marginTop: '10%',
+  marginRight: '10%',
+  marginBottom: '10%',
+  marginLeft: '10%',
+}));
+
 it('transforms strings', () => runTest([
   ['color', 'red'],
 ], { color: 'red' }));

src/transforms/border.js

@@ -29,6 +29,8 @@ module.exports = (tokenStream) => {
       }
     } else if (flexBasis === undefined && tokenStream.match(LENGTH)) {
       flexBasis = tokenStream.lastValue;
+    } else {
+      tokenStream.throw();
     }
 
     partsParsed += 1;

src/transforms/flex.js

@@ -1,14 +1,26 @@
-const { tokens } = require('../tokenTypes');
-const border = require('./border');
+const { regExpToken, tokens } = require('../tokenTypes');
 const flex = require('./flex');
-const flexFlow = require('./flexFlow');
 const font = require('./font');
 const transform = require('./transform');
-const { directionFactory, shadowOffsetFactory } = require('./util');
+const { directionFactory, anyOrderFactory, shadowOffsetFactory } = require('./util');
 
 const { WORD, COLOR } = tokens;
 
 const background = tokenStream => ({ $merge: { backgroundColor: tokenStream.match(COLOR) } });
+const border = anyOrderFactory({
+  borderWidth: {
+    token: tokens.LENGTH,
+    default: 1,
+  },
+  borderColor: {
+    token: COLOR,
+    default: 'black',
+  },
+  borderStyle: {
+    token: regExpToken(/^(solid|dashed|dotted)$/),
+    default: 'solid',
+  },
+});
 const borderColor = directionFactory({ type: 'word', prefix: 'border', suffix: 'Color' });
 const borderRadius = directionFactory({
   directions: ['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft'],
@@ -18,6 +30,16 @@ const borderRadius = directionFactory({
 const borderWidth = directionFactory({ prefix: 'border', suffix: 'Width' });
 const margin = directionFactory({ prefix: 'margin' });
 const padding = directionFactory({ prefix: 'padding' });
+const flexFlow = anyOrderFactory({
+  flexWrap: {
+    token: regExpToken(/(nowrap|wrap|wrap-reverse)/),
+    default: 'nowrap',
+  },
+  flexDirection: {
+    token: regExpToken(/(row|row-reverse|column|column-reverse)/),
+    default: 'row',
+  },
+});
 const fontVariant = tokenStream => [tokenStream.match(WORD)];
 const fontWeight = tokenStream => tokenStream.match(WORD);
 const shadowOffset = shadowOffsetFactory();

src/transforms/flexFlow.js

@@ -1,20 +1,20 @@
 const { tokens } = require('../tokenTypes');
 
-const { LENGTH, SPACE } = tokens;
+const { LENGTH, PERCENT, SPACE } = tokens;
 
 module.exports.directionFactory = ({
-  types = [LENGTH],
   directions = ['Top', 'Right', 'Bottom', 'Left'],
   prefix = '',
   suffix = '',
 }) => (tokenStream) => {
   const values = [];
 
-  values.push(tokenStream.expect(...types));
+  // borderWidth doesn't currently allow a percent value, but may do in the future
+  values.push(tokenStream.expect(LENGTH, PERCENT));
 
   while (values.length < 4 && tokenStream.hasTokens()) {
     tokenStream.expect(SPACE);
-    values.push(tokenStream.expect(...types));
+    values.push(tokenStream.expect(LENGTH, PERCENT));
   }
 
   tokenStream.expectEmpty();
@@ -33,6 +33,40 @@ module.exports.directionFactory = ({
   return { $merge: output };
 };
 
+module.exports.anyOrderFactory = (properties, delim = SPACE) => (tokenStream) => {
+  const propertyNames = Object.keys(properties);
+  const values = propertyNames.reduce((accum, propertyName) => {
+    accum[propertyName] === undefined; // eslint-disable-line
+    return accum;
+  }, {});
+
+  let numParsed = 0;
+  while (numParsed < propertyNames.length && tokenStream.hasTokens()) {
+    if (numParsed) tokenStream.expect(delim);
+
+    let didMatch = false;
+    for (const propertyName of propertyNames) { // eslint-disable-line
+      if (values[propertyName] === undefined && tokenStream.match(properties[propertyName].token)) {
+        values[propertyName] = tokenStream.lastValue;
+        didMatch = true;
+        break;
+      }
+    }
+
+    if (!didMatch) tokenStream.throw();
+
+    numParsed += 1;
+  }
+
+  tokenStream.expectEmpty();
+
+  propertyNames.forEach((propertyName) => {
+    if (values[propertyName] === undefined) values[propertyName] = properties[propertyName].default;
+  });
+
+  return { $merge: values };
+};
+
 module.exports.shadowOffsetFactory = () => (tokenStream) => {
   const width = tokenStream.expect(LENGTH);
   const height = tokenStream.match(SPACE)