Support for container-properties and @container rules

[threema-danilo]

Is your feature request related to a problem? Please describe.

When using container-properties and @container rules / at-queries, svelte-check complains about these properties not being known:

<style lang="scss">
  .profile-picture {
    container-type: size;
    container-name: resize-box;
    /* ... */

    @container resize-box (aspect-ratio > 1/1) {
      .inner {
        width: auto;
        height: 100%;
      }
    }
  }
</style>

svelte-check output:

ProfilePicture.svelte:41:5
Warn: Unknown property: 'container-type' (scss)
  .profile-picture {
    container-type: size;
    container-name: resize-box;

ProfilePicture.svelte:42:5
Warn: Unknown property: 'container-name' (scss)
    container-type: size;
    container-name: resize-box;
    grid-area: profile-picture;

ProfilePicture.svelte:65:5
Warn: Unknown at rule @container (scss)

    @container resize-box (aspect-ratio > 1/1) {
      .inner {

Describe the solution you'd like

I'm not sure whether this is the proper repository for such a feature request, but container queries are already usable in current browsers and it would be good if this wouldn't trigger a warning 🙂 https://caniuse.com/?search=%40container

Describe alternatives you've considered

I could disable all warnings for unknown properties and at-queries, but that might silence warnings for actual typos.

How important is this feature to you?

I currently have to disable fail-on-warnings in CI because of this.

[dummdidumm]

This isn't related to Svelte or preprocessing, this is related to the language tools / svelte-check. Those use the vscode-css-languageservice for intellisense inside the style tags, and that doesn't support container queries yet - see this upstream issue for more info. Closing in favor of that.

[threema-danilo]

Ah, thanks for linking to the proper issue! 👍🏻