-
-
Notifications
You must be signed in to change notification settings - Fork 209
/
borderRadius.js
43 lines (38 loc) · 1.1 KB
/
borderRadius.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// @flow
/**
* The border-radius shorthand accepts a value for side and a value for radius and applies the radius value to both corners of the side.
* @example
* // Styles as object usage
* const styles = {
* ...borderRadius('top', '5px')
* }
*
* // styled-components usage
* const div = styled.div`
* ${borderRadius('top', '5px')}
* `
*
* // CSS as JS Output
*
* div {
* 'border-top-right-radius': '5px',
* 'border-top-left-radius': '5px',
* }
*/
function borderRadius(side:string, radius:string) {
if (!radius || typeof radius !== 'string') throw new Error('borderRadius expects a radius value as a string as the second argument.')
if (side === 'top' || side === 'bottom') {
return {
[`border-${side}-right-radius`]: radius,
[`border-${side}-left-radius`]: radius,
}
}
if (side === 'left' || side === 'right') {
return {
[`border-top-${side}-radius`]: radius,
[`border-bottom-${side}-radius`]: radius,
}
}
throw new Error('borderRadius expects one of "top", "bottom", "left" or "right" as the first argument.')
}
export default borderRadius