From 98a417589f77c6726695322a49dccee35bd42cff Mon Sep 17 00:00:00 2001
From: zoomdong <1344492820@qq.com>
Date: Sat, 26 Oct 2024 20:17:39 +0800
Subject: [PATCH] fix(css_formatter): don't ident css selector when comments
 before

---
 CHANGELOG.md                                  |  4 +++
 .../src/css/lists/relative_selector_list.rs   | 22 ++++++++++++-
 .../biome_css_formatter/tests/quick_test.rs   | 18 +++++++++--
 .../tests/specs/css/declaration_list.css      | 16 ++++++++++
 .../tests/specs/css/declaration_list.css.snap | 32 +++++++++++++++++++
 5 files changed, 88 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0b04f68dd6f1..2732f596a36b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -26,6 +26,10 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b
 
 ### Formatter
 
+### Bug fixes
+
+- Fix [#4121](https://github.com/biomejs/biome/issues/4326), don't ident css selector when comments before. Contributed by @fireairforce
+
 ### JavaScript APIs
 
 ### Linter
diff --git a/crates/biome_css_formatter/src/css/lists/relative_selector_list.rs b/crates/biome_css_formatter/src/css/lists/relative_selector_list.rs
index 566e6e53982a..353a48e30e80 100644
--- a/crates/biome_css_formatter/src/css/lists/relative_selector_list.rs
+++ b/crates/biome_css_formatter/src/css/lists/relative_selector_list.rs
@@ -23,7 +23,27 @@ impl FormatRule<CssRelativeSelectorList> for FormatCssRelativeSelectorList {
             // 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(&group(&indent(&formatted)));
+            let mut has_comments_before = false;
+            if let Some(relative_selector) = formatted.node()?.as_css_relative_selector() {
+                if let Some(computed_selector) =
+                    relative_selector.selector()?.as_css_compound_selector()
+                {
+                    if let Some(simple_selector) = computed_selector.simple_selector() {
+                        if let Some(type_selector) = simple_selector.as_css_type_selector() {
+                            let value_token = type_selector.ident()?.value_token()?;
+                            if value_token.has_leading_comments() {
+                                has_comments_before = true;
+                            }
+                        }
+                    }
+                }
+            }
+
+            if has_comments_before {
+                joiner.entry(&group(&formatted));
+            } else {
+                joiner.entry(&group(&indent(&formatted)));
+            }
         }
 
         joiner.finish()
diff --git a/crates/biome_css_formatter/tests/quick_test.rs b/crates/biome_css_formatter/tests/quick_test.rs
index 495e773e2895..2482dba09680 100644
--- a/crates/biome_css_formatter/tests/quick_test.rs
+++ b/crates/biome_css_formatter/tests/quick_test.rs
@@ -13,14 +13,26 @@ mod language {
 // use this test check if your snippet prints as you wish, without using a snapshot
 fn quick_test() {
     let src = r#"
-.container {
-  &:has(.child) {
+.with-comments {
+  zz,
+  /* x */
+  a {
+    color: green;
+  }
+  /* y */
+  b {
     color: blue;
   }
 }
+.no {
+  zz,
+  button {
+    color: xxx;
+  }
+}
 "#;
     let parse = parse_css(src, CssParserOptions::default());
-    println!("{parse:#?}");
+    // println!("{parse:#?}");
 
     let options = CssFormatOptions::default()
         .with_line_width(LineWidth::try_from(80).unwrap())
diff --git a/crates/biome_css_formatter/tests/specs/css/declaration_list.css b/crates/biome_css_formatter/tests/specs/css/declaration_list.css
index 2d9252e42926..780622ef405b 100644
--- a/crates/biome_css_formatter/tests/specs/css/declaration_list.css
+++ b/crates/biome_css_formatter/tests/specs/css/declaration_list.css
@@ -34,4 +34,20 @@ a {
 
 a {
     color: red;;;;
+}
+
+.with-comments {
+  /* hello */
+  a,
+  /* world */
+  button {
+    color: blue;
+  }
+}
+  
+.without-comments {
+  a,
+  button {
+    color: blue;
+  }
 }
\ No newline at end of file
diff --git a/crates/biome_css_formatter/tests/specs/css/declaration_list.css.snap b/crates/biome_css_formatter/tests/specs/css/declaration_list.css.snap
index e168c99e2562..9db6650632b6 100644
--- a/crates/biome_css_formatter/tests/specs/css/declaration_list.css.snap
+++ b/crates/biome_css_formatter/tests/specs/css/declaration_list.css.snap
@@ -42,6 +42,22 @@ a {
 a {
     color: red;;;;
 }
+
+.with-comments {
+  /* hello */
+  a,
+  /* world */
+  button {
+    color: blue;
+  }
+}
+  
+.without-comments {
+  a,
+  button {
+    color: blue;
+  }
+}
 ```
 
 
@@ -103,4 +119,20 @@ a {
 a {
 	color: red;
 }
+
+.with-comments {
+	/* hello */
+	a,
+	/* world */
+	button {
+		color: blue;
+	}
+}
+
+.without-comments {
+	a,
+	button {
+		color: blue;
+	}
+}
 ```