Implement the new mixed declaration/comment/at-rule behavior (#2629)

Author: nex3

CHANGELOG.md

@@ -1,4 +1,8 @@
-## 1.91.1-dev
+## 1.92.0-dev
+
+* **Breaking change:** Emit declarations, childless at-rules, and comments in
+  the order they appear in the source even when they're interleaved with nested
+  rules. This obsoletes the `mixed-decls` deprecation.
 
 * Fix a bug where `@extend` rules loaded through a mixture of `@import` and
   `@use` rules could fail to apply correctly.

lib/src/ast/css/declaration.dart

@@ -2,13 +2,11 @@
 // MIT-style license that can be found in the LICENSE file or at
 // https://opensource.org/licenses/MIT.
 
-import 'package:meta/meta.dart';
 import 'package:source_span/source_span.dart';
 import 'package:stack_trace/stack_trace.dart';
 
 import '../../value.dart';
 import 'node.dart';
-import 'style_rule.dart';
 import 'value.dart';
 
 /// A plain CSS declaration (that is, a `name: value` pair).
@@ -19,16 +17,6 @@ abstract interface class CssDeclaration implements CssNode {
   /// The value of this declaration.
   CssValue<Value> get value;
 
-  /// A list of style rules that appeared before this declaration in the Sass
-  /// input but after it in the CSS output.
-  ///
-  /// These are used to emit mixed declaration deprecation warnings during
-  /// serialization, so we can check based on specificity whether the warnings
-  /// are really necessary without worrying about `@extend` potentially changing
-  /// things up.
-  @internal
-  List<CssStyleRule> get interleavedRules;
-
   /// The stack trace indicating where this node was created.
   ///
   /// This is used to emit interleaved declaration warnings, and is only set if

lib/src/ast/css/modifiable/declaration.dart

@@ -9,7 +9,6 @@ import '../../../value.dart';
 import '../../../visitor/interface/modifiable_css.dart';
 import '../declaration.dart';
 import '../value.dart';
-import '../style_rule.dart';
 import 'node.dart';
 
 /// A modifiable version of [CssDeclaration] for use in the evaluation step.
@@ -18,7 +17,6 @@ final class ModifiableCssDeclaration extends ModifiableCssNode
   final CssValue<String> name;
   final CssValue<Value> value;
   final bool parsedAsCustomProperty;
-  final List<CssStyleRule> interleavedRules;
   final Trace? trace;
   final FileSpan valueSpanForMap;
   final FileSpan span;
@@ -31,13 +29,9 @@ final class ModifiableCssDeclaration extends ModifiableCssNode
     this.value,
     this.span, {
     required this.parsedAsCustomProperty,
-    Iterable<CssStyleRule>? interleavedRules,
     this.trace,
     FileSpan? valueSpanForMap,
-  })  : interleavedRules = interleavedRules == null
-            ? const []
-            : List.unmodifiable(interleavedRules),
-        valueSpanForMap = valueSpanForMap ?? value.span {
+  }) : valueSpanForMap = valueSpanForMap ?? value.span {
     if (parsedAsCustomProperty) {
       if (!isCustomProperty) {
         throw ArgumentError(

lib/src/deprecation.dart

@@ -15,7 +15,7 @@ enum Deprecation {
   // DO NOT EDIT. This section was generated from the language repo.
   // See tool/grind/generate_deprecations.dart for details.
   //
-  // Checksum: 1c1efc2604729aea755453fefd1e8f56e100698e
+  // Checksum: 2a2a94a3dd8ab2f7e3880b24e8e7850d66998b33
 
   /// Deprecation for passing a string directly to meta.call().
   callString('call-string',
@@ -93,6 +93,7 @@ enum Deprecation {
   /// Deprecation for declarations after or between nested rules.
   mixedDecls('mixed-decls',
       deprecatedIn: '1.77.7',
+      obsoleteIn: '1.92.0',
       description: 'Declarations after or between nested rules.'),
 
   /// Deprecation for meta.feature-exists
@@ -189,9 +190,10 @@ enum Deprecation {
   Version? get obsoleteIn => _obsoleteIn?.andThen(Version.parse);
 
   /// Constructs a regular deprecation.
-  const Deprecation(this.id, {required String? deprecatedIn, this.description})
+  const Deprecation(this.id,
+      {required String? deprecatedIn, this.description, String? obsoleteIn})
       : _deprecatedIn = deprecatedIn,
-        _obsoleteIn = null,
+        _obsoleteIn = obsoleteIn,
         isFuture = false;
 
   /// Constructs a future deprecation.

lib/src/js/deprecations.dart

@@ -42,7 +42,7 @@ final Map<String, Deprecation?> deprecations = {
             })(),
         description: deprecation.description,
         deprecatedIn: deprecation.deprecatedIn,
-        obsoleteIn: deprecation.deprecatedIn,
+        obsoleteIn: deprecation.obsoleteIn,
       ),
 };
 

lib/src/visitor/async_evaluate.dart

@@ -1342,46 +1342,6 @@ final class _EvaluateVisitor
       );
     }
 
-    var siblings = _parent.parent!.children;
-    var interleavedRules = <CssStyleRule>[];
-    if (siblings.last != _parent &&
-        // Reproduce this condition from [_warn] so that we don't add anything to
-        // [interleavedRules] for declarations in dependencies.
-        !(_quietDeps && _inDependency)) {
-      loop:
-      for (var sibling in siblings.skip(siblings.indexOf(_parent) + 1)) {
-        switch (sibling) {
-          case CssComment():
-            continue loop;
-
-          case CssStyleRule rule:
-            interleavedRules.add(rule);
-
-          case _:
-            // Always warn for siblings that aren't style rules, because they
-            // add no specificity and they're nested in the same parent as this
-            // declaration.
-            _warn(
-              "Sass's behavior for declarations that appear after nested\n"
-              "rules will be changing to match the behavior specified by CSS "
-              "in an upcoming\n"
-              "version. To keep the existing behavior, move the declaration "
-              "above the nested\n"
-              "rule. To opt into the new behavior, wrap the declaration in "
-              "`& {}`.\n"
-              "\n"
-              "More info: https://sass-lang.com/d/mixed-decls",
-              MultiSpan(node.span, 'declaration', {
-                sibling.span: 'nested rule',
-              }),
-              Deprecation.mixedDecls,
-            );
-            interleavedRules.clear();
-            break;
-        }
-      }
-    }
-
     var name = await _interpolationToValue(node.name, warnForColor: true);
     if (_declarationName case var declarationName?) {
       name = CssValue("$declarationName-${name.value}", name.span);
@@ -1395,14 +1355,14 @@ final class _EvaluateVisitor
           _isEmptyList(value) ||
           // Custom properties are allowed to have empty values, per spec.
           name.value.startsWith('--')) {
+        _copyParentAfterSibling();
         _parent.addChild(
           ModifiableCssDeclaration(
             name,
             CssValue(value, expression.span),
             node.span,
             parsedAsCustomProperty: node.isCustomProperty,
-            interleavedRules: interleavedRules,
-            trace: interleavedRules.isEmpty ? null : _stackTrace(node.span),
+            trace: _stackTrace(node.span),
             valueSpanForMap:
                 _sourceMap ? node.value.andThen(_expressionNode)?.span : null,
           ),
@@ -1565,6 +1525,7 @@ final class _EvaluateVisitor
 
     var children = node.children;
     if (children == null) {
+      _copyParentAfterSibling();
       _parent.addChild(
         ModifiableCssAtRule(name, node.span, childless: true, value: value),
       );
@@ -2081,6 +2042,7 @@ final class _EvaluateVisitor
     );
 
     if (_parent != _root) {
+      _copyParentAfterSibling();
       _parent.addChild(node);
     } else if (_endOfImports == _root.children.length) {
       _root.addChild(node);
@@ -2231,6 +2193,8 @@ final class _EvaluateVisitor
     var text = await _performInterpolation(node.text);
     // Indented syntax doesn't require */
     if (!text.endsWith("*/")) text += " */";
+
+    _copyParentAfterSibling();
     _parent.addChild(ModifiableCssComment(text, node.span));
     return null;
   }
@@ -3920,6 +3884,7 @@ final class _EvaluateVisitor
     }
 
     if (node.isChildless) {
+      _copyParentAfterSibling();
       _parent.addChild(
         ModifiableCssAtRule(
           node.name,
@@ -3966,10 +3931,12 @@ final class _EvaluateVisitor
       _endOfImports++;
     }
 
+    _copyParentAfterSibling();
     _parent.addChild(ModifiableCssComment(node.text, node.span));
   }
 
   Future<void> visitCssDeclaration(CssDeclaration node) async {
+    _copyParentAfterSibling();
     _parent.addChild(
       ModifiableCssDeclaration(
         node.name,
@@ -3991,6 +3958,7 @@ final class _EvaluateVisitor
       modifiers: node.modifiers,
     );
     if (_parent != _root) {
+      _copyParentAfterSibling();
       _parent.addChild(modifiableNode);
     } else if (_endOfImports == _root.children.length) {
       _root.addChild(modifiableNode);
@@ -4377,6 +4345,19 @@ final class _EvaluateVisitor
     return result;
   }
 
+  /// If the current [_parent] is not the last child of its grandparent, makes a
+  /// new childless copy of it and sets [_parent] to that.
+  ///
+  /// Otherwise, leaves [_parent] as-is.
+  void _copyParentAfterSibling() {
+    if (_parent.parent case var grandparent?
+        when grandparent.children.last != _parent) {
+      var newParent = _parent.copyWithoutChildren();
+      grandparent.addChild(newParent);
+      _parent = newParent;
+    }
+  }
+
   /// Adds [node] as a child of the current parent.
   ///
   /// If [through] is passed, [node] is added as a child of the first parent for

lib/src/visitor/evaluate.dart

@@ -5,7 +5,7 @@
 // DO NOT EDIT. This file was generated from async_evaluate.dart.
 // See tool/grind/synchronize.dart for details.
 //
-// Checksum: 70d926fd13a7d35cd805bf7053f073cc123b260f
+// Checksum: 100082e5b65dc126357c027e76f34ae97b3f9e48
 //
 // ignore_for_file: unused_import
 
@@ -1350,46 +1350,6 @@ final class _EvaluateVisitor
       );
     }
 
-    var siblings = _parent.parent!.children;
-    var interleavedRules = <CssStyleRule>[];
-    if (siblings.last != _parent &&
-        // Reproduce this condition from [_warn] so that we don't add anything to
-        // [interleavedRules] for declarations in dependencies.
-        !(_quietDeps && _inDependency)) {
-      loop:
-      for (var sibling in siblings.skip(siblings.indexOf(_parent) + 1)) {
-        switch (sibling) {
-          case CssComment():
-            continue loop;
-
-          case CssStyleRule rule:
-            interleavedRules.add(rule);
-
-          case _:
-            // Always warn for siblings that aren't style rules, because they
-            // add no specificity and they're nested in the same parent as this
-            // declaration.
-            _warn(
-              "Sass's behavior for declarations that appear after nested\n"
-              "rules will be changing to match the behavior specified by CSS "
-              "in an upcoming\n"
-              "version. To keep the existing behavior, move the declaration "
-              "above the nested\n"
-              "rule. To opt into the new behavior, wrap the declaration in "
-              "`& {}`.\n"
-              "\n"
-              "More info: https://sass-lang.com/d/mixed-decls",
-              MultiSpan(node.span, 'declaration', {
-                sibling.span: 'nested rule',
-              }),
-              Deprecation.mixedDecls,
-            );
-            interleavedRules.clear();
-            break;
-        }
-      }
-    }
-
     var name = _interpolationToValue(node.name, warnForColor: true);
     if (_declarationName case var declarationName?) {
       name = CssValue("$declarationName-${name.value}", name.span);
@@ -1403,14 +1363,14 @@ final class _EvaluateVisitor
           _isEmptyList(value) ||
           // Custom properties are allowed to have empty values, per spec.
           name.value.startsWith('--')) {
+        _copyParentAfterSibling();
         _parent.addChild(
           ModifiableCssDeclaration(
             name,
             CssValue(value, expression.span),
             node.span,
             parsedAsCustomProperty: node.isCustomProperty,
-            interleavedRules: interleavedRules,
-            trace: interleavedRules.isEmpty ? null : _stackTrace(node.span),
+            trace: _stackTrace(node.span),
             valueSpanForMap:
                 _sourceMap ? node.value.andThen(_expressionNode)?.span : null,
           ),
@@ -1573,6 +1533,7 @@ final class _EvaluateVisitor
 
     var children = node.children;
     if (children == null) {
+      _copyParentAfterSibling();
       _parent.addChild(
         ModifiableCssAtRule(name, node.span, childless: true, value: value),
       );
@@ -2089,6 +2050,7 @@ final class _EvaluateVisitor
     );
 
     if (_parent != _root) {
+      _copyParentAfterSibling();
       _parent.addChild(node);
     } else if (_endOfImports == _root.children.length) {
       _root.addChild(node);
@@ -2238,6 +2200,8 @@ final class _EvaluateVisitor
     var text = _performInterpolation(node.text);
     // Indented syntax doesn't require */
     if (!text.endsWith("*/")) text += " */";
+
+    _copyParentAfterSibling();
     _parent.addChild(ModifiableCssComment(text, node.span));
     return null;
   }
@@ -3921,6 +3885,7 @@ final class _EvaluateVisitor
     }
 
     if (node.isChildless) {
+      _copyParentAfterSibling();
       _parent.addChild(
         ModifiableCssAtRule(
           node.name,
@@ -3967,10 +3932,12 @@ final class _EvaluateVisitor
       _endOfImports++;
     }
 
+    _copyParentAfterSibling();
     _parent.addChild(ModifiableCssComment(node.text, node.span));
   }
 
   void visitCssDeclaration(CssDeclaration node) {
+    _copyParentAfterSibling();
     _parent.addChild(
       ModifiableCssDeclaration(
         node.name,
@@ -3992,6 +3959,7 @@ final class _EvaluateVisitor
       modifiers: node.modifiers,
     );
     if (_parent != _root) {
+      _copyParentAfterSibling();
       _parent.addChild(modifiableNode);
     } else if (_endOfImports == _root.children.length) {
       _root.addChild(modifiableNode);
@@ -4378,6 +4346,19 @@ final class _EvaluateVisitor
     return result;
   }
 
+  /// If the current [_parent] is not the last child of its grandparent, makes a
+  /// new childless copy of it and sets [_parent] to that.
+  ///
+  /// Otherwise, leaves [_parent] as-is.
+  void _copyParentAfterSibling() {
+    if (_parent.parent case var grandparent?
+        when grandparent.children.last != _parent) {
+      var newParent = _parent.copyWithoutChildren();
+      grandparent.addChild(newParent);
+      _parent = newParent;
+    }
+  }
+
   /// Adds [node] as a child of the current parent.
   ///
   /// If [through] is passed, [node] is added as a child of the first parent for