feat(css_formatter): format functions and binary expressions (#1347)

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

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

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

@@ -1,10 +1,23 @@
 use crate::prelude::*;
-use biome_css_syntax::CssColor;
-use biome_rowan::AstNode;
+use crate::utils::string_utils::FormatTokenAsLowercase;
+use biome_css_syntax::{CssColor, CssColorFields};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssColor;
 impl FormatNodeRule<CssColor> for FormatCssColor {
     fn fmt_fields(&self, node: &CssColor, f: &mut CssFormatter) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let CssColorFields {
+            hash_token,
+            value_token,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [
+                hash_token.format(),
+                FormatTokenAsLowercase::from(value_token?)
+            ]
+        )
     }
 }

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

@@ -1,8 +1,6 @@
-use std::borrow::Cow;
-
-use crate::prelude::*;
+use crate::{prelude::*, utils::string_utils::FormatTokenAsLowercase};
 use biome_css_syntax::{CssIdentifier, CssIdentifierFields};
-use biome_formatter::{token::string::ToAsciiLowercaseCow, write, FormatRuleWithOptions};
+use biome_formatter::{write, FormatRuleWithOptions};
 
 #[derive(Default, Debug)]
 pub(crate) struct FormatCssIdentifierOptions {
@@ -34,21 +32,7 @@ impl FormatNodeRule<CssIdentifier> for FormatCssIdentifier {
         // we always want to write units in lowercase, but all of the others
         // we want to preserve their casing.
         if self.forced_lowercase {
-            let value_token = value_token?;
-
-            let original = value_token.text_trimmed();
-            match original.to_ascii_lowercase_cow() {
-                Cow::Borrowed(_) => write![f, [value_token.format()]],
-                Cow::Owned(lowercase) => {
-                    write!(
-                        f,
-                        [format_replaced(
-                            &value_token,
-                            &dynamic_text(&lowercase, value_token.text_trimmed_range().start())
-                        )]
-                    )
-                }
-            }
+            write!(f, [FormatTokenAsLowercase::from(value_token?)])
         } else {
             write!(f, [value_token.format()])
         }

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

@@ -1,6 +1,9 @@
 use crate::prelude::*;
-use biome_css_syntax::CssListOfComponentValuesExpression;
-use biome_rowan::AstNode;
+use biome_css_syntax::{
+    CssListOfComponentValuesExpression, CssListOfComponentValuesExpressionFields,
+};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssListOfComponentValuesExpression;
 impl FormatNodeRule<CssListOfComponentValuesExpression>
@@ -11,6 +14,10 @@ impl FormatNodeRule<CssListOfComponentValuesExpression>
         node: &CssListOfComponentValuesExpression,
         f: &mut CssFormatter,
     ) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let CssListOfComponentValuesExpressionFields {
+            css_component_value_list,
+        } = node.as_fields();
+
+        write!(f, [css_component_value_list.format()])
     }
 }

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

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

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

@@ -1,6 +1,7 @@
 use crate::prelude::*;
-use biome_css_syntax::CssParenthesizedExpression;
-use biome_rowan::AstNode;
+use biome_css_syntax::{CssParenthesizedExpression, CssParenthesizedExpressionFields};
+use biome_formatter::{format_args, write};
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssParenthesizedExpression;
 impl FormatNodeRule<CssParenthesizedExpression> for FormatCssParenthesizedExpression {
@@ -9,6 +10,19 @@ impl FormatNodeRule<CssParenthesizedExpression> for FormatCssParenthesizedExpres
         node: &CssParenthesizedExpression,
         f: &mut CssFormatter,
     ) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let CssParenthesizedExpressionFields {
+            l_paren_token,
+            expression,
+            r_paren_token,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [group(&format_args![
+                l_paren_token.format(),
+                soft_block_indent(&expression.format()),
+                r_paren_token.format()
+            ])]
+        )
     }
 }

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

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

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

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

crates/biome_css_formatter/src/lib.rs

@@ -5,6 +5,7 @@ mod cst;
 mod generated;
 mod prelude;
 mod separated;
+mod utils;
 
 use crate::comments::CssCommentStyle;
 pub(crate) use crate::context::CssFormatContext;

crates/biome_css_formatter/src/utils/mod.rs

