fix(css_formatter): don't wrap selector identation after css comments

biomejs · Nov 22, 2024 · c2e3cda · c2e3cda
1 parent 4848994
commit c2e3cda
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 44 deletions.
diff --git a/crates/biome_css_formatter/src/css/lists/selector_list.rs b/crates/biome_css_formatter/src/css/lists/selector_list.rs
@@ -24,6 +24,37 @@ impl FormatRule<CssSelectorList> for FormatCssSelectorList {
         let mut joiner = f.join_with(&separator);
 
         for formatted in node.format_separated(",") {
+            let computed_selector =
+                formatted
+                    .node()?
+                    .as_css_complex_selector()
+                    .and_then(|complex_selector| {
+                        complex_selector
+                            .left()
+                            .ok()?
+                            .as_css_compound_selector()
+                            .cloned()
+                    });
+
+            if let Some(computed_selector) = computed_selector {
+                let simple_selector_has_leading_comments = computed_selector
+                    .simple_selector()
+                    .and_then(|simple_selector| simple_selector.as_css_type_selector().cloned())
+                    .and_then(|type_selector| type_selector.ident().ok()?.value_token().ok())
+                    .is_some_and(|value_token| value_token.has_leading_comments());
+
+                let sub_selector_has_leading_comments = computed_selector
+                    .sub_selectors()
+                    .first()
+                    .and_then(|sub_selector| sub_selector.as_css_class_selector().cloned())
+                    .and_then(|class_selector| class_selector.dot_token().ok())
+                    .is_some_and(|value_token| value_token.has_leading_comments());
+
+                if simple_selector_has_leading_comments || sub_selector_has_leading_comments {
+                    joiner.entry(&group(&formatted));
+                    continue;
+                }
+            }
             // 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

diff --git a/crates/biome_css_formatter/src/css/selectors/complex_selector.rs b/crates/biome_css_formatter/src/css/selectors/complex_selector.rs
@@ -28,6 +28,7 @@ impl FormatNodeRule<CssComplexSelector> for FormatCssComplexSelector {
             f,
             [
                 left.format(),
+                // space(),
                 soft_line_break_or_space(),
                 formatted_combinator,
                 space(),

diff --git a/crates/biome_css_formatter/tests/quick_test.rs b/crates/biome_css_formatter/tests/quick_test.rs
@@ -13,13 +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#"
-#grid {
-	grid-template-columns:
-	  1fr /* first comment */
-	  auto /* second comment */
-      60px /* fourth comment */
-	  2fr /* third comment */  
-  }
+/* 1some medium long comment */
+.line1 selector,
+/* 2some medium long comment */
+.line1 selector {
+  background: red;
+}
 "#;
     let parse = parse_css(src, CssParserOptions::default());
     println!("{parse:#?}");

diff --git a/crates/biome_css_formatter/tests/specs/css/issue_3229.css.snap b/crates/biome_css_formatter/tests/specs/css/issue_3229.css.snap
@@ -1,7 +1,6 @@
 ---
 source: crates/biome_formatter_test/src/snapshot_builder.rs
 info: css/issue_3229.css
-snapshot_kind: text
 ---
 # Input
 
@@ -84,17 +83,17 @@ foo
 
 /* input */
 foo
-	/* a comment */
+/* a comment */
 
-	.aRule {
+.aRule {
 	color: red;
 }
 
 /* first format */
 foo
-	/* a comment */
+/* a comment */
 
-	.aRule {
+.aRule {
 	color: red;
 }
 ```
diff --git a/crates/biome_css_formatter/tests/specs/css/selectors/selector_lists.css b/crates/biome_css_formatter/tests/specs/css/selectors/selector_lists.css
@@ -14,4 +14,28 @@ div.with.really.long#selector#content, div.another.really.long#selector.that.goe
 h1, h2     , h3
 
 
-, h4,    h5,      h6 {}
+, h4,    h5,      h6 {}
+
+
+/* 1some medium long comment */
+.line1 selector,
+/* 2some medium long comment */
+.line1 selector {
+  background: red;
+}
+
+/* 1some medium long comment */
+.line1 selector,
+/* 2some medium long comment */
+div selector {
+  background: blue;
+}
+
+/* 1some medium long comment */
+.line1 selector,
+/* 2some medium long comment */
+.line1 selector 
+/* 3some medium long comment */
+div selector {
+  background: green;
+}
diff --git a/crates/biome_css_formatter/tests/specs/css/selectors/selector_lists.css.snap b/crates/biome_css_formatter/tests/specs/css/selectors/selector_lists.css.snap
@@ -2,7 +2,6 @@
 source: crates/biome_formatter_test/src/snapshot_builder.rs
 info: css/selectors/selector_lists.css
 ---
-
 # Input
 
 ```css
@@ -23,6 +22,31 @@ h1, h2     , h3
 
 
 , h4,    h5,      h6 {}
+
+
+/* 1some medium long comment */
+.line1 selector,
+/* 2some medium long comment */
+.line1 selector {
+  background: red;
+}
+
+/* 1some medium long comment */
+.line1 selector,
+/* 2some medium long comment */
+div selector {
+  background: blue;
+}
+
+/* 1some medium long comment */
+.line1 selector,
+/* 2some medium long comment */
+.line1 selector 
+/* 3some medium long comment */
+div selector {
+  background: green;
+}
+
 ```
 
 
@@ -62,11 +86,36 @@ h4,
 h5,
 h6 {
 }
+
+/* 1some medium long comment */
+.line1 selector,
+/* 2some medium long comment */
+.line1
+selector {
+	background: red;
+}
+
+/* 1some medium long comment */
+.line1 selector,
+/* 2some medium long comment */
+div
+selector {
+	background: blue;
+}
+
+/* 1some medium long comment */
+.line1 selector,
+/* 2some medium long comment */
+	.line1
+	selector
+	/* 3some medium long comment */
+	div
+	selector {
+	background: green;
+}
 ```
 
 # Lines exceeding max width of 80 characters
 ```
    12: div.another.really.long#selector.that.goes.past.the.line.length.with.a.single.selector {
 ```
-
-
diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/comments/selectors.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/comments/selectors.css.snap
@@ -1,7 +1,6 @@
 ---
 source: crates/biome_formatter_test/src/snapshot_builder.rs
 info: css/comments/selectors.css
-snapshot_kind: text
 ---
 # Input
 
@@ -233,54 +232,51 @@ input:not(/* comment 125 */[/* comment 126 */disabled/* comment 127 */]/* commen
 -/* comment 29 */
 -.element /* comment 30 */ > /* comment 31 */ .element /* comment 32 */ {
 +/* comment 29 */ .element
-+  > /* comment 30 */ /* comment 31 */ .element /* comment 32 */ {
++> /* comment 30 */ /* comment 31 */ .element /* comment 32 */ {
  }
  /* comment 33 */
  .element
 -/* comment 34 */
 ->
--/* comment 35 */
++> /* comment 34 */
+ /* comment 35 */
 -.element
 -/* comment 36 */ {
-+  > /* comment 34 */
-+  /* comment 35 */
-+  .element /* comment 36 */
++.element /* comment 36 */
 +{
  }
 
 -/* comment 37 */
 -.element /* comment 38 */ + /* comment 39 */ .element /* comment 40 */ {
 +/* comment 37 */ .element
-+  + /* comment 38 */ /* comment 39 */ .element /* comment 40 */ {
+++ /* comment 38 */ /* comment 39 */ .element /* comment 40 */ {
  }
  /* comment 41 */
  .element
 -/* comment 42 */
 -+
--/* comment 43 */
+++ /* comment 42 */
+ /* comment 43 */
 -.element
 -/* comment 44 */ {
-+  + /* comment 42 */
-+  /* comment 43 */
-+  .element /* comment 44 */
++.element /* comment 44 */
 +{
  }
 
 -/* comment 45 */
 -.element /* comment 46 */ ~ /* comment 47 */ .element /* comment 48 */ {
 +/* comment 45 */ .element
-+  ~ /* comment 46 */ /* comment 47 */ .element /* comment 48 */ {
++~ /* comment 46 */ /* comment 47 */ .element /* comment 48 */ {
  }
  /* comment 49 */
  .element
 -/* comment 50 */
 -~
--/* comment 51 */
++~ /* comment 50 */
+ /* comment 51 */
 -.element
 -/* comment 52 */ {
-+  ~ /* comment 50 */
-+  /* comment 51 */
-+  .element /* comment 52 */
++.element /* comment 52 */
 +{
  }
 
@@ -536,35 +532,35 @@ input:not(/* comment 125 */[/* comment 126 */disabled/* comment 127 */]/* commen
 }
 
 /* comment 29 */ .element
-  > /* comment 30 */ /* comment 31 */ .element /* comment 32 */ {
+> /* comment 30 */ /* comment 31 */ .element /* comment 32 */ {
 }
 /* comment 33 */
 .element
-  > /* comment 34 */
-  /* comment 35 */
-  .element /* comment 36 */
+> /* comment 34 */
+/* comment 35 */
+.element /* comment 36 */
 {
 }
 
 /* comment 37 */ .element
-  + /* comment 38 */ /* comment 39 */ .element /* comment 40 */ {
++ /* comment 38 */ /* comment 39 */ .element /* comment 40 */ {
 }
 /* comment 41 */
 .element
-  + /* comment 42 */
-  /* comment 43 */
-  .element /* comment 44 */
++ /* comment 42 */
+/* comment 43 */
+.element /* comment 44 */
 {
 }
 
 /* comment 45 */ .element
-  ~ /* comment 46 */ /* comment 47 */ .element /* comment 48 */ {
+~ /* comment 46 */ /* comment 47 */ .element /* comment 48 */ {
 }
 /* comment 49 */
 .element
-  ~ /* comment 50 */
-  /* comment 51 */
-  .element /* comment 52 */
+~ /* comment 50 */
+/* comment 51 */
+.element /* comment 52 */
 {
 }