feat(css_formatter): format scope and layer at-rules (#1346)

crates/biome_css_formatter/src/css/auxiliary/layer_declaration.rs

@@ -1,10 +1,20 @@
 use crate::prelude::*;
-use biome_css_syntax::CssLayerDeclaration;
-use biome_rowan::AstNode;
+use biome_css_syntax::{CssLayerDeclaration, CssLayerDeclarationFields};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssLayerDeclaration;
 impl FormatNodeRule<CssLayerDeclaration> for FormatCssLayerDeclaration {
     fn fmt_fields(&self, node: &CssLayerDeclaration, f: &mut CssFormatter) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let CssLayerDeclarationFields { references, block } = node.as_fields();
+
+        write!(
+            f,
+            [
+                group(&indent(&references.format())),
+                space(),
+                block.format()
+            ]
+        )
     }
 }

crates/biome_css_formatter/src/css/auxiliary/layer_reference.rs

@@ -1,10 +1,22 @@
 use crate::prelude::*;
-use biome_css_syntax::CssLayerReference;
-use biome_rowan::AstNode;
+use biome_css_syntax::{CssLayerReference, CssLayerReferenceFields};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssLayerReference;
 impl FormatNodeRule<CssLayerReference> for FormatCssLayerReference {
     fn fmt_fields(&self, node: &CssLayerReference, f: &mut CssFormatter) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let CssLayerReferenceFields {
+            references,
+            semicolon_token,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [
+                group(&indent(&references.format())),
+                semicolon_token.format()
+            ]
+        )
     }
 }

crates/biome_css_formatter/src/css/auxiliary/scope_edge.rs

@@ -1,10 +1,24 @@
 use crate::prelude::*;
-use biome_css_syntax::CssScopeEdge;
-use biome_rowan::AstNode;
+use biome_css_syntax::{CssScopeEdge, CssScopeEdgeFields};
+use biome_formatter::{format_args, write};
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssScopeEdge;
 impl FormatNodeRule<CssScopeEdge> for FormatCssScopeEdge {
     fn fmt_fields(&self, node: &CssScopeEdge, f: &mut CssFormatter) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let CssScopeEdgeFields {
+            l_paren_token,
+            selectors,
+            r_paren_token,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [group(&format_args![
+                l_paren_token.format(),
+                soft_block_indent(&selectors.format()),
+                r_paren_token.format()
+            ])]
+        )
     }
 }

crates/biome_css_formatter/src/css/auxiliary/scope_range_end.rs

@@ -1,10 +1,13 @@
 use crate::prelude::*;
-use biome_css_syntax::CssScopeRangeEnd;
-use biome_rowan::AstNode;
+use biome_css_syntax::{CssScopeRangeEnd, CssScopeRangeEndFields};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssScopeRangeEnd;
 impl FormatNodeRule<CssScopeRangeEnd> for FormatCssScopeRangeEnd {
     fn fmt_fields(&self, node: &CssScopeRangeEnd, f: &mut CssFormatter) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let CssScopeRangeEndFields { to_token, end } = node.as_fields();
+
+        write!(f, [to_token.format(), space(), end.format()])
     }
 }

crates/biome_css_formatter/src/css/auxiliary/scope_range_interval.rs

@@ -1,10 +1,26 @@
 use crate::prelude::*;
-use biome_css_syntax::CssScopeRangeInterval;
-use biome_rowan::AstNode;
+use biome_css_syntax::{CssScopeRangeInterval, CssScopeRangeIntervalFields};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssScopeRangeInterval;
 impl FormatNodeRule<CssScopeRangeInterval> for FormatCssScopeRangeInterval {
     fn fmt_fields(&self, node: &CssScopeRangeInterval, f: &mut CssFormatter) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let CssScopeRangeIntervalFields {
+            start,
+            to_token,
+            end,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [
+                start.format(),
+                space(),
+                to_token.format(),
+                space(),
+                end.format()
+            ]
+        )
     }
 }

crates/biome_css_formatter/src/css/auxiliary/scope_range_start.rs

@@ -1,10 +1,13 @@
 use crate::prelude::*;
-use biome_css_syntax::CssScopeRangeStart;
-use biome_rowan::AstNode;
+use biome_css_syntax::{CssScopeRangeStart, CssScopeRangeStartFields};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssScopeRangeStart;
 impl FormatNodeRule<CssScopeRangeStart> for FormatCssScopeRangeStart {
     fn fmt_fields(&self, node: &CssScopeRangeStart, f: &mut CssFormatter) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let CssScopeRangeStartFields { start } = node.as_fields();
+
+        write!(f, [start.format()])
     }
 }

crates/biome_css_formatter/src/css/lists/layer_name_list.rs