@@ -0,0 +1 @@
+pub(crate) mod string_utils;

crates/biome_css_formatter/src/utils/string_utils.rs

@@ -0,0 +1,39 @@
+use std::borrow::Cow;
+
+use crate::prelude::*;
+use biome_css_syntax::CssLanguage;
+use biome_formatter::{
+    prelude::{dynamic_text, write},
+    token::string::ToAsciiLowercaseCow,
+    trivia::format_replaced,
+    Format, FormatResult,
+};
+use biome_rowan::SyntaxToken;
+
+use crate::{prelude::CssFormatContext, AsFormat, CssFormatter};
+
+pub(crate) struct FormatTokenAsLowercase {
+    token: SyntaxToken<CssLanguage>,
+}
+
+impl From<SyntaxToken<CssLanguage>> for FormatTokenAsLowercase {
+    fn from(value: SyntaxToken<CssLanguage>) -> Self {
+        Self { token: value }
+    }
+}
+
+impl Format<CssFormatContext> for FormatTokenAsLowercase {
+    fn fmt(&self, f: &mut CssFormatter) -> FormatResult<()> {
+        let original = self.token.text_trimmed();
+        match original.to_ascii_lowercase_cow() {
+            Cow::Borrowed(_) => write!(f, [self.token.format()]),
+            Cow::Owned(lowercase) => write!(
+                f,
+                [format_replaced(
+                    &self.token,
+                    &dynamic_text(&lowercase, self.token.text_trimmed_range().start()),
+                )]
+            ),
+        }
+    }
+}

crates/biome_css_formatter/tests/quick_test.rs

@@ -8,14 +8,15 @@ 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#"
-    @layer framework, override   ,    foo   , bar.baz  ;
-@layer bar.baz  ;
-
+a {
+    content: url(https://example.com/a.jpg);
+    content: url(   https://example.com/f.jpg   );
+  }
 "#;
     let parse = parse_css(src, CssParserOptions::default());
     println!("{:#?}", parse.syntax());

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

@@ -1,6 +1,6 @@
 ---
 source: crates/biome_formatter_test/src/snapshot_builder.rs
-info: "css\\atrule\\container.css"
+info: css/atrule/container.css
 ---
 
 # Input
@@ -149,8 +149,3 @@ Line width: 80
 ```
 
 
-
-## Unimplemented nodes/tokens
-
-"200px" => 809..814
-

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

@@ -148,10 +148,3 @@ Line width: 80
 ```
 
 
-
-## Unimplemented nodes/tokens
-
-"0" => 564..565
-" " => 566..567
-" 25" => 569..572
-

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

@@ -404,26 +404,3 @@ Line width: 80
 ```
 
 
-
-## Unimplemented nodes/tokens
-
-"10deg" => 735..740
-"10deg" => 837..842
-"10deg" => 1047..1052
-"10deg" => 1148..1153
-"\".minwidth\"" => 1382..1393
-"10" => 1640..1642
-" 2" => 1643..1645
-" 4" => 1647..1649
-"10" => 1700..1702
-" 2" => 1703..1705
-" 4" => 1707..1709
-"10, 2" => 1761..1766
-" 20, " => 1764..1769
-" 40))" => 1768..1773
-"--varName" => 1972..1981
-"100px" => 2411..2416
-"1" => 2469..2470
-"\"example\"" => 2602..2611
-"\".minwidth\"" => 2775..2786
-

crates/biome_css_formatter/tests/specs/css/color/functional_colors.css

@@ -0,0 +1,31 @@
+.foo {
+    color: rgb(255  ,  0 , 153);
+    color: rgb(100%,
+     0%, 
+     60%
+     );
+    color: rgba(
+51,   170 , 51, 0.1  )
+;
+    color: 
+    hsl(
+        .75turn, 
+        60%   ,  70%);
+    color: hsla(  240 , 100%   ,   50%,  .05)
+}
+
+.whitespace {
+    color: rgba(   51 
+    170
+     51 / 0.4);
+    color: rgba(
+        51   170    51  /  40%);
+    color: hsl(270   60%   50% / .15);
+    color: hsla(240 100%   50% 
+    /   .05);
+    color: hsla(
+        240
+        100%
+        50% 
+        / 5%);
+}