Is there a way to use @container queries in TSS?

[WalterWeidner]

It seems like doing something like:

      ['@container (width<1000px)']: {
        backgroundColor: 'orange',
      },

will work as long as I manually set container-type in the dev tools. However, as soon as I add containerType as a key to another "class" for a parent element the styles immediately break for the class that I add the @container query to.

[garronej]

Hello @WalterWeidner,

Have you tried:

      "& @container (width<1000px)": {
        backgroundColor: 'orange',
      },

?

[WalterWeidner]

This didn't seem to work at all for me. Even with manually adding container-type with dev tools.

[garronej]

Can you give me an example? ideally a reproduction repo, I can look it up

[WalterWeidner]

Yeah. I think this is more of an issue with the containerType property from what I am seeing:

      ['@container (width<1000px)']: {
        backgroundColor: 'orange',
      },

seems to work but I have to manually add container-type: size to a parent element in dev tools.

Here's an example forked from the TSS playground: https://stackblitz.com/edit/vercel-next-js-v93k7z?file=ui%2FTssLogo.tsx

You'll notice that the styles for "text" are broken. As soon as you remove containerType from the "square" styles it is fixed (though you still won't see the orange background color).

[garronej]

@WalterWeidner I found the issue!

In my example there's a typo that messes everything up!

There is an extra closing bracket,

If you remove it everything works as expected:

Thanks for reporting, took me an hour to figure out what was going on.

[WalterWeidner]

Wow! 🤦 I didn't notice that or even consider it being a problem with the other styles.

Thanks for digging into this!