diff --git a/crates/biome_css_formatter/src/css/auxiliary/attribute_matcher_value.rs b/crates/biome_css_formatter/src/css/auxiliary/attribute_matcher_value.rs index 2269b406380c..b96aebc20a43 100644 --- a/crates/biome_css_formatter/src/css/auxiliary/attribute_matcher_value.rs +++ b/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 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()) + ] + ) + } + } } } diff --git a/crates/biome_css_formatter/src/lib.rs b/crates/biome_css_formatter/src/lib.rs index 6afef268d9b8..1fb1a8da1278 100644 --- a/crates/biome_css_formatter/src/lib.rs +++ b/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())]); } diff --git a/crates/biome_css_formatter/tests/specs/css/selectors/attribute_selector.css.snap b/crates/biome_css_formatter/tests/specs/css/selectors/attribute_selector.css.snap index e7d10d408083..0a2257d78cd3 100644 --- a/crates/biome_css_formatter/tests/specs/css/selectors/attribute_selector.css.snap +++ b/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] { }