fix(css_formatter): fix CSS extra whitespace added within :has #3192 (#…

…3198)

CHANGELOG.md

@@ -83,6 +83,7 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b
 #### Bug fixes
 
 - Fix [#3103](https://github.com/biomejs/biome/issues/3103) by correctly resolving CSS formatter options. Contributed by @ah-yu
+- Fix [#3192](https://github.com/biomejs/biome/issues/3192) don't add an extra whitespace within :has. Contributed by @denbezrukov
 
 ### JavaScript APIs
 

crates/biome_css_formatter/src/css/selectors/relative_selector.rs

@@ -11,6 +11,10 @@ impl FormatNodeRule<CssRelativeSelector> for FormatCssRelativeSelector {
             selector,
         } = node.as_fields();
 
-        write!(f, [combinator.format(), space(), selector.format()])
+        if combinator.is_some() {
+            write!(f, [combinator.format(), space()])?;
+        }
+
+        write!(f, [selector.format()])
     }
 }

crates/biome_css_formatter/tests/quick_test.rs

@@ -13,8 +13,10 @@ mod language {
 // use this test check if your snippet prints as you wish, without using a snapshot
 fn quick_test() {
     let src = r#"
-div {
-grid-template-columns: 1fr 100px 3em;
+.container {
+  &:has(.child) {
+    color: blue;
+  }
 }
 "#;
     let parse = parse_css(src, CssParserOptions::default());

crates/biome_css_formatter/tests/specs/css/selectors/pseudo_class/pseudo_class_has.css

@@ -0,0 +1,17 @@
+a:has(> img) {}
+a:has(   > img   ) {}
+a:has(   >   img   ) {}
+a:has(   >   img   ,   >   img   ) {}
+a:has(   img   ) {}
+dt:has(+ dt) {}
+section:not(:has(h1, h2, h3, h4, h5, h6)) {}
+section:has(:not(h1, h2, h3, h4, h5, h6)) {}
+div:has(p) {}
+.header-group:has(h2):has(.subtitle) h2 {}
+a:has(> img) .div {}
+
+.container {
+	&:has(.child) {
+		color: blue;
+	}
+}

crates/biome_css_formatter/tests/specs/css/selectors/pseudo_class/pseudo_class_has.css.snap

@@ -0,0 +1,72 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: css/selectors/pseudo_class/pseudo_class_has.css
+---
+# Input
+
+```css
+a:has(> img) {}
+a:has(   > img   ) {}
+a:has(   >   img   ) {}
+a:has(   >   img   ,   >   img   ) {}
+a:has(   img   ) {}
+dt:has(+ dt) {}
+section:not(:has(h1, h2, h3, h4, h5, h6)) {}
+section:has(:not(h1, h2, h3, h4, h5, h6)) {}
+div:has(p) {}
+.header-group:has(h2):has(.subtitle) h2 {}
+a:has(> img) .div {}
+
+.container {
+	&:has(.child) {
+		color: blue;
+	}
+}
+
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Quote style: Double Quotes
+-----
+
+```css
+a:has(> img) {
+}
+a:has(> img) {
+}
+a:has(> img) {
+}
+a:has(> img, > img) {
+}
+a:has(img) {
+}
+dt:has(+ dt) {
+}
+section:not(:has(h1, h2, h3, h4, h5, h6)) {
+}
+section:has(:not(h1, h2, h3, h4, h5, h6)) {
+}
+div:has(p) {
+}
+.header-group:has(h2):has(.subtitle) h2 {
+}
+a:has(> img) .div {
+}
+
+.container {
+	&:has(.child) {
+		color: blue;
+	}
+}
+```

crates/biome_css_formatter/tests/specs/prettier/css/attribute/quotes.css.snap

@@ -2,7 +2,6 @@
 source: crates/biome_formatter_test/src/snapshot_builder.rs
 info: css/attribute/quotes.css
 ---
-
 # Input
 
 ```css
@@ -23,7 +22,7 @@ section:has(:not([type="radio"], [type="checkbox"])) {}
 ```diff
 --- Prettier
 +++ Biome
-@@ -4,13 +4,12 @@
+@@ -4,8 +4,7 @@
  }
  a[id="test"] {
  }
@@ -33,12 +32,6 @@ section:has(:not([type="radio"], [type="checkbox"])) {}
  a[class="(╯°□°）╯︵ ┻━┻"] {
  }
  input:not([type="radio"]):not([type="checkbox"]) {
- }
- input:not([type="radio"], [type="checkbox"]) {
- }
--section:has(:not([type="radio"], [type="checkbox"])) {
-+section:has( :not([type="radio"], [type="checkbox"])) {
- }
 ```
 
 # Output
@@ -57,7 +50,7 @@ input:not([type="radio"]):not([type="checkbox"]) {
 }
 input:not([type="radio"], [type="checkbox"]) {
 }
-section:has( :not([type="radio"], [type="checkbox"])) {
+section:has(:not([type="radio"], [type="checkbox"])) {
 }
 ```
 
@@ -98,5 +91,3 @@ quotes.css:4:16 parse ━━━━━━━━━━━━━━━━━━━
   
 
 ```
-
-