38 lines
902 B
JavaScript
38 lines
902 B
JavaScript
import unitcalc from 'unitcalc';
|
|
import styled from 'styled-components';
|
|
import camelCase from 'camel-case';
|
|
|
|
const sides = ['top', 'right', 'bottom', 'left'];
|
|
|
|
const unitProps = (() => {
|
|
const sided = rule => sides.map(side => `${rule}-${side}`);
|
|
|
|
const measures = ['margin', 'padding']
|
|
.reduce((props, rule) => [...props, rule, ...sided(rule)], [])
|
|
.concat(['height', 'width', 'border-radius']);
|
|
|
|
return sides.reduce((acc, side) => [...acc, `border-${side}-width`], [
|
|
'border',
|
|
...measures
|
|
]);
|
|
})();
|
|
|
|
const unitsFromProps = props =>
|
|
unitProps
|
|
.filter(measure => props[camelCase(measure)])
|
|
.map(
|
|
measure => `
|
|
${measure}: ${unitcalc(props[camelCase(measure)])};
|
|
`
|
|
)
|
|
.join(';\n');
|
|
|
|
export default Component =>
|
|
Component.extend
|
|
? Component.extend`
|
|
${unitsFromProps};
|
|
`
|
|
: styled(Component)`
|
|
${unitsFromProps};
|
|
`;
|