feat(css): add support for sass() in SCSS conditional expressions (#9414)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: denbezrukov

crates/biome_css_factory/src/generated/node_factory.rs

@@ -10,6 +10,7 @@ impl FormatRule<AnyCssIfTest> for FormatAnyCssIfTest {
         match node {
             AnyCssIfTest::CssBogusIfTest(node) => node.format().fmt(f),
             AnyCssIfTest::CssIfMediaTest(node) => node.format().fmt(f),
+            AnyCssIfTest::CssIfSassTest(node) => node.format().fmt(f),
             AnyCssIfTest::CssIfStyleTest(node) => node.format().fmt(f),
             AnyCssIfTest::CssIfSupportsTest(node) => node.format().fmt(f),
         }

crates/biome_css_factory/src/generated/syntax_factory.rs

@@ -0,0 +1,27 @@
+use crate::prelude::*;
+use biome_css_syntax::{CssIfSassTest, CssIfSassTestFields};
+use biome_formatter::{format_args, write};
+#[derive(Debug, Clone, Default)]
+pub(crate) struct FormatCssIfSassTest;
+impl FormatNodeRule<CssIfSassTest> for FormatCssIfSassTest {
+    fn fmt_fields(&self, node: &CssIfSassTest, f: &mut CssFormatter) -> FormatResult<()> {
+        let CssIfSassTestFields {
+            sass_token,
+            l_paren_token,
+            test,
+            r_paren_token,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [
+                sass_token.format(),
+                group(&format_args![
+                    l_paren_token.format(),
+                    soft_block_indent(&test.format()),
+                    r_paren_token.format()
+                ])
+            ]
+        )
+    }
+}

crates/biome_css_formatter/src/css/any/if_test.rs

@@ -51,6 +51,7 @@ pub(crate) mod generic_delimiter;
 pub(crate) mod if_branch;
 pub(crate) mod if_function;
 pub(crate) mod if_media_test;
+pub(crate) mod if_sass_test;
 pub(crate) mod if_style_test;
 pub(crate) mod if_supports_identifier_test;
 pub(crate) mod if_supports_test;

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

@@ -2370,6 +2370,44 @@ impl IntoFormat<CssFormatContext> for biome_css_syntax::CssIfMediaTest {
         )
     }
 }
+impl FormatRule<biome_css_syntax::CssIfSassTest>
+    for crate::css::auxiliary::if_sass_test::FormatCssIfSassTest
+{
+    type Context = CssFormatContext;
+    #[inline(always)]
+    fn fmt(
+        &self,
+        node: &biome_css_syntax::CssIfSassTest,
+        f: &mut CssFormatter,
+    ) -> FormatResult<()> {
+        FormatNodeRule::<biome_css_syntax::CssIfSassTest>::fmt(self, node, f)
+    }
+}
+impl AsFormat<CssFormatContext> for biome_css_syntax::CssIfSassTest {
+    type Format<'a> = FormatRefWithRule<
+        'a,
+        biome_css_syntax::CssIfSassTest,
+        crate::css::auxiliary::if_sass_test::FormatCssIfSassTest,
+    >;
+    fn format(&self) -> Self::Format<'_> {
+        FormatRefWithRule::new(
+            self,
+            crate::css::auxiliary::if_sass_test::FormatCssIfSassTest::default(),
+        )
+    }
+}
+impl IntoFormat<CssFormatContext> for biome_css_syntax::CssIfSassTest {
+    type Format = FormatOwnedWithRule<
+        biome_css_syntax::CssIfSassTest,
+        crate::css::auxiliary::if_sass_test::FormatCssIfSassTest,
+    >;
+    fn into_format(self) -> Self::Format {
+        FormatOwnedWithRule::new(
+            self,
+            crate::css::auxiliary::if_sass_test::FormatCssIfSassTest::default(),
+        )
+    }
+}
 impl FormatRule<biome_css_syntax::CssIfStyleTest>
     for crate::css::auxiliary::if_style_test::FormatCssIfStyleTest
 {

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

@@ -24,3 +24,11 @@ $paren-expr:(1+2*3 );
 2,
   3  4 );
 }
+
+.c{
+  inline-size:if(
+    sass(
+$size > 10px
+    ):12px;
+else: 10px;);
+}

crates/biome_css_formatter/src/generated.rs

@@ -1,6 +1,5 @@
 ---
 source: crates/biome_formatter_test/src/snapshot_builder.rs
-assertion_line: 212
 info: css/scss/expression/edge-cases.scss
 ---
 
@@ -34,6 +33,14 @@ $paren-expr:(1+2*3 );
   3  4 );
 }
 
+.c{
+  inline-size:if(
+    sass(
+$size > 10px
+    ):12px;
+else: 10px;);
+}
+
 ```
 
 
@@ -78,4 +85,8 @@ $kw-args: foo($a: 1, $b: 2, $c...);
 	padding: (1 2, 3 4);
 }
 
+.c {
+	inline-size: if(sass($size > 10px): 12px; else: 10px);
+}
+
 ```

crates/biome_css_formatter/tests/specs/css/scss/expression/edge-cases.scss

@@ -538,8 +538,6 @@ if-else.css:2:5 parse ━━━━━━━━━━━━━━━━━━━
     3 │ } @else if $media == phoneLandscape {
     4 │     $k: .08803;
   
-  i SCSS only syntax
-  
 if-else.css:4:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   × SCSS variable declarations are an SCSS only feature. Convert your file to an SCSS file or remove the syntax.
@@ -551,8 +549,6 @@ if-else.css:4:5 parse ━━━━━━━━━━━━━━━━━━━
     5 │ } @else if $media == tabletPortrait {
     6 │     $k: .065106;
   
-  i SCSS only syntax
-  
 if-else.css:6:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   × SCSS variable declarations are an SCSS only feature. Convert your file to an SCSS file or remove the syntax.
@@ -564,8 +560,6 @@ if-else.css:6:5 parse ━━━━━━━━━━━━━━━━━━━
     7 │ }
     8 │ p {
   
-  i SCSS only syntax
-  
 
 ```
 

crates/biome_css_formatter/tests/specs/css/scss/expression/edge-cases.scss.snap

@@ -236,8 +236,6 @@ import.css:42:1 parse ━━━━━━━━━━━━━━━━━━━
     43 │ 
     44 │ @import url("foo.css");
   
-  i SCSS only syntax
-  
 import.css:62:91 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   × expected `,` but instead found `tv`