add support for directional border shorthands

Author: quantizor

src/__tests__/border.js

@@ -63,3 +63,35 @@ it('transforms border shorthand missing color & style', () => {
     borderStyle: 'solid',
   })
 })
+
+it('transforms bottom direction border shorthand', () => {
+  expect(transformCss([['border-bottom', '2px dashed #f00']])).toEqual({
+    borderBottomWidth: 2,
+    borderBottomColor: '#f00',
+    borderBottomStyle: 'dashed',
+  })
+})
+
+it('transforms left direction border shorthand', () => {
+  expect(transformCss([['border-left', '2px dashed #f00']])).toEqual({
+    borderLeftWidth: 2,
+    borderLeftColor: '#f00',
+    borderLeftStyle: 'dashed',
+  })
+})
+
+it('transforms right direction border shorthand', () => {
+  expect(transformCss([['border-right', '2px dashed #f00']])).toEqual({
+    borderRightWidth: 2,
+    borderRightColor: '#f00',
+    borderRightStyle: 'dashed',
+  })
+})
+
+it('transforms top direction border shorthand', () => {
+  expect(transformCss([['border-top', '2px dashed #f00']])).toEqual({
+    borderTopWidth: 2,
+    borderTopColor: '#f00',
+    borderTopStyle: 'dashed',
+  })
+})

src/transforms/index.js

@@ -22,20 +22,29 @@ const {
 const background = tokenStream => ({
   $merge: { backgroundColor: tokenStream.expect(COLOR) },
 })
-const border = anyOrderFactory({
-  borderWidth: {
-    tokens: [LENGTH, UNSUPPORTED_LENGTH_UNIT],
-    default: 1,
-  },
-  borderColor: {
-    tokens: [COLOR],
-    default: 'black',
-  },
-  borderStyle: {
-    tokens: [regExpToken(/^(solid|dashed|dotted)$/)],
-    default: 'solid',
-  },
-})
+
+const createBorderFactory = (direction = '') =>
+  anyOrderFactory({
+    [`border${direction}Width`]: {
+      tokens: [LENGTH, UNSUPPORTED_LENGTH_UNIT],
+      default: 1,
+    },
+    [`border${direction}Color`]: {
+      tokens: [COLOR],
+      default: 'black',
+    },
+    [`border${direction}Style`]: {
+      tokens: [regExpToken(/^(solid|dashed|dotted)$/)],
+      default: 'solid',
+    },
+  })
+
+const border = createBorderFactory()
+const borderTop = createBorderFactory('Top')
+const borderBottom = createBorderFactory('Bottom')
+const borderLeft = createBorderFactory('Left')
+const borderRight = createBorderFactory('Right')
+
 const borderColor = directionFactory({
   types: [WORD],
   prefix: 'border',
@@ -70,6 +79,10 @@ const textShadowOffset = shadowOffsetFactory()
 export default {
   background,
   border,
+  borderTop,
+  borderBottom,
+  borderLeft,
+  borderRight,
   borderColor,
   borderRadius,
   borderWidth,