Can't use media query presets if nested

[KyleAMathews]

Using media works but if you do something like:

<img
  src={}
  css={{
    height: 10,
    width: 10,
    [presets.tablet]: {
      height: 20,
      width: 20,
    }
  }}
/>

you get an error like: Unsupported style property (min-width: 750px). Did you mean (minWidth: 750px)?

It'd be ideal to be able to use the presets with both media and the nested syntax.

[threepointone]

hmm fair, but tricky. a quick workaround is to do [@media${presets.tablet}], but I guess I can put recognition in for strings starting with '('. problem is that this won't catch all media queries (for example, all is a valid media query). what do you think?

[threepointone]

Maybe I'll special case it just for values from the presets object

[KyleAMathews]

Yeah... both of those feel quite hacky unfortunately. Maybe instead let media take objects and switch the presets to objects?

[threepointone]

I went with a much simpler (dumber?) solution - use capitalized keys to get presets with the @media prefix.

// these 2 are the same 
media(presets.mobile, {...})
css({ [presets.Mobile]: {...} })

this should go live in 2.20.

[threepointone]

this is live in 2.20.1

[KyleAMathews]

👍 works for me!