Rebass: Allow `space` theme values to be defined as an object.

[jckw]

This may already be possible - so please let me know if it's not actually an issue.

At the moment, we can define the most theme values as objects as opposed to arrays, such as fontSizes:

const theme = {
    fontSizes: {
        body: 12,
        largeHeading: 22
    }
}

This is super useful for allowing changes to be made in the future without having to go and update every array index.

However, if you try to do this with space, and pass it to a component margin or padding, it's not recognised and no padding is applied. E.g.

const themes = {
    space: {
        small: 4,
        large: 16
    }
}

<Box px="small" mb="large">Example</Box>

Is there a reason for this? I'm getting lost in other packages, and sub-packages so can't work out why this functionality is different from the other keys.

[thomasbrus]

I think you might need to explicitely add the the unit (4px, 16px, ..)

[jckw]

Looks like that works! Thanks @thomasbrus!

Completely bizarre and inconsistent considering in an array the units are not required, and in other fields the value in the key-value pair also does not require units.

Why is padding different? Seems more like a bug than a feature.

[thomasbrus]

Yeah I agree, it's a neat little trick but a bit unpredictable. I think over here is where the values are transformed: https://github.com/jxnblk/styled-system/blob/master/src/styles.js#L21.. And spacing is handled even differently: https://github.com/jxnblk/styled-system/blob/master/src/space.js#L40-L51

[jckw]

Interesting!

I can't tell from glancing at the code why explicit units are only required when using an object as opposed to an array..?

[thomasbrus]

I can't tell exactly either but I think it would be better if it the unit was always required, for example when configuring breakpoints I have to think about whether the unit is px, em, or rems..

[jxnblk]

This would need to be address in styled-system. If you haven't already, can you open an issue in that repo to discuss?