Responsive values given as array-like objects

[kripod]

Motivation

Styled System has introduced array-based responsive styling, reducing the burden caused by manually written media queries.

Details

To avoid confusion between the array and object notation, undefined should be preferred over null for skipping a breakpoint:

sx({ width: [, , '25%'] }); // Good, sparse array
sx({ width: [undefined, undefined, '25%'] }); // Better, more explicit
sx({ width: { 2: '25%' } }); // Best, concise while being explicit

sx({ width: { 600: '25%' } }); // Okay, custom one-off breakpoint of >=600px

sx({ width: [null, null, '25%'] }); // Bad, null may suggest that the value gets reset
sx({ width: { 0: null, 2: '25%' } }); // Bad, null isn't necessary here