feat(css_formatter): Always quote attribute matcher values

crates/biome_css_formatter/src/css/auxiliary/attribute_matcher_value.rs

@@ -1,5 +1,9 @@
+use std::borrow::Cow;
+
 use crate::prelude::*;
-use biome_css_syntax::{CssAttributeMatcherValue, CssAttributeMatcherValueFields};
+use biome_css_syntax::{
+    AnyCssAttributeMatcherValue, CssAttributeMatcherValue, CssAttributeMatcherValueFields,
+};
 use biome_formatter::write;
 
 #[derive(Debug, Clone, Default)]
@@ -12,6 +16,39 @@ impl FormatNodeRule<CssAttributeMatcherValue> for FormatCssAttributeMatcherValue
     ) -> FormatResult<()> {
         let CssAttributeMatcherValueFields { name } = node.as_fields();
 
-        write!(f, [name.format()])
+        // All attribute values get quoted, no matter what. Strings already
+        // have the quotes around them, but identifiers need to have quotes
+        // added.
+        match name? {
+            AnyCssAttributeMatcherValue::CssString(string) => {
+                write!(f, [string.format()])
+            }
+            AnyCssAttributeMatcherValue::CssIdentifier(ident) => {
+                let value = ident.value_token()?;
+
+                if f.comments().is_suppressed(ident.syntax()) {
+                    return write!(f, [ident.format()]);
+                }
+
+                let quoted = std::format!("\"{}\"", value.text_trimmed());
+
+                write!(
+                    f,
+                    [
+                        format_leading_comments(ident.syntax()),
+                        format_replaced(
+                            &value,
+                            &syntax_token_cow_slice(
+                                Cow::Owned(quoted),
+                                &value,
+                                value.text_trimmed_range().start()
+                            )
+                        ),
+                        format_trailing_comments(ident.syntax()),
+                        format_dangling_comments(ident.syntax())
+                    ]
+                )
+            }
+        }
     }
 }

crates/biome_css_formatter/src/lib.rs

@@ -167,7 +167,6 @@ where
 {
     fn fmt(&self, node: &N, f: &mut CssFormatter) -> FormatResult<()> {
         if self.is_suppressed(node, f) {
-            println!("Printing suppressed for some reason");
             return write!(f, [format_suppressed_node(node.syntax())]);
         }
 

crates/biome_css_formatter/tests/specs/css/selectors/attribute_selector.css.snap

@@ -146,7 +146,7 @@ Line width: 80
 [svg|a] {
 }
 
-[foo|att=val] {
+[foo|att="val"] {
 }
 
 [*|att] {
@@ -164,7 +164,7 @@ input[type="radio" s] {
 img[alt~="person" s][src*="lorem" s] {
 }
 
-a[id=test] {
+a[id="test"] {
 }
 a[id="test"] {
 }
@@ -247,13 +247,13 @@ img[alt~='person'][src*='lorem'] {
 img[alt~='person'][src*='lorem'] {
 }
 
-[foo|att=val] {
+[foo|att="val"] {
 }
-[foo|att=val] {
+[foo|att="val"] {
 }
-[foo|att=val] {
+[foo|att="val"] {
 }
-[foo|att=val] {
+[foo|att="val"] {
 }
 [*|att] {
 }