Repository navigation
Omit "known removable" plain CSS at-rules #3900
Description
If you have a placeholder with a container query in it, when compiled the CSS will output an empty container query.
For example:
%wombat {
@media (width <= 100px) {
margin-bottom: 100px;
}
@container (width <= 100px) {
margin-bottom: 100px;
}
}will output this:
@container (width <= 100px) {}
Here it is in a playground:
https://sass-lang.com/playground/#eJwzNORSLc/PTUosUajmUgACh9zUlMxEBY3yzJSSDAUbWwVDA4OCCk2orIJCbmJRemaeblJ+SUl+rhVE1hosVwvRn5yfV5KYmZdaRJ4ZtQCnTSiP
Activity
nex3 commentedon Jul 18, 2024
This is more or less an expected consequence of the way Sass works. Sass doesn't know what a
@containerrule is; as far as it knows,@container (width <= 100px) {}has some special meaning that's different than the rule being omitted entirely. This is a design feature: it allows Sass to support new CSS rules without needing to constantly update its syntax as CSS evolves.Separately from that, Sass also has what we call "bubbling" behavior for nested at-rules. In order to support older browsers that don't support CSS nesting, Sass will "bubble up" any nested at rules, converting your stylesheet into:
After it does this, it will remove the placeholder selectors and you'll be left with the empty container rule.
All that said—I think it would be fine to have a list of "known removable" at-rule names that we know to be safe to remove if they have no children.
[-]Container queries within placeholders get outputted in compiled CSS[/-][+]Omit "known removable" plain CSS at-rules[/+]MrSuddenJoy commentedon Sep 28, 2024
nex3 commentedon Oct 1, 2024
I mean in the implementation of Sass.