Discussion: Add support for directional border shorthands

src/__tests__/border.js

@@ -2,80 +2,140 @@ import transformCss from '..'
 
 it('transforms border none', () => {
   expect(transformCss([['border', 'none']])).toEqual({
-    borderWidth: 0,
-    borderColor: 'black',
+    borderTopWidth: 0,
+    borderRightWidth: 0,
+    borderBottomWidth: 0,
+    borderLeftWidth: 0,
+    borderTopColor: 'black',
+    borderRightColor: 'black',
+    borderBottomColor: 'black',
+    borderLeftColor: 'black',
     borderStyle: 'solid',
   })
 })
 
 it('transforms border shorthand', () => {
   expect(transformCss([['border', '2px dashed #f00']])).toEqual({
-    borderWidth: 2,
-    borderColor: '#f00',
+    borderTopWidth: 2,
+    borderRightWidth: 2,
+    borderBottomWidth: 2,
+    borderLeftWidth: 2,
+    borderTopColor: '#f00',
+    borderRightColor: '#f00',
+    borderBottomColor: '#f00',
+    borderLeftColor: '#f00',
     borderStyle: 'dashed',
   })
 })
 
 it('transforms border shorthand in other order', () => {
   expect(transformCss([['border', '#f00 2px dashed']])).toEqual({
-    borderWidth: 2,
-    borderColor: '#f00',
+    borderTopWidth: 2,
+    borderRightWidth: 2,
+    borderBottomWidth: 2,
+    borderLeftWidth: 2,
+    borderTopColor: '#f00',
+    borderRightColor: '#f00',
+    borderBottomColor: '#f00',
+    borderLeftColor: '#f00',
     borderStyle: 'dashed',
   })
 })
 
 it('transforms border shorthand missing color', () => {
   expect(transformCss([['border', '2px dashed']])).toEqual({
-    borderWidth: 2,
-    borderColor: 'black',
+    borderTopWidth: 2,
+    borderRightWidth: 2,
+    borderBottomWidth: 2,
+    borderLeftWidth: 2,
+    borderTopColor: 'black',
+    borderRightColor: 'black',
+    borderBottomColor: 'black',
+    borderLeftColor: 'black',
     borderStyle: 'dashed',
   })
 })
 
 it('transforms border shorthand missing style', () => {
   expect(transformCss([['border', '2px #f00']])).toEqual({
-    borderWidth: 2,
-    borderColor: '#f00',
+    borderTopWidth: 2,
+    borderRightWidth: 2,
+    borderBottomWidth: 2,
+    borderLeftWidth: 2,
+    borderTopColor: '#f00',
+    borderRightColor: '#f00',
+    borderBottomColor: '#f00',
+    borderLeftColor: '#f00',
     borderStyle: 'solid',
   })
 })
 
 it('transforms border shorthand missing width', () => {
   expect(transformCss([['border', '#f00 dashed']])).toEqual({
-    borderWidth: 1,
-    borderColor: '#f00',
+    borderTopWidth: 1,
+    borderRightWidth: 1,
+    borderBottomWidth: 1,
+    borderLeftWidth: 1,
+    borderTopColor: '#f00',
+    borderRightColor: '#f00',
+    borderBottomColor: '#f00',
+    borderLeftColor: '#f00',
     borderStyle: 'dashed',
   })
 })
 
 it('transforms border shorthand missing color & width', () => {
   expect(transformCss([['border', 'dashed']])).toEqual({
-    borderWidth: 1,
-    borderColor: 'black',
+    borderTopWidth: 1,
+    borderRightWidth: 1,
+    borderBottomWidth: 1,
+    borderLeftWidth: 1,
+    borderTopColor: 'black',
+    borderRightColor: 'black',
+    borderBottomColor: 'black',
+    borderLeftColor: 'black',
     borderStyle: 'dashed',
   })
 })
 
 it('transforms border shorthand missing style & width', () => {
   expect(transformCss([['border', '#f00']])).toEqual({
-    borderWidth: 1,
-    borderColor: '#f00',
+    borderTopWidth: 1,
+    borderRightWidth: 1,
+    borderBottomWidth: 1,
+    borderLeftWidth: 1,
+    borderTopColor: '#f00',
+    borderRightColor: '#f00',
+    borderBottomColor: '#f00',
+    borderLeftColor: '#f00',
     borderStyle: 'solid',
   })
 })
 
 it('transforms border shorthand missing color & style', () => {
   expect(transformCss([['border', '2px']])).toEqual({
-    borderWidth: 2,
-    borderColor: 'black',
+    borderTopWidth: 2,
+    borderRightWidth: 2,
+    borderBottomWidth: 2,
+    borderLeftWidth: 2,
+    borderTopColor: 'black',
+    borderRightColor: 'black',
+    borderBottomColor: 'black',
+    borderLeftColor: 'black',
     borderStyle: 'solid',
   })
 })
 
 it('transforms border for unsupported units', () => {
   expect(transformCss([['border', '3em solid black']])).toEqual({
-    borderWidth: '3em',
-    borderColor: 'black',
+    borderTopWidth: '3em',
+    borderRightWidth: '3em',
+    borderBottomWidth: '3em',
+    borderLeftWidth: '3em',
+    borderTopColor: 'black',
+    borderRightColor: 'black',
+    borderBottomColor: 'black',
+    borderLeftColor: 'black',
     borderStyle: 'solid',
   })
 })

