mixed_decls False positive when using plain CSS @property {} CSS-variable declaration blocks

[JeanRemiDelteil]

With the following CSS:

:host {
  @property --lib-my-lib-background-color {
    syntax: '<color>';
    inherits: false;
    initial-value: #dddddd;
  }

  background-color: var(--lib-my-lib-background-color);
  font-family: monospace;
}

The compilation output the following warning

WARNING: ▲ [WARNING] Deprecation [plugin angular-sass]

    src/lib/my-lib.component.scss:14:2:
      14 │   --lib-my-lib-background-color: 1px;
         ╵   ^


  Sass's behavior for declarations that appear after nested
  rules will be changing to match the behavior specified by CSS in an upcoming
  version. To keep the existing behavior, move the declaration above the nested
  rule. To opt into the new behavior, wrap the declaration in `& {}`.
  
  More info: https://sass-lang.com/d/mixed-decls

However, the @Property {} block is native CSS and should not trigger this warning.
It's not a nested rule.

SASS: v1.77.6

[nex3]

Look at the output of your example:

:host {
  background-color: var(--lib-my-lib-background-color);
  font-family: monospace;
}
@property --lib-my-lib-background-color {
  :host {
    syntax: "<color>";
    inherits: false;
    initial-value: #dddddd;
  }
}

First of all, this isn't producing valid CSS in the first place. Because you're nesting @property within :host, Sass bubbles it up to the top-level and puts :host inside, which isn't legal.

Second, note that the relative order of the background-color/font-family declarations versus the @property rule are currently different in the output than they are in the input. That's what the deprecation warning is about. Sass avoids having intimate knowledge of CSS internals where possible—it doesn't keep track of whether @property could potentially have order-sensitive semantics. But it does know that it's changing the order and that's a risk, so it tells you as much.