Support for containerType CSS Prop Typing & Other Container Query Properties

[KoltonG]

Current behaviour:

When attempting to use the containerType property to use CSS Container Queries, I get a Typescript error and no typing support.

<div
  css={{
    containerType: "inline-size"
  }}
></div>

To reproduce:

1. Go to https://codesandbox.io/s/emotion-issue-template-forked-nqo492?file=/src/App.tsx
2. Attempt to cmd+click on the containerType property and see that there is no TS support. Note that on my local VS Code, Typescript red lines show and when running tsc it will fail.

Expected behavior:

The expected behaviour is that the css prop would have support for the containerType and other CSS Container Query properties and values.

Environment information:

• react version: 18.2.0
• @emotion/react version: 11.10.6

[Andarist]

We are using csstype package to get all of those types. Please report it there.

[KoltonG]

Thanks @Andarist for the reply! I've reported this issue with the csstype team and it seems that it will be a larger refactor to their repo than anticipated to support CSS Container Queries.

See frenic/csstype#175

In the mean time, I found that you can still write it without typing support and it will work and also use the @container syntax within ["@container ..."]: {} syntax.