swc-project
Improve parsing of CSS `@container`
Describe the feature
Container Query is a very important new CSS feature that browsers are actively implementing. Currently, Chrome 105+ and Safari 16+ are shipped.
- https://caniuse.com/css-container-queries
- Spec https://drafts.csswg.org/css-contain-3/#container-rule
- Disallow and/not/or from
https://chromium-review.googlesource.com/c/chromium/src/+/3698402
@supports ( container-type: size ) {
@container ( width <= 150px ) {
#inner {
background-color: skyblue;
}
}
}
Hm, but we already supported this, do you check this?
We only need to improve Containters units (new in spec) here
@alexander-akait It seems to parse into PreservedToken in many places.
https://swc-css.netlify.app/?code=eJxzSM7PK0nMzEstUtBQKM9MKclQsLFVMDQ1KKhQ0FSoruXS11IoK1bQ0udyyE1NyUzErgoA8PIUcw
@container ( width <= 150px ) {}
/* vs */
@media ( width <= 150px ) {}
That's great.
I have a table documenting the differences between the different parsers, please help to see if there are any errors or omissions.
Thank you for the table, @font-feature-values is already in my todo (today/tomorrow), can you provide link on
@scroll-timeline@position-fallback
Yes, see https://www.yuque.com/docs/share/593d42c7-14c7-4be4-8af2-fe15b1bdb889?#rNXU
password: rn5p
@scroll-timeline: seems to have been removed from the spec. MDN link@position-fallback: Chrome is in the process of implementing it. spec link
Both of these are very unstable. I think the current swc has no need to implement them.
Add a special case:
both of these are valid, with not being part of the condition rather than the name. If implementations are getting that wrong, we should at least create a WPT, and file bugs - and potentially clarify the spec. https://github.com/w3c/csswg-drafts/issues/7203#issuecomment-1183737711
@container not (width <= 500px ) { … }
@container name not (width <= 500px) { … }