diff --git a/src/__tests__/border.js b/src/__tests__/border.js index 369a112..6d14a9e 100644 --- a/src/__tests__/border.js +++ b/src/__tests__/border.js @@ -63,3 +63,35 @@ it('transforms border shorthand missing color & style', () => { borderStyle: 'solid', }) }) + +it('transforms bottom direction border shorthand', () => { + expect(transformCss([['border-bottom', '2px dashed #f00']])).toEqual({ + borderBottomWidth: 2, + borderBottomColor: '#f00', + borderStyle: 'dashed', + }) +}) + +it('transforms left direction border shorthand', () => { + expect(transformCss([['border-left', '2px dashed #f00']])).toEqual({ + borderLeftWidth: 2, + borderLeftColor: '#f00', + borderStyle: 'dashed', + }) +}) + +it('transforms right direction border shorthand', () => { + expect(transformCss([['border-right', '2px dashed #f00']])).toEqual({ + borderRightWidth: 2, + borderRightColor: '#f00', + borderStyle: 'dashed', + }) +}) + +it('transforms top direction border shorthand', () => { + expect(transformCss([['border-top', '2px dashed #f00']])).toEqual({ + borderTopWidth: 2, + borderTopColor: '#f00', + borderStyle: 'dashed', + }) +}) diff --git a/src/transforms/index.js b/src/transforms/index.js index 0431b2f..e8c70f6 100644 --- a/src/transforms/index.js +++ b/src/transforms/index.js @@ -22,20 +22,29 @@ const { const background = tokenStream => ({ $merge: { backgroundColor: tokenStream.expect(COLOR) }, }) -const border = anyOrderFactory({ - borderWidth: { - tokens: [LENGTH, UNSUPPORTED_LENGTH_UNIT], - default: 1, - }, - borderColor: { - tokens: [COLOR], - default: 'black', - }, - borderStyle: { - tokens: [regExpToken(/^(solid|dashed|dotted)$/)], - default: 'solid', - }, -}) + +const createBorderFactory = (direction = '') => + anyOrderFactory({ + [`border${direction}Width`]: { + tokens: [LENGTH, UNSUPPORTED_LENGTH_UNIT], + default: 1, + }, + [`border${direction}Color`]: { + tokens: [COLOR], + default: 'black', + }, + borderStyle: { + tokens: [regExpToken(/^(solid|dashed|dotted)$/)], + default: 'solid', + }, + }) + +const border = createBorderFactory() +const borderTop = createBorderFactory('Top') +const borderBottom = createBorderFactory('Bottom') +const borderLeft = createBorderFactory('Left') +const borderRight = createBorderFactory('Right') + const borderColor = directionFactory({ types: [WORD], prefix: 'border', @@ -70,6 +79,10 @@ const textShadowOffset = shadowOffsetFactory() export default { background, border, + borderTop, + borderBottom, + borderLeft, + borderRight, borderColor, borderRadius, borderWidth,