Hi guys,

We use styled-components as CSS framework and when we call the spacing function with the single argument we have to put 'px' unit in the end, but with multiple arguments, we don't need to do it. It's a little confusing because by changing the number of arguments a developer should add or remove 'px' unit.

Expected Behavior 🤔

Example:

padding: ${props => props.theme.spacing(2)};
padding: ${props => props.theme.spacing(1, 2)};

Result

padding: 16px;
padding: 8px 16px;

Current Behavior 😯

Example:

padding: ${props => props.theme.spacing(2)};
padding: ${props => props.theme.spacing(1, 2)};

Result

padding: 16;   <---- Here is no PX unit
padding: 8px 16px;

So, now when we use single argument we always put 'px' in the end as the example below:

padding: ${props => props.theme.spacing(2)}px;