Support for named container queries about compiled HOT 2 OPEN

Thanks for the request. This seems reasonable, there's definitely a few real situations which are difficult to tackle without @container queries.

A couple of initial thoughts...

I like they way you've extracted the name to a variable - it leans into JS mechanisms to be import/exportable and cleaning up unused code (no-unused-vars).

The name wouldn't be internally needed in styled.createContainerToken() - we'd want to mint unique names so that they're isolated to avoid unintentional name conflicts. It might be useful for debugging though.

We will have an issue with minting these tokens because they'll:

• Need to be ordering consistent between SSR and client (the problem useId() solves)
• Need to be order independent (createContainerToken() will be called depending on the order of module execution) or they'll get different values each time

Overall, it's an a bit of unfortunately dynamic piece we'll have to tackle within a project which is largely build around making sure everything is static so it can be extracted into a single atomic stylesheet.

These are resolvable, but it'll require quite a bit of shift to how styles are authored to bring them into a safe context (inside the component so they can make use of useInsertionEffect / useId)

Potentially there's other options too.

Relay solves this with the global compilation checking for duplication, and enforces that you consume children in the parent. That could work here, but... one of the desires with container queries would also be to cover async cases - so we don't necessarily want to force the parent to import the child.

We could also use the type system to ensure you're explicitly connecting the parents and children here - and type imports would be stripped. TS unfortunately isn't great with nominal types, but I think it's a useful option to explore

from compiled.

One option is for a compilation step (maybe babel transform) to replace createContainerToken with that unique symbol (which could be generated from the relative package-name + file-path) and otherwise to use the input string with order.

Anyhow the input string (which has a similar intention in that code-sample to Symbol(name)) can be hashed as a fallback, where there is no transform.

from compiled.