Support new syntax

[bramus]

As per tweet by @mirisuzanne:

⚠️ Existing Container Query demos are broken in the latest Chrome Canary. It's just a small syntax change:

🥳 We're adding the ability to query container styles, not just size size. So we have to be explicit about query type, eg:

size(min-width: 30em) and style(--card: large)

(Can't seem to find an issue/commit that mentions this ¹, so this tweet will have to do for now)

An example CQ would be:

@container size(width >= 30em) {
  …
}

Footnotes

1. https://github.com/w3c/csswg-drafts/issues/6393 should be the one, though. ↩

[surma]

According to the spec, that’s additional syntax, so I’m surprised things are breaking?

But yes, I might look into adding support for the (imho superior) (width > 50px) syntax. Actually, style(...) shouldn’t be too hard to do either.

[surma]

Correction, the spec now has the old syntax removed. I’ll leave support in the polyfill, tho.

[surma]

I added support for the size() syntax. I also added syntactic support for style() queries, but haven’t implemented them as there’s no good way to observe computed style changes on the platform afaict.

This is all published in v0.1.1. Closing this :)