src/__tests__/borderRight.js

@@ -0,0 +1,47 @@
+import transformCss from '..'
+
+it('transforms border none', () => {
+  expect(transformCss([['border-right', 'none']])).toEqual({
+    borderRightWidth: 0,
+    borderRightColor: 'black',
+  })
+})
+
+it('transforms border shorthand in other order', () => {
+  expect(transformCss([['border-right', '#f00 2px']])).toEqual({
+    borderRightWidth: 2,
+    borderRightColor: '#f00',
+  })
+})
+
+it('transforms border shorthand missing width', () => {
+  expect(transformCss([['border-right', '#f00']])).toEqual({
+    borderRightWidth: 1,
+    borderRightColor: '#f00',
+  })
+})
+
+it('transforms border shorthand missing color', () => {
+  expect(transformCss([['border-right', '2px']])).toEqual({
+    borderRightWidth: 2,
+    borderRightColor: 'black',
+  })
+})
+
+it('transforms border for unsupported units', () => {
+  expect(transformCss([['border-right', '3em black']])).toEqual({
+    borderRightWidth: '3em',
+    borderRightColor: 'black',
+  })
+})
+
+it('does not transform border with percentage width', () => {
+  expect(() => transformCss([['border-right', '3% black']])).toThrow()
+})
+
+it('does not transform style', () => {
+  expect(() => transformCss([['border-right', '2px dashed #f00']])).toThrow()
+  expect(() => transformCss([['border-right', 'dashed #f00']])).toThrow()
+  expect(() => transformCss([['border-right', '2px dashed']])).toThrow()
+  expect(() => transformCss([['border-right', 'dashed']])).toThrow()
+})

src/__tests__/colors.js

