Consider alternate object syntax for props that accept arrays

[sdalonzo]

I always have to keep open a browser tab with theme.js to reference spacing and breakpoints as indices in the array. I would find it very helpful, especially for media query breakpoints, if the prop could also be passed as an object, with keys being the name of the breakpoints, like sm, md, etc

[BeniCheni]

One thought is that library level could coalesce the values being passed in the array in a way that:

• input: <Box w={[0, 0, 0, 1, 1]}>

• library would interpret: <Box w={[0, null, null, 1, null]}>

So that syntax can be user-friendly for those who favor explicit values in reading the array code.

[evanpipta]

Example

Current syntax:

<Box w={['80px', null, null, null, 1 / 2]}></Box>

Proposed alternative:

<Box w={{xs: '80px', xl: 1 / 2}}></Box>

This would help with two things, for one it would save everyone from having to write null a bunch of times in arrays all across their jsx code, and the semantic key names may make it easier to remember the sizes instead of having to keep a mental mapping of which position in the array maps to which device width.

[jxnblk]

Object support is already being considered here: https://github.com/jxnblk/styled-system/pull/341

[dansternfeld1]

There's an interest in reviving this topic, as we've got use cases to support additional breakpoints. We also have a ton of code using the arrays; we'd prefer an approach that works as expected with existing code and extends support to an object with named properties.

Using the object syntax described by @747823 might let us interpret the input differently based on type, I'm just not sure what the breakpoints object supplied to the theme will end up looking like. The support for objects in styled-system has evolved a bit since the change @jxnblk linked above, and theme breakpoints are now sorted by size when supplied as an object: https://github.com/styled-system/styled-system/blob/master/packages/core/src/index.js#L18