Add support for nesting in plain CSS (#2198)

See sass/sass#3524
Closes #1927

CHANGELOG.md

@@ -1,4 +1,7 @@
-## 1.72.1
+## 1.73.0
+
+* Add support for nesting in plain CSS files. This is not processed by Sass at
+  all; it's emitted exactly as-is in the CSS.
 
 * Add linux-riscv64 and windows-arm64 releases.
 

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

@@ -21,12 +21,13 @@ final class ModifiableCssStyleRule extends ModifiableCssParentNode
 
   final SelectorList originalSelector;
   final FileSpan span;
+  final bool fromPlainCss;
 
   /// Creates a new [ModifiableCssStyleRule].
   ///
   /// If [originalSelector] isn't passed, it defaults to [_selector.value].
   ModifiableCssStyleRule(this._selector, this.span,
-      {SelectorList? originalSelector})
+      {SelectorList? originalSelector, this.fromPlainCss = false})
       : originalSelector = originalSelector ?? _selector.value;
 
   T accept<T>(ModifiableCssVisitor<T> visitor) =>

lib/src/ast/css/style_rule.dart

@@ -2,6 +2,8 @@
 // MIT-style license that can be found in the LICENSE file or at
 // https://opensource.org/licenses/MIT.
 
+import 'package:meta/meta.dart';
+
 import '../selector.dart';
 import 'node.dart';
 
@@ -16,4 +18,10 @@ abstract interface class CssStyleRule implements CssParentNode {
 
   /// The selector for this rule, before any extensions were applied.
   SelectorList get originalSelector;
+
+  /// Whether this style rule was originally defined in a plain CSS stylesheet.
+  ///
+  /// :nodoc:
+  @internal
+  bool get fromPlainCss;
 }

lib/src/ast/selector/list.dart

@@ -57,9 +57,10 @@ final class SelectorList extends Selector {
 
   /// Parses a selector list from [contents].
   ///
-  /// If passed, [url] is the name of the file from which [contents] comes.
-  /// [allowParent] and [allowPlaceholder] control whether [ParentSelector]s or
-  /// [PlaceholderSelector]s are allowed in this selector, respectively.
+  /// If passed, [url] is the name of the file from which [contents] comes. If
+  /// [allowParent] is false, this doesn't allow [ParentSelector]s. If
+  /// [plainCss] is true, this parses the selector as plain CSS rather than
+  /// unresolved Sass.
   ///
   /// If passed, [interpolationMap] maps the text of [contents] back to the
   /// original location of the selector in the source file.
@@ -70,13 +71,13 @@ final class SelectorList extends Selector {
           Logger? logger,
           InterpolationMap? interpolationMap,
           bool allowParent = true,
-          bool allowPlaceholder = true}) =>
+          bool plainCss = false}) =>
       SelectorParser(contents,
               url: url,
               logger: logger,
               interpolationMap: interpolationMap,
               allowParent: allowParent,
-              allowPlaceholder: allowPlaceholder)
+              plainCss: plainCss)
           .parse();
 
   T accept<T>(SelectorVisitor<T> visitor) => visitor.visitSelectorList(this);
@@ -95,17 +96,24 @@ final class SelectorList extends Selector {
     return contents.isEmpty ? null : SelectorList(contents, span);
   }
 
-  /// Returns a new list with all [ParentSelector]s replaced with [parent].
+  /// Returns a new selector list that represents [this] nested within [parent].
   ///
-  /// If [implicitParent] is true, this treats [ComplexSelector]s that don't
-  /// contain an explicit [ParentSelector] as though they began with one.
+  /// By default, this replaces [ParentSelector]s in [this] with [parent]. If
+  /// [preserveParentSelectors] is true, this instead preserves those selectors
+  /// as parent selectors.
+  ///
+  /// If [implicitParent] is true, this prepends [parent] to any
+  /// [ComplexSelector]s in this that don't contain explicit [ParentSelector]s,
+  /// or to _all_ [ComplexSelector]s if [preserveParentSelectors] is true.
   ///
   /// The given [parent] may be `null`, indicating that this has no parents. If
   /// so, this list is returned as-is if it doesn't contain any explicit