@@ -18,9 +18,15 @@ it('transforms transparent color', () => {
 
 it('transforms border shorthand with transparent color', () => {
   expect(transformCss([['border', '2px dashed transparent']])).toEqual({
-    borderColor: 'transparent',
+    borderTopWidth: 2,
+    borderRightWidth: 2,
+    borderBottomWidth: 2,
+    borderLeftWidth: 2,
+    borderTopColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderBottomColor: 'transparent',
+    borderLeftColor: 'transparent',
     borderStyle: 'dashed',
-    borderWidth: 2,
   })
 })
 

src/__tests__/units.js

@@ -2,7 +2,8 @@ import transformCss from '..'
 
 // List of units from:
 // https://developer.mozilla.org/en-US/docs/Web/CSS/length
-const lengthUnits = [
+
+describe.each([
   'ch',
   'em',
   'ex',
@@ -16,9 +17,7 @@ const lengthUnits = [
   'in',
   'pc',
   'pt',
-]
-
-lengthUnits.forEach(unit => {
+])('Handles unit: %s', unit => {
   const value = `2${unit}`
 
   it('allows CSS length units in transformed values', () => {
@@ -56,14 +55,26 @@ lengthUnits.forEach(unit => {
 
   it('allows units to be used with border shorthand property', () => {
     expect(transformCss([['border', `#f00 ${value} dashed`]])).toEqual({
-      borderWidth: value,
-      borderColor: '#f00',
+      borderTopWidth: value,
+      borderRightWidth: value,
+      borderBottomWidth: value,
+      borderLeftWidth: value,
+      borderTopColor: '#f00',
+      borderRightColor: '#f00',
+      borderBottomColor: '#f00',
+      borderLeftColor: '#f00',
       borderStyle: 'dashed',
     })
 
     expect(transformCss([['border', value]])).toEqual({
-      borderWidth: value,
-      borderColor: 'black',
+      borderTopWidth: value,
+      borderRightWidth: value,
+      borderBottomWidth: value,
+      borderLeftWidth: value,
+      borderTopColor: 'black',
+      borderRightColor: 'black',
+      borderBottomColor: 'black',
+      borderLeftColor: 'black',
       borderStyle: 'solid',
     })
   })

src/transforms/border.js

@@ -13,7 +13,7 @@ const defaultBorderWidth = 1
 const defaultBorderColor = 'black'
 const defaultBorderStyle = 'solid'
 
-export default tokenStream => {
+const baseParse = (tokenStream, allowBorderStyle) => {
   let borderWidth
   let borderColor
   let borderStyle
@@ -47,7 +47,52 @@ export default tokenStream => {
 
   if (borderWidth === undefined) borderWidth = defaultBorderWidth
   if (borderColor === undefined) borderColor = defaultBorderColor
-  if (borderStyle === undefined) borderStyle = defaultBorderStyle
+  if (borderStyle === undefined) {
+    borderStyle = defaultBorderStyle
+  } else if (!allowBorderStyle) {
+    throw new Error(
+      'Setting a border style on a single border side is not supported'
+    )
+  }
 
   return { borderWidth, borderColor, borderStyle }
 }
+
+export default tokenStream => {
+  // eslint-disable-next-line prefer-const
+  let { borderWidth, borderColor, borderStyle } = baseParse(tokenStream, true)
+
+  if (borderStyle === undefined) borderStyle = defaultBorderStyle
+
+  return {
+    borderTopWidth: borderWidth,
+    borderRightWidth: borderWidth,
+    borderBottomWidth: borderWidth,
+    borderLeftWidth: borderWidth,
+    borderTopColor: borderColor,
+    borderRightColor: borderColor,
+    borderBottomColor: borderColor,
+    borderLeftColor: borderColor,
+    borderStyle,
+  }
+}
+
+export const borderTop = tokenStream => {
+  const { borderWidth, borderColor } = baseParse(tokenStream, false)
+  return { borderTopWidth: borderWidth, borderTopColor: borderColor }
+}
+
+export const borderRight = tokenStream => {
+  const { borderWidth, borderColor } = baseParse(tokenStream, false)
+  return { borderRightWidth: borderWidth, borderRightColor: borderColor }
+}
+
+export const borderBottom = tokenStream => {
+  const { borderWidth, borderColor } = baseParse(tokenStream, false)
+  return { borderBottomWidth: borderWidth, borderBottomColor: borderColor }
+}
+
+export const borderLeft = tokenStream => {
+  const { borderWidth, borderColor } = baseParse(tokenStream, false)
+  return { borderLeftWidth: borderWidth, borderLeftColor: borderColor }
+}

src/transforms/index.js

@@ -7,7 +7,12 @@ import {
   PERCENT,
   AUTO,
 } from '../tokenTypes'
-import border from './border'
+import border, {
+  borderTop,
+  borderRight,
+  borderBottom,
+  borderLeft,
+} from './border'
 import boxShadow from './boxShadow'
 import flex from './flex'
 import flexFlow from './flexFlow'
@@ -55,8 +60,12 @@ const textShadowOffset = tokenStream => ({
 export default {
   background,
   border,
+  borderBottom,
   borderColor,
+  borderLeft,
   borderRadius,
+  borderRight,
+  borderTop,
   borderWidth,
   boxShadow,
   flex,