Update nesting implementation for new spec

Fixes #806, fixes #941, fixes #781, fixes #612

The spec now allows mixing declarations and rules (https://drafts.csswg.org/css-nesting/#mixing), and nesting declarations in at-rules when the parent style rule has pseudo elements (https://drafts.csswg.org/css-nesting/#nested-declarations-rule).

Author: devongovett

napi/src/transformer.rs

@@ -311,6 +311,7 @@ impl<'i> Visitor<'i, AtRule<'i>> for JsVisitor {
             CssRule::Scope(..) => "scope",
             CssRule::MozDocument(..) => "moz-document",
             CssRule::Nesting(..) => "nesting",
+            CssRule::NestedDeclarations(..) => "nested-declarations",
             CssRule::Viewport(..) => "viewport",
             CssRule::StartingStyle(..) => "starting-style",
             CssRule::ViewTransition(..) => "view-transition",

node/ast.d.ts

@@ -61,6 +61,10 @@ export type Rule<D = Declaration, M = MediaQuery> = | {
     type: "nesting";
     value: NestingRule<D, M>;
   }
+| {
+    type: "nested-declarations";
+    value: NestedDeclarationsRule<D>;
+  }
 | {
     type: "viewport";
     value: ViewportRule<D>;
@@ -9523,6 +9527,19 @@ export interface NestingRule<D = Declaration, M = MediaQuery> {
    */
   style: StyleRule<D, M>;
 }
+/**
+ * A [nested declarations](https://drafts.csswg.org/css-nesting/#nested-declarations-rule) rule.
+ */
+export interface NestedDeclarationsRule<D = Declaration> {
+  /**
+   * The style rule that defines the selector and declarations for the `@nest` rule.
+   */
+  declarations: DeclarationBlock<D>;
+  /**
+   * The location of the rule in the source file.
+   */
+  loc: Location2;
+}
 /**
  * A [@viewport](https://drafts.csswg.org/css-device-adapt/#atviewport-rule) rule.
  */

src/declaration.rs

@@ -4,7 +4,7 @@ use std::borrow::Cow;
 use std::ops::Range;
 
 use crate::context::{DeclarationContext, PropertyHandlerContext};
-use crate::error::{ParserError, PrinterError};
+use crate::error::{ParserError, PrinterError, PrinterErrorKind};
 use crate::parser::ParserOptions;
 use crate::printer::Printer;
 use crate::properties::box_shadow::BoxShadowHandler;
@@ -34,13 +34,15 @@ use crate::properties::{
   ui::ColorSchemeHandler,
 };
 use crate::properties::{Property, PropertyId};
+use crate::selector::SelectorList;
 use crate::traits::{PropertyHandler, ToCss};
 use crate::values::ident::DashedIdent;
 use crate::values::string::CowArcStr;
 #[cfg(feature = "visitor")]
 use crate::visitor::Visit;
 use cssparser::*;
 use indexmap::IndexMap;
+use smallvec::SmallVec;
 
 /// A CSS declaration block.
 ///
@@ -157,29 +159,78 @@ impl<'i> DeclarationBlock<'i> {
     dest.whitespace()?;
     dest.write_char('{')?;
     dest.indent();
+    dest.newline()?;
+
+    self.to_css_declarations(dest, false, &parcel_selectors::SelectorList(SmallVec::new()), 0)?;
+
+    dest.dedent();
+    dest.newline()?;
+    dest.write_char('}')
+  }
 
+  pub(crate) fn has_printable_declarations(&self) -> bool {
+    if self.len() > 1 {
+      return true;
+    }
+
+    if self.declarations.len() == 1 {
+      !matches!(self.declarations[0], crate::properties::Property::Composes(_))
+    } else if self.important_declarations.len() == 1 {
+      !matches!(self.important_declarations[0], crate::properties::Property::Composes(_))
+    } else {
+      false
+    }
+  }
+
+  /// Writes the declarations to a CSS declaration block.
+  pub fn to_css_declarations<W>(
+    &self,
+    dest: &mut Printer<W>,
+    has_nested_rules: bool,
+    selectors: &SelectorList,
+    source_index: u32,
+  ) -> Result<(), PrinterError>
+  where
+    W: std::fmt::Write,
+  {
     let mut i = 0;
     let len = self.len();
 
     macro_rules! write {
       ($decls: expr, $important: literal) => {
         for decl in &$decls {
-          dest.newline()?;
+          // The CSS modules `composes` property is handled specially, and omitted during printing.
+          // We need to add the classes it references to the list for the selectors in this rule.
+          if let crate::properties::Property::Composes(composes) = &decl {
+            if dest.is_nested() && dest.css_module.is_some() {
+              return Err(dest.error(PrinterErrorKind::InvalidComposesNesting, composes.loc));
+            }
+
+            if let Some(css_module) = &mut dest.css_module {
+              css_module
+                .handle_composes(&selectors, &composes, source_index)
+                .map_err(|e| dest.error(e, composes.loc))?;
+              continue;
+            }
+          }
+
+          if i > 0 {
+            dest.newline()?;
+          }
+
           decl.to_css(dest, $important)?;
-          if i != len - 1 || !dest.minify {
+          if i != len - 1 || !dest.minify || has_nested_rules {
             dest.write_char(';')?;
           }
+
           i += 1;
         }
       };
     }
 
     write!(self.declarations, false);
     write!(self.important_declarations, true);
-
-    dest.dedent();
-    dest.newline()?;
-    dest.write_char('}')
+    Ok(())
   }
 }
 

src/lib.rs

@@ -24052,13 +24052,13 @@ mod tests {
         }
       "#,
       indoc! {r#"
-        .foo {
-          color: red;
-        }
-
         .foo .bar {
           color: #00f;
         }
+
+        .foo {
+          color: red;
+        }
       "#},
     );
 
@@ -24072,12 +24072,16 @@ mod tests {
       "#,
       indoc! {r#"
         article {
-          color: red;
+          color: green;
         }
 
         article {
           color: #00f;
         }
+
+        article {
+          color: red;
+        }
       "#},
     );
 
@@ -24190,6 +24194,29 @@ mod tests {
         }
       "#},
     );
+    nesting_test(
+      r#"
+      .foo {
+        &::before, &::after {
+          background: blue;
+          @media screen {
+            background: orange;
+          }
+        }
+      }
+      "#,
+      indoc! {r#"
+      .foo:before, .foo:after {
+        background: #00f;
+      }
+
+      @media screen {
+        .foo:before, .foo:after {
+          background: orange;
+        }
+      }
+      "#},
+    );
 
     nesting_test_no_targets(
       r#"
@@ -25225,9 +25252,7 @@ mod tests {
       indoc! {r#"
       .EgL3uq_box2 {
         @container EgL3uq_main (width >= 0) {
-          & {
-            background-color: #90ee90;
-          }
+          background-color: #90ee90;
         }
       }
     "#},
@@ -25251,9 +25276,7 @@ mod tests {
       indoc! {r#"
       .EgL3uq_box2 {
         @container main (width >= 0) {
-          & {
-            background-color: #90ee90;
-          }
+          background-color: #90ee90;
         }
       }
     "#},
@@ -25460,6 +25483,56 @@ mod tests {
     test_project_root("/foo", "/foo/test.css", "EgL3uq");
     test_project_root("/foo/bar", "/foo/bar/baz/test.css", "xLEkNW");
     test_project_root("/foo", "/foo/baz/test.css", "xLEkNW");
+
+    let mut stylesheet = StyleSheet::parse(
+      r#"
+      .foo {
+        color: red;
+        .bar {
+          color: green;
+        }
+        composes: test from "foo.css";
+      }
+      "#,
+      ParserOptions {
+        filename: "test.css".into(),
+        css_modules: Some(Default::default()),
+        ..ParserOptions::default()
+      },
+    )
+    .unwrap();
+    stylesheet.minify(MinifyOptions::default()).unwrap();
+    let res = stylesheet
+      .to_css(PrinterOptions {
+        targets: Browsers {
+          chrome: Some(95 << 16),
+          ..Browsers::default()
+        }
+        .into(),
+        ..Default::default()
+      })
+      .unwrap();
+    assert_eq!(
+      res.code,
+      indoc! {r#"
+    .EgL3uq_foo {
+      color: red;
+    }
+
+    .EgL3uq_foo .EgL3uq_bar {
+      color: green;
+    }
+
+
+    "#}
+    );
+    assert_eq!(
+      res.exports.unwrap(),
+      map! {
+        "foo" => "EgL3uq_foo" "test" from "foo.css",
+        "bar" => "EgL3uq_bar"
+      }
+    );
   }
 
   #[test]
@@ -26832,7 +26905,7 @@ mod tests {
         }
       }
       "#,
-      ".foo{@scope(.bar){&{color:#ff0}}}",
+      ".foo{@scope(.bar){color:#ff0}}",
     );
     nesting_test(
       r#"
@@ -26844,9 +26917,7 @@ mod tests {
       "#,
       indoc! {r#"
         @scope (.bar) {
-          :scope {
-            color: #ff0;
-          }
+          color: #ff0;
         }
       "#},
     );