@container rule being flagged as "unknownAtRules" when nested in SCSS

[dladeira]

I have the following code snippet in a NUXT project:

.item-icon {
    height: 1.6rem;

    &-sm {
        height: 1rem;
    }

    @container (max-height: 100px) {
        display: none;
    }
}
</style>

And @container is being flagged with Unknown 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

[marcoms]

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;
	}
}

[Jethus]

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).

[mdmoreau]

@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] */
  }
}

[aeschli]

Nested containers are only allowed in LESS and SCSS.

[mdmoreau]

@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