Discussion: Border consistency

src/__tests__/border.js

@@ -2,82 +2,112 @@ 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',
-    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',
+it('transforms border for unsupported units', () => {
+  expect(transformCss([['border', '3em solid black']])).toEqual({
+    borderTopWidth: '3em',
+    borderRightWidth: '3em',
+    borderBottomWidth: '3em',
+    borderLeftWidth: '3em',
+    borderTopColor: 'black',
+    borderRightColor: 'black',
+    borderBottomColor: 'black',
+    borderLeftColor: 'black',
     borderStyle: 'solid',
   })
 })
 
-it('transforms border shorthand missing color & style', () => {
-  expect(transformCss([['border', '2px']])).toEqual({
-    borderWidth: 2,
-    borderColor: 'black',
-    borderStyle: 'solid',
-  })
+it('does not transform border shorthand missing style', () => {
+  expect(() => transformCss([['border', '2px #f00']])).toThrow()
 })
 
-it('transforms border for unsupported units', () => {
-  expect(transformCss([['border', '3em solid black']])).toEqual({
-    borderWidth: '3em',
-    borderColor: 'black',
-    borderStyle: 'solid',
-  })
+it('does not transform border shorthand missing style & width', () => {
+  expect(() => transformCss([['border', '#f00']])).toThrow()
+})
+
+it('does not transforms border shorthand missing color & style', () => {
+  expect(() => transformCss([['border', '2px']])).toThrow()
 })
 
 it('does not transform border with percentage width', () => {

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',
+    expect(transformCss([['border', `${value} solid`]])).toEqual({
+      borderTopWidth: value,
+      borderRightWidth: value,
+      borderBottomWidth: value,
+      borderLeftWidth: value,
+      borderTopColor: 'black',
+      borderRightColor: 'black',
+      borderBottomColor: 'black',
+      borderLeftColor: 'black',
       borderStyle: 'solid',
     })
   })

src/transforms/border.js

@@ -11,7 +11,6 @@ const BORDER_STYLE = regExpToken(/^(solid|dashed|dotted)$/)
 
 const defaultBorderWidth = 1
 const defaultBorderColor = 'black'
-const defaultBorderStyle = 'solid'
 
 export default tokenStream => {
   let borderWidth
@@ -20,7 +19,17 @@ export default tokenStream => {
 
   if (tokenStream.matches(NONE)) {
     tokenStream.expectEmpty()
-    return { borderWidth: 0, borderColor: 'black', borderStyle: 'solid' }
+    return {
+      borderTopWidth: 0,
+      borderRightWidth: 0,
+      borderBottomWidth: 0,
+      borderLeftWidth: 0,
+      borderTopColor: 'black',
+      borderRightColor: 'black',
+      borderBottomColor: 'black',
+      borderLeftColor: 'black',
+      borderStyle: 'solid',
+    }
   }
 
   let partsParsed = 0
@@ -47,7 +56,21 @@ export default tokenStream => {
 
   if (borderWidth === undefined) borderWidth = defaultBorderWidth
   if (borderColor === undefined) borderColor = defaultBorderColor
-  if (borderStyle === undefined) borderStyle = defaultBorderStyle
+  if (borderStyle === undefined) {
+    throw new Error(
+      'You must define a border style in the border shorthand (e.g. solid)'
+    )
+  }
 
-  return { borderWidth, borderColor, borderStyle }
+  return {
+    borderTopWidth: borderWidth,
+    borderRightWidth: borderWidth,
+    borderBottomWidth: borderWidth,
+    borderLeftWidth: borderWidth,
+    borderTopColor: borderColor,
+    borderRightColor: borderColor,
+    borderBottomColor: borderColor,
+    borderLeftColor: borderColor,
+    borderStyle,
+  }
 }