fix(formatter): don't move comments in grid-template (#4518)

CHANGELOG.md

@@ -47,6 +47,8 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b
 - Fix [#4121](https://github.com/biomejs/biome/issues/4326), don't ident a CSS selector when has leading comments. Contributed by @fireairforce
 - Fix [#4334](https://github.com/biomejs/biome/issues/4334), don't insert trailing comma on type import statement. Contributed by @fireairforce
 - Fix [#3229](https://github.com/biomejs/biome/issues/3229), where Biome wasn't idempotent when block comments were placed inside compound selectors. Contributed by @ematipico
+- Fix [#4026](https://github.com/biomejs/biome/issues/4026), don't move comments in `grid-template`. Contributed by @fireairforce
+
 ### JavaScript APIs
 
 ### Linter

crates/biome_css_formatter/src/comments.rs

@@ -1,6 +1,7 @@
 use crate::prelude::*;
 use biome_css_syntax::{
-    AnyCssDeclarationName, CssComplexSelector, CssFunction, CssIdentifier, CssLanguage, TextLen,
+    AnyCssDeclarationName, CssComplexSelector, CssFunction, CssIdentifier, CssLanguage,
+    CssSyntaxKind, TextLen,
 };
 use biome_diagnostics::category;
 use biome_formatter::comments::{
@@ -109,7 +110,13 @@ fn handle_declaration_name_comment(
 ) -> CommentPlacement<CssLanguage> {
     match comment.preceding_node() {
         Some(following_node) if AnyCssDeclarationName::can_cast(following_node.kind()) => {
-            CommentPlacement::leading(following_node.clone(), comment)
+            if following_node.parent().map_or(false, |p| {
+                p.kind() == CssSyntaxKind::CSS_GENERIC_COMPONENT_VALUE_LIST
+            }) {
+                CommentPlacement::Default(comment)
+            } else {
+                CommentPlacement::leading(following_node.clone(), comment)
+            }
         }
         _ => CommentPlacement::Default(comment),
     }

crates/biome_css_formatter/tests/quick_test.rs

@@ -12,12 +12,14 @@ mod language {
 #[test]
 // use this test check if your snippet prints as you wish, without using a snapshot
 fn quick_test() {
-    let src = r#"foo
-  /* a comment */
-
-  .aRule {
-  color: red;
-}
+    let src = r#"
+#grid {
+	grid-template-columns:
+	  1fr /* first comment */
+	  auto /* second comment */
+      60px /* fourth comment */
+	  2fr /* third comment */  
+  }
 "#;
     let parse = parse_css(src, CssParserOptions::default());
     println!("{parse:#?}");

crates/biome_css_formatter/tests/specs/css/properties/grid.css

@@ -9,3 +9,18 @@
 	grid-template-columns: [first nav-start] 150px [main-start] 1fr [last];
 	grid-template-rows: [first header-start] 50px [main-start] 1fr [footer-start] 50px [last];
 }
+
+#grid {
+  grid-template-columns:
+		1fr /* first comment */
+		auto /* second comment */
+		2fr /* third comment */  
+}
+
+div {
+	grid-template-columns:
+		1fr /* first comment */
+		auto /* second comment */
+		40px /* third comment */
+		2fr /* fourth comment */
+}

crates/biome_css_formatter/tests/specs/css/properties/grid.css.snap

@@ -17,6 +17,20 @@ info: css/properties/grid.css
 	grid-template-rows: [first header-start] 50px [main-start] 1fr [footer-start] 50px [last];
 }
 
+#grid {
+  grid-template-columns:
+		1fr /* first comment */
+		auto /* second comment */
+		2fr /* third comment */  
+}
+
+div {
+	grid-template-columns:
+		1fr /* first comment */
+		auto /* second comment */
+		40px /* third comment */
+		2fr /* fourth comment */
+}
 ```
 
 
@@ -45,6 +59,21 @@ Quote style: Double Quotes
 	grid-template-columns: [first nav-start] 150px [main-start] 1fr [last];
 	grid-template-rows: [first header-start] 50px [main-start] 1fr [footer-start] 50px [last];
 }
+
+#grid {
+	grid-template-columns:
+		1fr /* first comment */
+		auto /* second comment */
+		2fr; /* third comment */
+}
+
+div {
+	grid-template-columns:
+		1fr /* first comment */
+		auto /* second comment */
+		40px /* third comment */
+		2fr; /* fourth comment */
+}
 ```
 
 # Lines exceeding max width of 80 characters