Closed dladeira closed 5 months ago
This also applies when using native nested CSS which is now gaining adoption
.childEl {
/* Unknown at rule @containercss(unknownAtRules) */
@container parentContainer (min-width: 8rem) {
background: red;
}
}
/* No error */
@container parentContainer (min-width: 8rem) {
.childEl {
background: red;
}
}
Just commenting to say that I'm experiencing the same issue.
@mixin container-query($size) {
$query: map-get($breakpoints, $size);
@container (min-width: #{$query}) {
@content;
}
}
The code works as intended, just VS Code is flagging @container
with Unknown at rule @containerscss(unknownAtRules)
.
@aeschli should those updates be applied to the CSS parser as well? Getting some odd inconsistencies while using standard CSS:
@media (width > 64em) {
.test {
/* [full intellisense] */
}
}
@container (width > 64em) {
.test {
/* [full intellisense] */
}
}
.test {
@media (width > 64em) {
/* [full intellisense] */
}
}
.test {
@container (width > 64em) {
/* [no intellisense, unknown at rule] */
}
}
Nested containers are only allowed in LESS and SCSS.
@aeschli is that in regard to the current state of nesting in VS Code or the actual spec? Everything I can find reads that @container
can be nested similar to other at rules. It also works in each browser I've tested that supports nesting.
https://www.w3.org/TR/css-nesting-1/#conditionals https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Nesting_at-rules
I have the following code snippet in a NUXT project:
And
@container
is being flagged withUnknown at rule @containerscss(unknownAtRules)
. The expected behavior is nothing being flagged, as the code runs as expected.This problem only applies when the rule is nested