From d8b5629b15d5736daab8305c60575ef371fc38dd Mon Sep 17 00:00:00 2001
From: Evan Scott <probablyup@gmail.com>
Date: Sat, 13 Oct 2018 10:54:29 -0500
Subject: [PATCH 1/2] add support for directional border shorthands

---
 src/__tests__/border.js | 32 ++++++++++++++++++++++++++++++++
 src/transforms/index.js | 41 +++++++++++++++++++++++++++--------------
 2 files changed, 59 insertions(+), 14 deletions(-)

diff --git a/src/__tests__/border.js b/src/__tests__/border.js
index 369a112..8cbcfc9 100644
--- a/src/__tests__/border.js
+++ b/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',
+  })
+})
diff --git a/src/transforms/index.js b/src/transforms/index.js
index 0431b2f..b87827b 100644
--- a/src/transforms/index.js
+++ b/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,

From e1d814d99e6510cb8d93f0437a2c2f3606ee339e Mon Sep 17 00:00:00 2001
From: Evan Scott <probablyup@gmail.com>
Date: Sat, 13 Oct 2018 11:00:30 -0500
Subject: [PATCH 2/2] re-set borderStyle for directional shorthands

---
 src/__tests__/border.js | 8 ++++----
 src/transforms/index.js | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/__tests__/border.js b/src/__tests__/border.js
index 8cbcfc9..6d14a9e 100644
--- a/src/__tests__/border.js
+++ b/src/__tests__/border.js
@@ -68,7 +68,7 @@ it('transforms bottom direction border shorthand', () => {
   expect(transformCss([['border-bottom', '2px dashed #f00']])).toEqual({
     borderBottomWidth: 2,
     borderBottomColor: '#f00',
-    borderBottomStyle: 'dashed',
+    borderStyle: 'dashed',
   })
 })
 
@@ -76,7 +76,7 @@ it('transforms left direction border shorthand', () => {
   expect(transformCss([['border-left', '2px dashed #f00']])).toEqual({
     borderLeftWidth: 2,
     borderLeftColor: '#f00',
-    borderLeftStyle: 'dashed',
+    borderStyle: 'dashed',
   })
 })
 
@@ -84,7 +84,7 @@ it('transforms right direction border shorthand', () => {
   expect(transformCss([['border-right', '2px dashed #f00']])).toEqual({
     borderRightWidth: 2,
     borderRightColor: '#f00',
-    borderRightStyle: 'dashed',
+    borderStyle: 'dashed',
   })
 })
 
@@ -92,6 +92,6 @@ it('transforms top direction border shorthand', () => {
   expect(transformCss([['border-top', '2px dashed #f00']])).toEqual({
     borderTopWidth: 2,
     borderTopColor: '#f00',
-    borderTopStyle: 'dashed',
+    borderStyle: 'dashed',
   })
 })
diff --git a/src/transforms/index.js b/src/transforms/index.js
index b87827b..e8c70f6 100644
--- a/src/transforms/index.js
+++ b/src/transforms/index.js
@@ -33,7 +33,7 @@ const createBorderFactory = (direction = '') =>
       tokens: [COLOR],
       default: 'black',
     },
-    [`border${direction}Style`]: {
+    borderStyle: {
       tokens: [regExpToken(/^(solid|dashed|dotted)$/)],
       default: 'solid',
     },