37 lines
842 B
JavaScript
37 lines
842 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 =>
|
|
Component.extend
|
|
? Component.extend`
|
|
${unitsFromProps};
|
|
`
|
|
: styled(Component)`${unitsFromProps}`;
|