• Proposal ([Interleaved Declarations] Add a proposal #3848)
• Update full spec ([Interleaved Declarations] Mark as accepted #3885)
• Deprecation
  • Dart Sass (Deprecated mixed declarations dart-sass#2267)
  • Tests (Update tests for interleaved declarations sass-spec#2002)
  • Website (Document the mixed declaration breaking change sass-site#1101)
• Breaking change
  • Dart Sass (Implement the new mixed declaration/comment/at-rule behavior dart-sass#2629)
  • Tests (Update specs for the new mixed declaration/comment/at-rule behavior sass-spec#2075)
  • Website (Updated documentation for mixed declarations sass-site#1452)

w3c/csswg-drafts#8738 changes the behavior of declarations interleaved with nested rules away from behavior that matches Sass's historic behavior (hoisting all properties to the original nested rule), and instead treats those behaviors as logically appearing after the nested rule. For example, the source:

a {
  color: red;
  @media screen {color: blue}
  color: green;
}

currently compiles to:

a {
  color: red;
  color: green;
}

@media screen {
  a {
    color: blue;
  }
}

but the CSS semantics are now equivalent to:

a {
  color: red;
}

@media screen {
  a {
    color: blue;
  }
}

a {
  color: green;
}

...which is meaningfully different. Reportedly, Chrome will be implementing the new semantics soon.

Although our approach to full compatibility with plain CSS nesting semantics is generally fairly cautious due to Sass's strong existing semantic grounding (see #3030), in this case the set of styles that will need to change is fairly narrow and a workaround is easy (wrapping the properties in & { ... }), so it's worth changing this behavior eagerly.