import { createSpacing } from 'spacing-helper';
const spacing = createSpacing(8); // 8 is default scaling factor
spacing(1,2,3,4); // '8px 16px 24px 32px'

const HeaderStyled = styled.header`
    margin: 16px 24px;
    ...
`;

const MODULE = 8;

const HeaderStyled = styled.header`
    margin: ${MODULE * 2}px ${MODULE * 3}px;
    ...
`;

const HeaderStyled = styled.header`
    margin: ${spacing(2)} ${spacing(3)};
    ...
`;

const HeaderStyled = styled.header`
    margin: ${spacing(2, 3)};
    ...
`;

const spacing = createSpacing(8);

expect(spacing()).toBe('8px');
expect(spacing(2)).toBe('16px');
expect(spacing(1, 2)).toBe('8px 16px');
expect(spacing(1, 2, 3)).toBe('8px 16px 24px');
expect(spacing(1, 2, 3, 4)).toBe('8px 16px 24px 32px');