@@ -5,6 +5,6 @@ pub(crate) struct FormatCssLayerNameList;
 impl FormatRule<CssLayerNameList> for FormatCssLayerNameList {
     type Context = CssFormatContext;
     fn fmt(&self, node: &CssLayerNameList, f: &mut CssFormatter) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        f.join().entries(node.format_separated(".")).finish()
     }
 }

crates/biome_css_formatter/src/css/lists/layer_reference_list.rs

@@ -5,6 +5,16 @@ pub(crate) struct FormatCssLayerReferenceList;
 impl FormatRule<CssLayerReferenceList> for FormatCssLayerReferenceList {
     type Context = CssFormatContext;
     fn fmt(&self, node: &CssLayerReferenceList, f: &mut CssFormatter) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        // Using `join_with` instead of `join_nodes_with_soft_line` to avoid
+        // preserving empty lines from the input source. See the comment in
+        // [FormatCssSelectorList] for more information.
+        let separator = soft_line_break_or_space();
+        let mut joiner = f.join_with(&separator);
+
+        for formatted in node.format_separated(",") {
+            joiner.entry(&formatted);
+        }
+
+        joiner.finish()
     }
 }

crates/biome_css_formatter/src/css/statements/layer_at_rule.rs

@@ -1,10 +1,13 @@
 use crate::prelude::*;
-use biome_css_syntax::CssLayerAtRule;
-use biome_rowan::AstNode;
+use biome_css_syntax::{CssLayerAtRule, CssLayerAtRuleFields};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssLayerAtRule;
 impl FormatNodeRule<CssLayerAtRule> for FormatCssLayerAtRule {
     fn fmt_fields(&self, node: &CssLayerAtRule, f: &mut CssFormatter) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let CssLayerAtRuleFields { layer_token, layer } = node.as_fields();
+
+        write!(f, [layer_token.format(), space(), layer.format()])
     }
 }

crates/biome_css_formatter/src/css/statements/scope_at_rule.rs

@@ -1,10 +1,26 @@
 use crate::prelude::*;
-use biome_css_syntax::CssScopeAtRule;
-use biome_rowan::AstNode;
+use biome_css_syntax::{CssScopeAtRule, CssScopeAtRuleFields};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssScopeAtRule;
 impl FormatNodeRule<CssScopeAtRule> for FormatCssScopeAtRule {
     fn fmt_fields(&self, node: &CssScopeAtRule, f: &mut CssFormatter) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let CssScopeAtRuleFields {
+            scope_token,
+            range,
+            block,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [
+                scope_token.format(),
+                space(),
+                range.format(),
+                space(),
+                block.format()
+            ]
+        )
     }
 }

crates/biome_css_formatter/tests/quick_test.rs

@@ -8,23 +8,14 @@ mod language {
     include!("language.rs");
 }
 
-#[ignore]
+// #[ignore]
 #[test]
 // use this test check if your snippet prints as you wish, without using a snapshot
 fn quick_test() {
     let src = r#"
-    div {
-        color: rgba(255, 255, 255, 1);
-        color:   rgba   (
-            0,
-            1,
-            255,
-            1
-        );
-        color: arbitrary(really long list, of complex parameter values, each one on its own line);
-        color: more-arbitrary(just, has, lots, of, individual, parameters, breaking, over, lines);
-        color: arbitrary(one really long parameter value that itself will break over multiple lines and fill together);
-    }
+    @layer framework, override   ,    foo   , bar.baz  ;
+@layer bar.baz  ;
+
 "#;
     let parse = parse_css(src, CssParserOptions::default());
     println!("{:#?}", parse.syntax());

crates/biome_css_formatter/tests/specs/css/atrule/layer.css

@@ -0,0 +1,68 @@
+@layer framework, override   ,    foo   , bar.baz  ;
+@layer bar.baz  ;
+
+@layer override{
+	@keyframes slide-left {
+		from { translate: 0; }
+		to { translate: -100% 0; }
+	}
+}
+
+@layer
+framework
+{
+	@keyframes slide-left {
+		from { margin-left: 0; }
+		to { margin-left: -100%; }
+	}
+}
+
+@layer   {}
+@layer { 
+    }
+
+@layer
+
+reset.type
+
+{
+	strong { font-weight: bold; }
+}
+
+@layer   framework {
+	.title { font-weight: 100; }
+
+	@layer
+     theme {
+		h1, h2 { color: maroon; }
+	}
+}
+
+@layer reset {
+	[hidden] { display: none; }
+}
+
+@layer framework {
+	@layer default { p { margin-block: 0.75em; } }
+	@layer theme { p { color: red; } }
+}
+
+@layer framework.theme {
+	/* These styles will be added to the theme layer inside the framework layer */
+	blockquote { color: rebeccapurple; }
+}
+
+@layer framework
+
+{
+	@media ONLY screen AND (color)  {
+		article {
+			padding: 1rem 3rem;
+		}
+	}
+	.title { font-weight: 100; }
+
+	@layer theme {
+		h1, h2 { color: maroon; }
+	}
+}