Merge pull request #111 from kristerkari/bugfix/border-colors

Fix border-color only accepting named colors

Author: jacobp100

src/__tests__/borderColor.js

@@ -8,3 +8,30 @@ it('transforms border color with multiple values', () => {
     borderLeftColor: 'blue',
   })
 })
+
+it('transforms border color with hex color', () => {
+  expect(transformCss([['border-color', '#f00']])).toEqual({
+    borderBottomColor: '#f00',
+    borderLeftColor: '#f00',
+    borderRightColor: '#f00',
+    borderTopColor: '#f00',
+  })
+})
+
+it('transforms border color with rgb color', () => {
+  expect(transformCss([['border-color', 'rgb(255, 0, 0)']])).toEqual({
+    borderBottomColor: 'rgb(255, 0, 0)',
+    borderLeftColor: 'rgb(255, 0, 0)',
+    borderRightColor: 'rgb(255, 0, 0)',
+    borderTopColor: 'rgb(255, 0, 0)',
+  })
+})
+
+it('transforms border color with rgba color', () => {
+  expect(transformCss([['border-color', 'rgba(255, 0, 0, 0.1)']])).toEqual({
+    borderBottomColor: 'rgba(255, 0, 0, 0.1)',
+    borderLeftColor: 'rgba(255, 0, 0, 0.1)',
+    borderRightColor: 'rgba(255, 0, 0, 0.1)',
+    borderTopColor: 'rgba(255, 0, 0, 0.1)',
+  })
+})

src/transforms/index.js

@@ -5,9 +5,9 @@ import flex from './flex'
 import flexFlow from './flexFlow'
 import font from './font'
 import fontFamily from './fontFamily'
-import textShadow from './textShadow'
 import textDecoration from './textDecoration'
 import textDecorationLine from './textDecorationLine'
+import textShadow from './textShadow'
 import transform from './transform'
 import { directionFactory, parseShadowOffset } from './util'
 
@@ -25,7 +25,7 @@ const background = tokenStream => ({
   backgroundColor: tokenStream.expect(COLOR),
 })
 const borderColor = directionFactory({
-  types: [WORD],
+  types: [COLOR],
   prefix: 'border',
   suffix: 'Color',
 })