diff --git a/src/__tests__/colors.js b/src/__tests__/colors.js new file mode 100644 index 0000000..9a0fe62 --- /dev/null +++ b/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', + }) +}) diff --git a/src/__tests__/index.js b/src/__tests__/index.js index 1f32b83..c89a0af 100644 --- a/src/__tests__/index.js +++ b/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', diff --git a/src/tokenTypes.js b/src/tokenTypes.js index adf1c87..30e8850 100644 --- a/src/tokenTypes.js +++ b/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)) {