Add support for @container queries :)

[kolber]

This is coming to browsers soon (currently available behind a flag on Chrome Canary), and already has a very solid polyfill available, and is of course insanely useful. :)

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

https://github.com/GoogleChromeLabs/container-query-polyfill

It can work in the exact same way as @media currently does, so only requires very minimal changes to the codebase.

I got very basic support working by cloning transformMedia(), here: kolber@94930dc

But I imagine transformMedia() could be rewritten to handle both syntaxes in a nice clean way maybe?

[mattcompiles]

Opened a PR to add support for container queries
#807

[tuzmusic]

I was able to use createContainer but I couldn't get it to actually work. The following works if you don't use the container name at all (don't assign it and don't refer to it inside wideStyle) but not either of the following ways:

const containerName = createContainer()

export const Card = style([
  {
    containerType: 'inline-size',
    containerName,
    minWidth: rem(288), // size of a large card at width = 320px
  },
])

const wideStyle = (style: StyleRule) => ({
  '@container': {
    [`${containerName} (min-width: 321px)`]: style,
  },
})

/* this doesn't work either
const wideStyle = (style: StyleRule) => ({
  [`@container ${containerName} `]: {
    [`(min-width: 321px)`]: style,
  },
})
*/

export const CardContent = style([
  treats({
    display: 'flex',
    flexDirection: 'column',
  }),
  wideStyle({
    flexDirection: 'row',
  }),
])

[askoufis]

@tuzmusic If you think you've found a bug, please raise an issue with a minimal reproduction.