Responsive styles with Emotion about xstyled

[Grsmto]

Actually I managed to do this with the breakpoints utility. Not sure why I couldn't yesterday but it works this way:

<h2
  css={breakpoints({
    xs: { display: "block" },
    sm: { display: "none" },
  })}
>

[Grsmto]

So I'm giving a bit of feedback on this after trying the different options I had and I think there is no neat solution to do responsive styles using the css prop (but actually it's probably the same with SC).
I think being able to do whichever solution I proposed in my first comment (either array or object breakpoints) would make this lib just the perfect choice.
Having to refactor your entire css declaration to be wrapped in a breakpoint() is not really handy and the up/down functions are cool but the styles get quite unreadable once you have them in.

Also Emotion css function does not compute functions inside the declaration, so I don't think the utilities provided by Xstyled are usable with it (I might be wrong?!).

[gregberge]

@Grsmto for emotion you can use them inside the styled components at top level, at other places you have to pass the props manually.