Fix transparent not working as a color value for shorthands

Author: kristerkari

src/__tests__/colors.js

@@ -0,0 +1,31 @@
+import transformCss from '..'
+
+it('transforms hex colors', () => {
+  expect(transformCss([['color', '#f00']])).toEqual({ color: '#f00' })
+})
+
+it('transforms rgb colors', () => {
+  expect(transformCss([['color', 'rgb(255, 0, 0)']])).toEqual({
+    color: 'rgb(255, 0, 0)',
+  })
+})
+
+it('transforms transparent color', () => {
+  expect(transformCss([['color', 'transparent']])).toEqual({
+    color: 'transparent',
+  })
+})
+
+it('transforms border shorthand with transparent color', () => {
+  expect(transformCss([['border', '2px dashed transparent']])).toEqual({
+    borderColor: 'transparent',
+    borderStyle: 'dashed',
+    borderWidth: 2,
+  })
+})
+
+it('transforms background shorthand with transparent color', () => {
+  expect(transformCss([['background', 'transparent']])).toEqual({
+    backgroundColor: 'transparent',
+  })
+})

src/__tests__/index.js

@@ -117,16 +117,6 @@ it('transforms strings', () => {
   expect(transformCss([['color', 'red']])).toEqual({ color: 'red' })
 })
 
-it('transforms hex colors', () => {
-  expect(transformCss([['color', '#f00']])).toEqual({ color: '#f00' })
-})
-
-it('transforms rgb colors', () => {
-  expect(transformCss([['color', 'rgb(255, 0, 0)']])).toEqual({
-    color: 'rgb(255, 0, 0)',
-  })
-})
-
 it('converts to camel-case', () => {
   expect(transformCss([['background-color', 'red']])).toEqual({
     backgroundColor: 'red',

src/tokenTypes.js

@@ -16,7 +16,9 @@ const cssFunctionNameRe = /^(rgba?|hsla?|hwb|lab|lch|gray|color)$/
 const matchColor = node => {
   if (
     node.type === 'word' &&
-    (hexColorRe.test(node.value) || node.value in cssColorKeywords)
+    (hexColorRe.test(node.value) ||
+      node.value in cssColorKeywords ||
+      node.value === 'transparent')
   ) {
     return node.value
   } else if (node.type === 'function' && cssFunctionNameRe.test(node.value)) {