You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This makes the job of preprocessors slightly harder though, since it's a bit hard to decide where the boundary is between container-selector and element-selector.
With @media queries, a prerpocessor would lift the media query on the top level, wrapping everything else inside, which is however not the desired result for us:
// This is wrong!
@container (width >= 320px) {
.wrapper .Container .another-selector .Element {
...
}
}
Even if preprocessors do handle @container queries differently, they have no way of telling at which point the container selector begin and end.
Here preprocessors can assume that everything outside a @container query is the container selector, and needs to be put in between the query keyword and the conditions, and anything inside would be element / child selectors.
Resulting in:
// This is correct!
@container .wrapper .Container (width >= 320px) {
.another-selector .Element {
...
}
}
The text was updated successfully, but these errors were encountered:
Once this is done, the documentation needs to change to present the simpler syntax, and not the nested one.
The latter would also need more thorough documentation, since I think it's not highlighted that postcss-nested would need to be set up with the bubble option.
Otherwise it wouldn't process @container queries, and silently fail instead.
Based on the discussion here: https://twitter.com/innovati/status/946155332719599622
The new proposed syntax (that'll be mostly adopted by eqcss too if everything goes well):
(Whether the query's name will be @container or @element is not decided yet, so I'll support both for the time being.)
Where @container applies styles to elements inside the element, given by the selector.
The following should be possible too, although not BEM-like, and not encouraged by this particular project:
This makes the job of preprocessors slightly harder though, since it's a bit hard to decide where the boundary is between container-selector and element-selector.
Consider the following:
With @media queries, a prerpocessor would lift the media query on the top level, wrapping everything else inside, which is however not the desired result for us:
Even if preprocessors do handle @container queries differently, they have no way of telling at which point the container selector begin and end.
Maybe the following is the closest to a solution:
Here preprocessors can assume that everything outside a @container query is the container selector, and needs to be put in between the query keyword and the conditions, and anything inside would be element / child selectors.
Resulting in:
The text was updated successfully, but these errors were encountered: