Breakpoint objects/aliases

Hi there, is the below Styled System syntax supported in Theme UI? It doesn’t appear to be working when using the pragma like this: (none of the styles are being applied at all)

<div 
sx={{
 bg: { _: "green", sm: "red", md: "blue" }, 
}} >

Thanks!

https://github.com/styled-system/styled-system/blob/master/docs/responsive-styles.md#using-objects

[oheyjesse]

@jxnblk We’re using theme-ui in our shared component library in our organisation and we really appreciate the { _: '12px', xl: '16px' } object style when using styled-system props. We get quite a few questions from devs regarding why this syntax doesn’t exist with the sx prop.

It’s a really nice syntax, as if you add/remove/change breakpoints, you don’t need to update any arrays. It’s also a lot more concise to code. We’d love to see it added 😃

[mrlubos]

I share the sentiment with others @jxnblk. While breakpoints array makes for a concise definition and usage, any refactoring can quickly get out of hand when these values shift by 1. I am not sure what the syntax would look like, but I’d personally find it better to explicitly define the array, e.g. [query.sm, query.md, query.lg].