Fix at-rules combined with plain CSS nesting (#2725)

Closes #2322

Author: nex3

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 1.97.3
+
+* Fix a bug where nesting an at-rule within multiple style rules in plain CSS
+  could cause outer style rules to be omitted.
+
 ## 1.97.2
 
 * Additional fixes for implicit configuration when nested imports are involved.

lib/src/visitor/async_evaluate.dart

@@ -336,6 +336,26 @@ final class _EvaluateVisitor
   /// If this is empty, that indicates that the current module is not configured.
   var _configuration = const Configuration.empty();
 
+  /// Returns whether the current position in the output stylesheet uses plain
+  /// CSS nesting.
+  ///
+  /// If it does, it's safe to use other features of the CSS nesting spec
+  /// because the user has already opted into a narrower browser compatibility
+  /// window.
+  bool get _hasCssNesting {
+    ModifiableCssParentNode? parent = _styleRule;
+    while (true) {
+      switch (parent?.parent) {
+        case CssStyleRule _:
+          return true;
+        case var grandparent?:
+          parent = grandparent;
+        case null:
+          return false;
+      }
+    }
+  }
+
   /// Creates a new visitor.
   ///
   /// Most arguments are the same as those to [evaluateAsync].
@@ -1554,8 +1574,23 @@ final class _EvaluateVisitor
       _inUnknownAtRule = true;
     }
 
+    // If the user has already opted into plain CSS nesting, don't bother with
+    // any merging or bubbling; this rule is already only usable by browsers
+    // that support nesting natively anyway.
+    var rule = ModifiableCssAtRule(name, node.span, value: value);
+    if (_hasCssNesting) {
+      await _withParent(rule, () async {
+        for (var child in children) {
+          await child.accept(this);
+        }
+      }, scopeWhen: node.hasDeclarations);
+      _inUnknownAtRule = wasInUnknownAtRule;
+      _inKeyframes = wasInKeyframes;
+      return null;
+    }
+
     await _withParent(
-      ModifiableCssAtRule(name, node.span, value: value),
+      rule,
       () async {
         var styleRule = _styleRule;
         if (styleRule == null || _inKeyframes || name.value == 'font-face') {
@@ -2224,6 +2259,19 @@ final class _EvaluateVisitor
     }
 
     var queries = await _visitMediaQueries(node.query);
+
+    // If the user has already opted into plain CSS nesting, don't bother with
+    // any merging or bubbling; this rule is already only usable by browsers
+    // that support nesting natively anyway.
+    if (_hasCssNesting) {
+      await _withParent(ModifiableCssMediaRule(queries, node.span), () async {
+        for (var child in node.children) {
+          await child.accept(this);
+        }
+      }, scopeWhen: false);
+      return null;
+    }
+
     var mergedQueries = _mediaQueries.andThen(
       (mediaQueries) => _mergeMediaQueries(mediaQueries, queries),
     );
@@ -2366,12 +2414,12 @@ final class _EvaluateVisitor
       plainCss: _stylesheet.plainCss,
     );
 
-    var nest = switch (_styleRule) {
+    var merge = switch (_styleRule) {
       null => true,
       CssStyleRule(fromPlainCss: true) => false,
       _ => !(_stylesheet.plainCss && parsedSelector.containsParentSelector)
     };
-    if (nest) {
+    if (merge) {
       if (_stylesheet.plainCss) {
         for (var complex in parsedSelector.components) {
           if (complex.leadingCombinators
@@ -2412,7 +2460,7 @@ final class _EvaluateVisitor
           }
         });
       },
-      through: nest ? (node) => node is CssStyleRule : null,
+      through: merge ? (node) => node is CssStyleRule : null,
       scopeWhen: node.hasDeclarations,
     );
     _atRootExcludingStyleRule = oldAtRootExcludingStyleRule;
@@ -2490,12 +2538,23 @@ final class _EvaluateVisitor
       );
     }
 