-  /// [ParentSelector]s. If it does, this throws a [SassScriptException].
-  SelectorList resolveParentSelectors(SelectorList? parent,
-      {bool implicitParent = true}) {
+  /// [ParentSelector]s or if [preserveParentSelectors] is true. Otherwise, this
+  /// throws a [SassScriptException].
+  SelectorList nestWithin(SelectorList? parent,
+      {bool implicitParent = true, bool preserveParentSelectors = false}) {
     if (parent == null) {
+      if (preserveParentSelectors) return this;
       var parentSelector = accept(const _ParentSelectorVisitor());
       if (parentSelector == null) return this;
       throw SassException(
@@ -114,15 +122,15 @@ final class SelectorList extends Selector {
     }
 
     return SelectorList(flattenVertically(components.map((complex) {
-      if (!_containsParentSelector(complex)) {
+      if (preserveParentSelectors || !_containsParentSelector(complex)) {
         if (!implicitParent) return [complex];
         return parent.components.map((parentComplex) =>
             parentComplex.concatenate(complex, complex.span));
       }
 
       var newComplexes = <ComplexSelector>[];
       for (var component in complex.components) {
-        var resolved = _resolveParentSelectorsCompound(component, parent);
+        var resolved = _nestWithinCompound(component, parent);
         if (resolved == null) {
           if (newComplexes.isEmpty) {
             newComplexes.add(ComplexSelector(
@@ -165,7 +173,7 @@ final class SelectorList extends Selector {
   /// [ParentSelector]s replaced with [parent].
   ///
   /// Returns `null` if [component] doesn't contain any [ParentSelector]s.
-  Iterable<ComplexSelector>? _resolveParentSelectorsCompound(
+  Iterable<ComplexSelector>? _nestWithinCompound(
       ComplexSelectorComponent component, SelectorList parent) {
     var simples = component.selector.components;
     var containsSelectorPseudo = simples.any((simple) {
@@ -181,8 +189,8 @@ final class SelectorList extends Selector {
         ? simples.map((simple) => switch (simple) {
               PseudoSelector(:var selector?)
                   when _containsParentSelector(selector) =>
-                simple.withSelector(selector.resolveParentSelectors(parent,
-                    implicitParent: false)),
+                simple.withSelector(
+                    selector.nestWithin(parent, implicitParent: false)),
               _ => simple
             })
         : simples;
@@ -261,6 +269,8 @@ final class SelectorList extends Selector {
 
   /// Returns a copy of `this` with [combinators] added to the end of each
   /// complex selector in [components].
+  ///
+  /// @nodoc
   @internal
   SelectorList withAdditionalCombinators(
           List<CssValue<Combinator>> combinators) =>

lib/src/functions/selector.dart

@@ -52,7 +52,7 @@ final _nest = _function("nest", r"$selectors...", (arguments) {
         first = false;
         return result;
       })
-      .reduce((parent, child) => child.resolveParentSelectors(parent))
+      .reduce((parent, child) => child.nestWithin(parent))
       .asSassList;
 });
 
@@ -83,7 +83,7 @@ final _append = _function("append", r"$selectors...", (arguments) {
         ...rest
       ], span);
     }), span)
-        .resolveParentSelectors(parent);
+        .nestWithin(parent);
   }).asSassList;
 });
 

lib/src/parse/selector.dart

@@ -31,17 +31,24 @@ class SelectorParser extends Parser {
   /// Whether this parser allows the parent selector `&`.
   final bool _allowParent;
 
-  /// Whether this parser allows placeholder selectors beginning with `%`.
-  final bool _allowPlaceholder;
+  /// Whether to parse the selector as plain CSS.
+  final bool _plainCss;
 
+  /// Creates a parser that parses CSS selectors.
+  ///
+  /// If [allowParent] is `false`, this will throw a [SassFormatException] if
+  /// the selector includes the parent selector `&`.
+  ///
+  /// If [plainCss] is `true`, this will parse the selector as a plain CSS
+  /// selector rather than a Sass selector.
   SelectorParser(super.contents,
       {super.url,
       super.logger,
       super.interpolationMap,
       bool allowParent = true,
-      bool allowPlaceholder = true})
+      bool plainCss = false})
       : _allowParent = allowParent,
-        _allowPlaceholder = allowPlaceholder;
+        _plainCss = plainCss;
 
   SelectorList parse() {
     return wrapSpanFormatException(() {
@@ -165,7 +172,9 @@ class SelectorParser extends Parser {
       }
     }
 
-    if (lastCompound != null) {
+    if (combinators.isNotEmpty && _plainCss) {
+      scanner.error("expected selector.");
+    } else if (lastCompound != null) {
       components.add(ComplexSelectorComponent(
           lastCompound, combinators, spanFrom(componentStart)));
     } else if (combinators.isNotEmpty) {
@@ -184,8 +193,8 @@ class SelectorParser extends Parser {
     var start = scanner.state;
     var components = <SimpleSelector>[_simpleSelector()];
 
-    while (isSimpleSelectorStart(scanner.peekChar())) {
-      components.add(_simpleSelector(allowParent: false));
+    while (_isSimpleSelectorStart(scanner.peekChar())) {
+      components.add(_simpleSelector(allowParent: _plainCss));
     }
 
     return CompoundSelector(components, spanFrom(start));
@@ -207,8 +216,8 @@ class SelectorParser extends Parser {
         return _idSelector();
       case $percent:
         var selector = _placeholderSelector();
-        if (!_allowPlaceholder) {
-          error("Placeholder selectors aren't allowed here.",
+        if (_plainCss) {
+          error("Placeholder selectors aren't allowed in plain CSS.",
               scanner.spanFrom(start));
         }
         return selector;
@@ -340,6 +349,11 @@ class SelectorParser extends Parser {
     var start = scanner.state;
     scanner.expectChar($ampersand);
     var suffix = lookingAtIdentifierBody() ? identifierBody() : null;
+    if (_plainCss && suffix != null) {
+      scanner.error("Parent selectors can't have suffixes in plain CSS.",
+          position: start.position, length: scanner.position - start.position);
+    }
+
     return ParentSelector(spanFrom(start), suffix: suffix);
   }
 
@@ -457,4 +471,12 @@ class SelectorParser extends Parser {
           spanFrom(start));
     }
   }
+
+  // Returns whether [character] can start a simple selector in the middle of a
+  // compound selector.
+  bool _isSimpleSelectorStart(int? character) => switch (character) {
+        $asterisk || $lbracket || $dot || $hash || $percent || $colon => true,
+        $ampersand => _plainCss,
+        _ => false
+      };
 }

lib/src/parse/stylesheet.dart

@@ -324,10 +324,6 @@ abstract class StylesheetParser extends Parser {
   ///   parsed as a selector and never as a property with nested properties
   ///   beneath it.
   Statement _declarationOrStyleRule() {
-    if (plainCss && _inStyleRule && !_inUnknownAtRule) {
-      return _propertyOrVariableDeclaration();
-    }
-
     // The indented syntax allows a single backslash to distinguish a style rule
     // from old-style property syntax. We don't support old property syntax, but
     // we do support the backslash because it's easy to do.
@@ -400,10 +396,7 @@ abstract class StylesheetParser extends Parser {
     }
 
     var postColonWhitespace = rawText(whitespace);
-    if (lookingAtChildren()) {
-      return _withChildren(_declarationChild, start,
-          (children, span) => Declaration.nested(name, children, span));
-    }
+    if (_tryDeclarationChildren(name, start) case var nested?) return nested;
 
     midBuffer.write(postColonWhitespace);
     var couldBeSelector =
@@ -439,12 +432,8 @@ abstract class StylesheetParser extends Parser {
       return nameBuffer;
     }
 
-    if (lookingAtChildren()) {
-      return _withChildren(
-          _declarationChild,
-          start,
-          (children, span) =>
-              Declaration.nested(name, children, span, value: value));
+    if (_tryDeclarationChildren(name, start, value: value) case var nested?) {
+      return nested;
     } else {
       expectStatementSeparator();
       return Declaration(name, value, scanner.spanFrom(start));
@@ -549,31 +538,36 @@ abstract class StylesheetParser extends Parser {
     }
 
     whitespace();
-
-    if (lookingAtChildren()) {
-      if (plainCss) {
-        scanner.error("Nested declarations aren't allowed in plain CSS.");
-      }
-      return _withChildren(_declarationChild, start,
-          (children, span) => Declaration.nested(name, children, span));
-    }
+    if (_tryDeclarationChildren(name, start) case var nested?) return nested;
 
     var value = _expression();
-    if (lookingAtChildren()) {
-      if (plainCss) {
-        scanner.error("Nested declarations aren't allowed in plain CSS.");
-      }
-      return _withChildren(
-          _declarationChild,
-          start,
-          (children, span) =>
-              Declaration.nested(name, children, span, value: value));
+    if (_tryDeclarationChildren(name, start, value: value) case var nested?) {
+      return nested;
     } else {
       expectStatementSeparator();
       return Declaration(name, value, scanner.spanFrom(start));
     }
   }
 
+  /// Tries parsing nested children of a declaration whose [name] has already
+  /// been parsed, and returns `null` if it doesn't have any.
+  ///
+  /// If [value] is passed, it's used as the value of the peroperty without
+  /// nesting.
+  Declaration? _tryDeclarationChildren(
+      Interpolation name, LineScannerState start,
+      {Expression? value}) {
+    if (!lookingAtChildren()) return null;
+    if (plainCss) {
+      scanner.error("Nested declarations aren't allowed in plain CSS.");
+    }
+    return _withChildren(
+        _declarationChild,
+        start,
+        (children, span) =>
+            Declaration.nested(name, children, span, value: value));
+  }
+
   /// Consumes a statement that's allowed within a declaration.
   Statement _declarationChild() => scanner.peekChar() == $at
       ? _declarationAtRule()

lib/src/util/character.dart

@@ -92,16 +92,6 @@ int combineSurrogates(int highSurrogate, int lowSurrogate) =>
     // high/low surrogates.
     0x10000 + ((highSurrogate & 0x3FF) << 10) + (lowSurrogate & 0x3FF);
 
-// Returns whether [character] can start a simple selector other than a type
-// selector.
-bool isSimpleSelectorStart(int? character) =>
-    character == $asterisk ||
-    character == $lbracket ||
-    character == $dot ||
-    character == $hash ||
-    character == $percent ||
-    character == $colon;
-
 /// Returns whether [identifier] is module-private.
 ///
 /// Assumes [identifier] is a valid Sass identifier.