diff --git a/src/__tests__/border.js b/src/__tests__/border.js index 31c9a08..3007b1c 100644 --- a/src/__tests__/border.js +++ b/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', () => { diff --git a/src/__tests__/colors.js b/src/__tests__/colors.js index 9a0fe62..f919ac3 100644 --- a/src/__tests__/colors.js +++ b/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, }) }) diff --git a/src/__tests__/units.js b/src/__tests__/units.js index d1a13f8..2370c53 100644 --- a/src/__tests__/units.js +++ b/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', }) }) diff --git a/src/transforms/border.js b/src/transforms/border.js index d4c77b4..b6a3168 100644 --- a/src/transforms/border.js +++ b/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, + } }