Container queries

[altano]

Is it possible to use the breakpoint system but target a container's size instead of the viewport, i.e. use container queries instead of media queries?

[anubra266]

@altano you can do this with the css @syntax in object format, but shorthands aren't implemented yet.

[altano]

the css @syntax in object format

Sorry, not sure what this means and my google-fu is too weak to figure it out. Got a pointer?

[astahmer]

@altano you can do something like this:

css({
    containerType: 'size',
    '@media (min-width: 10px)': {
      fontSize: 'xl',
      color: 'blue.300',
    },
    '@container (min-width: 10px)': {
      fontSize: '2xl',
      color: 'green.300',
    },
    '@supports (display: flex)': {
      fontSize: '3xl',
      color: 'red.300',
    },
  })

[altano]

Thanks, that works perfectly. Is it possible to access tokens from the container query? This seems to work but produces a TS error:

css({
  columnCount: 4,
  [`@container (max-width: ${token("breakpoints.sm")})`]: {
    columnCount: 1,
  },
});

Would sure be nice if we could just use a css variable in media/container queries. :(

[astahmer]

we made the type throw to discourage users to try making those dynamic as much as possible.
I think last time we discussed this we concluded that we might allow the token(xxx) special string in there, just like other strings such as: css({ border: "2px solid token(colors.blue.100)" })

basically what you wrote but without having to import a function and interpolate it in the string

[altano]

Yeah, that would be perfect.

[astahmer]

related #1313