-    var condition = CssValue(
-      await _visitSupportsCondition(node.condition),
-      node.condition.span,
-    );
+    var rule = ModifiableCssSupportsRule(
+        CssValue(
+          await _visitSupportsCondition(node.condition),
+          node.condition.span,
+        ),
+        node.span);
+    if (_hasCssNesting) {
+      await _withParent(rule, () async {
+        for (var child in node.children) {
+          await child.accept(this);
+        }
+      }, scopeWhen: node.hasDeclarations);
+      return null;
+    }
+
     await _withParent(
-      ModifiableCssSupportsRule(condition, node.span),
+      rule,
       () async {
         if (_styleRule case var styleRule?) {
           // If we're in a style rule, copy it into the supports rule so that
@@ -3988,8 +4047,23 @@ final class _EvaluateVisitor
       _inUnknownAtRule = true;
     }
 
+    // If the user has already opted into plain CSS nesting, don't bother with
+    // any merging or bubbling; this rule is already only usable by browsers
+    // that support nesting natively anyway.
+    var rule = ModifiableCssAtRule(node.name, node.span, value: node.value);
+    if (_hasCssNesting) {
+      await _withParent(rule, () async {
+        for (var child in node.children) {
+          await child.accept(this);
+        }
+      }, scopeWhen: false);
+      _inUnknownAtRule = wasInUnknownAtRule;
+      _inKeyframes = wasInKeyframes;
+      return;
+    }
+
     await _withParent(
-      ModifiableCssAtRule(node.name, node.span, value: node.value),
+      rule,
       () async {
         // We don't have to check for an unknown at-rule in a style rule here,
         // because the previous compilation has already bubbled the at-rule to the
@@ -4080,6 +4154,19 @@ final class _EvaluateVisitor
       );
     }
 
+    // If the user has already opted into plain CSS nesting, don't bother with
+    // any merging or bubbling; this rule is already only usable by browsers
+    // that support nesting natively anyway.
+    if (_hasCssNesting) {
+      await _withParent(ModifiableCssMediaRule(node.queries, node.span),
+          () async {
+        for (var child in node.children) {
+          await child.accept(this);
+        }
+      }, scopeWhen: false);
+      return;
+    }
+
     var mergedQueries = _mediaQueries.andThen(
       (mediaQueries) => _mergeMediaQueries(mediaQueries, node.queries),
     );
@@ -4141,12 +4228,12 @@ final class _EvaluateVisitor
     }
 
     var styleRule = _styleRule;
-    var nest = switch (_styleRule) {
+    var merge = switch (_styleRule) {
       null => true,
       CssStyleRule(fromPlainCss: true) => false,
       _ => !(node.fromPlainCss && node.selector.containsParentSelector)
     };
-    var originalSelector = nest
+    var originalSelector = merge
         ? node.selector.nestWithin(
             styleRule?.originalSelector,
             implicitParent: !_atRootExcludingStyleRule,
@@ -4171,7 +4258,7 @@ final class _EvaluateVisitor
           }
         });
       },
-      through: nest ? (node) => node is CssStyleRule : null,
+      through: merge ? (node) => node is CssStyleRule : null,
       scopeWhen: false,
     );
     _atRootExcludingStyleRule = oldAtRootExcludingStyleRule;
@@ -4198,8 +4285,18 @@ final class _EvaluateVisitor
       );
     }
 
+    var rule = ModifiableCssSupportsRule(node.condition, node.span);
+    if (_hasCssNesting) {
+      await _withParent(rule, () async {
+        for (var child in node.children) {
+          await child.accept(this);
+        }
+      }, scopeWhen: false);
+      return;
+    }
+
     await _withParent(
-      ModifiableCssSupportsRule(node.condition, node.span),
+      rule,
       () async {
         if (_styleRule case var styleRule?) {
           // If we're in a style rule, copy it into the supports rule so that
@@ -4429,7 +4526,7 @@ final class _EvaluateVisitor
     return result;
   }
 
-  /// If the current [_parent] is not the last child of its grandparent, makes a
+  /// If the current [_parent] is not the last child of its own parent, makes a
   /// new childless copy of it and sets [_parent] to that.
   ///
   /// Otherwise, leaves [_parent] as-is.