Merge pull request styled-components#24 from styled-components/fixes

Fix border-color shorthands, allow '0' rather than '0px'

Author: mxstbr

package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-to-react-native",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Convert CSS text to a React Native stylesheet object",
   "main": "dist/index.js",
   "scripts": {

src/index.test.js

@@ -61,6 +61,24 @@ it('allows percent values in transformed values', () => runTest([
   marginLeft: '10%',
 }));
 
+it('allows color values in transformed border-color values', () => runTest([
+  ['border-color', 'red'],
+], {
+  borderTopColor: 'red',
+  borderRightColor: 'red',
+  borderBottomColor: 'red',
+  borderLeftColor: 'red',
+}));
+
+it('allows omitting units for 0', () => runTest([
+  ['margin', '10px 0'],
+], {
+  marginTop: 10,
+  marginRight: 0,
+  marginBottom: 10,
+  marginLeft: 0,
+}));
+
 it('transforms strings', () => runTest([
   ['color', 'red'],
 ], { color: 'red' }));

src/tokenTypes.js

@@ -26,7 +26,8 @@ const noneRe = /^(none)$/;
 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+)?)$/;
-const lengthRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)px$/;
+// Note lengthRe is sneaky: you can omit units for 0
+const lengthRe = /^(0$|(?:[+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)(?=px$))/;
 const angleRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?(?:deg|rad))$/;
 const percentRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?%)$/;
 

src/transforms/index.js

@@ -22,7 +22,11 @@ const border = anyOrderFactory({
     default: 'solid',
   },
 });
-const borderColor = directionFactory({ type: 'word', prefix: 'border', suffix: 'Color' });
+const borderColor = directionFactory({
+  types: [WORD],
+  prefix: 'border',
+  suffix: 'Color',
+});
 const borderRadius = directionFactory({
   directions: ['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft'],
   prefix: 'border',

src/transforms/util.js

@@ -3,18 +3,19 @@ const { tokens } = require('../tokenTypes');
 const { LENGTH, PERCENT, SPACE } = tokens;
 
 module.exports.directionFactory = ({
+  types = [LENGTH, PERCENT],
   directions = ['Top', 'Right', 'Bottom', 'Left'],
   prefix = '',
   suffix = '',
 }) => (tokenStream) => {
   const values = [];
 
   // borderWidth doesn't currently allow a percent value, but may do in the future
-  values.push(tokenStream.expect(LENGTH, PERCENT));
+  values.push(tokenStream.expect(...types));
 
   while (values.length < 4 && tokenStream.hasTokens()) {
     tokenStream.expect(SPACE);
-    values.push(tokenStream.expect(LENGTH, PERCENT));
+    values.push(tokenStream.expect(...types));
   }
 
   tokenStream.expectEmpty();