Make interleaved declaration semantics CSS-compatible

[nex3]

• Proposal ([Interleaved Declarations] Add a proposal #3848)
• Deprecation
  • Dart Sass
  • Tests
  • Website
• Breaking change
  • Dart Sass
  • Tests
  • Website

---

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.

[nex3]

The proposal has landed. Since it does involve a deprecation, I'm going to give it a month for public comment.