[Feature] Responsive API

[dhutaryan]

Hey, I know that macaron's main aim is to move style generation to compile time. But sometimes we need to make layout responsive using media queries.

Isn't there some way to do this by ease? Literally, media queries are just css. Approach with matchMedia requires much more efforts than just add something like that:

base: {
  display: 'flex',
  selectors: {
    '@media screen and (max-width: 959px)': {
      flexDirection: 'column',
    }
  }
},

vanilla-css allows it https://vanilla-extract.style/documentation/styling/#media-queries

[Mokshit06]

Hey, the API of vanilla-extract should already work. Basically any API that is supported in vanilla-extract "just works" because under the hood it's using vanilla-extract.

So you should be able to do this:

base: {
  display: 'flex',
  '@media': {
    'screen and (max-width: 959px)': {
      flexDirection: 'column'
    },
  }
},