fix(css_formatter): CSS nesting whitespace after & trimmed #3061

CHANGELOG.md

@@ -16,6 +16,7 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b
 #### Bug fixes
 
 - Fix [#3069](https://github.com/biomejs/biome/issues/3069), prevent overwriting paths when using `--staged` or `--changed` options. Contributed by @unvalley
+- Fix the bug where whitespace after the & character in CSS nesting was incorrectly trimmed, ensuring proper targeting of child classes [#3061](https://github.com/biomejs/biome/issues/3061). Contributed by @denbezrukov
 
 ### Linter
 

crates/biome_css_formatter/tests/quick_test.rs

@@ -13,18 +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#"
-:root {
-		--bs-gradient: linear-gradient(
-			180deg,
-          180deg,
-          180deg,
-          180deg,
-          180deg,
-          180deg,
-          180deg
-		);
+.container {
+  &
+  .child {
+    color: blue;
+  }
 }
-
 "#;
     let parse = parse_css(src, CssParserOptions::default());
     println!("{:#?}", parse);

crates/biome_css_formatter/tests/specs/css/nesting/nesting.css

@@ -174,3 +174,112 @@ article {
 		}
 	}
 }
+
+/*should be without whitespace*/
+
+.container {
+	&.child {
+		color: blue;
+	}
+}
+.container {&:child {
+	color: blue;
+}
+}
+
+.container {&|d {
+	color: blue;
+}
+}
+
+.container {&* {
+	color: blue;
+}
+}
+
+.container {&*
+.selector{
+	color: blue;
+}
+}
+
+/*should keep whitespace*/
+
+.container {
+	& .child {
+		color: blue;
+	}
+}
+
+.container {
+	&
+	.child {
+		color: blue;
+	}
+}
+
+.container {& :child {
+	color: blue;
+}
+}
+
+.container {&
+:child {
+		color: blue;
+	}
+}
+
+.container {&
+.child {
+		color: blue;
+	}
+}
+
+.container {& .child {
+	color: blue;
+}
+}
+
+.container {&
+|d {
+		color: blue;
+	}
+}
+
+.container {& |d {
+	color: blue;
+}
+}
+
+.container {&
+div {
+		color: blue;
+	}
+}
+
+.container {& div {
+	color: blue;
+}
+}
+
+.container {&
+* {
+		color: blue;
+	}
+}
+
+.container {& * {
+	color: blue;
+}
+}
+
+.container {&
+[lang=ru] {
+	color: blue;
+}
+}
+
+.container {& [lang=ru] {
+	color: blue;
+}
+}