feat(css_formatter): all the remaining at-rules

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

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

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

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

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

@@ -1,10 +1,17 @@
 use crate::prelude::*;
 use biome_css_syntax::CssKeyframesItemList;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssKeyframesItemList;
 impl FormatRule<CssKeyframesItemList> for FormatCssKeyframesItemList {
     type Context = CssFormatContext;
     fn fmt(&self, node: &CssKeyframesItemList, f: &mut CssFormatter) -> FormatResult<()> {
-        f.join().entries(node.iter().formatted()).finish()
+        let mut joiner = f.join_nodes_with_hardline();
+
+        for item in node.iter() {
+            joiner.entry(item.syntax(), &item.format());
+        }
+
+        joiner.finish()
     }
 }

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

@@ -5,6 +5,22 @@ pub(crate) struct FormatCssKeyframesSelectorList;
 impl FormatRule<CssKeyframesSelectorList> for FormatCssKeyframesSelectorList {
     type Context = CssFormatContext;
     fn fmt(&self, node: &CssKeyframesSelectorList, f: &mut CssFormatter) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let mut joiner = f.join_nodes_with_soft_line();
+
+        for (rule, formatted) in node.elements().zip(node.format_separated(",")) {
+            // Each selector gets `indent` added in case it breaks over multiple
+            // lines. The break is added here rather than in each selector both
+            // for simplicity and to avoid recursively adding indents when
+            // selectors are nested within other rules. The group is then added
+            // around the indent to ensure that it tries using a flat layout
+            // first and only expands when the single selector can't fit the line.
+            //
+            // For example, a selector like `div span a` is structured like
+            // `[div, [span, [a]]]`, so `a` would end up double-indented if it
+            // was handled by the selector rather than here.
+            joiner.entry(rule.node()?.syntax(), &group(&indent(&formatted)));
+        }
+
+        joiner.finish()
     }
 }

crates/biome_css_formatter/src/css/selectors/keyframes_ident_selector.rs

@@ -1,6 +1,7 @@
 use crate::prelude::*;
-use biome_css_syntax::CssKeyframesIdentSelector;
-use biome_rowan::AstNode;
+use biome_css_syntax::{CssKeyframesIdentSelector, CssKeyframesIdentSelectorFields};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssKeyframesIdentSelector;
 impl FormatNodeRule<CssKeyframesIdentSelector> for FormatCssKeyframesIdentSelector {
@@ -9,6 +10,8 @@ impl FormatNodeRule<CssKeyframesIdentSelector> for FormatCssKeyframesIdentSelect
         node: &CssKeyframesIdentSelector,
         f: &mut CssFormatter,
     ) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let CssKeyframesIdentSelectorFields { selector } = node.as_fields();
+
+        write!(f, [selector.format()])
     }
 }

crates/biome_css_formatter/src/css/selectors/keyframes_percentage_selector.rs

@@ -1,6 +1,7 @@
 use crate::prelude::*;
-use biome_css_syntax::CssKeyframesPercentageSelector;
-use biome_rowan::AstNode;
+use biome_css_syntax::{CssKeyframesPercentageSelector, CssKeyframesPercentageSelectorFields};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssKeyframesPercentageSelector;
 impl FormatNodeRule<CssKeyframesPercentageSelector> for FormatCssKeyframesPercentageSelector {
@@ -9,6 +10,8 @@ impl FormatNodeRule<CssKeyframesPercentageSelector> for FormatCssKeyframesPercen
         node: &CssKeyframesPercentageSelector,
         f: &mut CssFormatter,
     ) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let CssKeyframesPercentageSelectorFields { selector } = node.as_fields();
+
+        write!(f, [selector.format()])
     }
 }

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,6 @@
 use crate::prelude::*;
-use biome_css_syntax::CssFontPaletteValuesAtRule;
+use biome_css_syntax::{CssFontPaletteValuesAtRule, CssFontPaletteValuesAtRuleFields};
+use biome_formatter::write;
 
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssFontPaletteValuesAtRule;
@@ -10,6 +11,21 @@ impl FormatNodeRule<CssFontPaletteValuesAtRule> for FormatCssFontPaletteValuesAt
         node: &CssFontPaletteValuesAtRule,
         f: &mut CssFormatter,
     ) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let CssFontPaletteValuesAtRuleFields {
+            font_palette_values_token,
+            name,
+            block,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [
+                font_palette_values_token.format(),
+                space(),
+                name.format(),
+                space(),
+                block.format()
+            ]
+        )
     }
 }

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

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

crates/biome_css_formatter/tests/quick_test.rs

@@ -13,9 +13,12 @@ mod language {
 // use this test check if your snippet prints as you wish, without using a snapshot
 fn quick_test() {
     let src = r#"
-    div {
-        a: 4px;
-    }
+    @charset "UTF-8";
+@charset "iso-8859-15";
+@charset     "UTF-8";
+@charset "UTF-8";
+
+@charset "any-string-is-okay";
 "#;
     let parse = parse_css(src, CssParserOptions::default());
     println!("{:#?}", parse.syntax());

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

@@ -0,0 +1,6 @@
+@charset "UTF-8";
+@charset "iso-8859-15";
+@charset     "UTF-8";
+@charset "UTF-8";
+
+@charset "any-string-is-okay";

crates/biome_css_formatter/tests/specs/css/atrule/charset.css.snap

@@ -0,0 +1,40 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: css/atrule/charset.css
+---
+
+# Input
+
+```css
+@charset "UTF-8";
+@charset "iso-8859-15";
+@charset     "UTF-8";
+@charset "UTF-8";
+
+@charset "any-string-is-okay";
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+-----
+
+```css
+@charset "UTF-8";
+@charset "iso-8859-15";
+@charset "UTF-8";
+@charset "UTF-8";
+
+@charset "any-string-is-okay";
+```
+
+

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

@@ -0,0 +1,8 @@
+@color-profile --fogra39 {  }
+
+@color-profile    device-cmyk {  }
+
+@color-profile 
+
+DEVICE-CMYK
+ {  }