34 lines
762 B
JavaScript
34 lines
762 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)],
|
||
|
|
[]
|
||
|
|
);
|
||
|
|
|
||
|
|
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 => styled(Component)`
|
||
|
|
${unitsFromProps}
|
||
|
|
`;
|