feat(css_formatter): support for attribute selectors [#1285]

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

@@ -1,10 +1,23 @@
 use crate::prelude::*;
-use biome_css_syntax::CssAttributeMatcher;
-use biome_rowan::AstNode;
+use biome_css_syntax::{CssAttributeMatcher, CssAttributeMatcherFields};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssAttributeMatcher;
 impl FormatNodeRule<CssAttributeMatcher> for FormatCssAttributeMatcher {
     fn fmt_fields(&self, node: &CssAttributeMatcher, f: &mut CssFormatter) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let CssAttributeMatcherFields {
+            operator,
+            value,
+            modifier,
+        } = node.as_fields();
+
+        write!(f, [operator.format(), value.format()])?;
+
+        if modifier.is_some() {
+            write!(f, [space(), modifier.format()])?;
+        }
+
+        Ok(())
     }
 }

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

@@ -1,6 +1,7 @@
 use crate::prelude::*;
-use biome_css_syntax::CssAttributeMatcherValue;
-use biome_rowan::AstNode;
+use biome_css_syntax::{CssAttributeMatcherValue, CssAttributeMatcherValueFields};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssAttributeMatcherValue;
 impl FormatNodeRule<CssAttributeMatcherValue> for FormatCssAttributeMatcherValue {
@@ -9,6 +10,8 @@ impl FormatNodeRule<CssAttributeMatcherValue> for FormatCssAttributeMatcherValue
         node: &CssAttributeMatcherValue,
         f: &mut CssFormatter,
     ) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let CssAttributeMatcherValueFields { name } = node.as_fields();
+
+        write!(f, [name.format()])
     }
 }

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

@@ -1,10 +1,13 @@
 use crate::prelude::*;
-use biome_css_syntax::CssAttributeName;
-use biome_rowan::AstNode;
+use biome_css_syntax::{CssAttributeName, CssAttributeNameFields};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssAttributeName;
 impl FormatNodeRule<CssAttributeName> for FormatCssAttributeName {
     fn fmt_fields(&self, node: &CssAttributeName, f: &mut CssFormatter) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let CssAttributeNameFields { namespace, name } = node.as_fields();
+
+        write!(f, [namespace.format(), name.format()])
     }
 }

crates/biome_css_formatter/src/css/lists/rule_list.rs

@@ -8,7 +8,7 @@ impl FormatRule<CssRuleList> for FormatCssRuleList {
         let mut join = f.join_nodes_with_hardline();
 
         for rule in node {
-            join.entry(rule.syntax(), &rule.format());
+            join.entry(rule.syntax(), &format_or_verbatim(rule.format()));
         }
 
         join.finish()

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

@@ -1,10 +1,26 @@
 use crate::prelude::*;
-use biome_css_syntax::CssAttributeSelector;
-use biome_rowan::AstNode;
+use biome_css_syntax::{CssAttributeSelector, CssAttributeSelectorFields};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssAttributeSelector;
 impl FormatNodeRule<CssAttributeSelector> for FormatCssAttributeSelector {
     fn fmt_fields(&self, node: &CssAttributeSelector, f: &mut CssFormatter) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let CssAttributeSelectorFields {
+            l_brack_token,
+            name,
+            matcher,
+            r_brack_token,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [
+                l_brack_token.format(),
+                name.format(),
+                matcher.format(),
+                r_brack_token.format()
+            ]
+        )
     }
 }

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

@@ -0,0 +1,114 @@
+[attr] {}
+
+[ attr   ] {}
+
+
+[  svg | a ] {}
+
+[ foo|att = val] {}
+
+[ *| att] {}
+
+[ |att] {}
+
+input[type="radio" i] {}
+img[alt~="person" i][src*="lorem" i] {}
+input[type="radio" s] {}
+img[alt~="person" s][src*="lorem" s] {}
+
+
+a[id = test] {}
+a[id= "test"] {}
+a[id = 'test'] {}
+a[id=  func("foo")] {}
+a[class=  "(╯°□°）╯︵ ┻━┻"  ]{}
+
+[lang] {}
+[ lang] {}
+[lang ] {}
+[ lang ] {}
+[  lang  ] {}
+[
+lang
+] {}
+span[lang] {}
+span[ lang] {}
+span[lang ] {}
+span[ lang ] {}
+span[  lang  ] {}
+span[lang='pt'] {}
+span[lang ='pt'] {}
+span[lang= 'pt'] {}
+span[lang = 'pt'] {}
+span[lang  =  'pt'] {}
+span[lang='pt' ] {}
+span[lang='pt'  ] {}
+span[
+lang
+=
+'pt'
+] {}
+span[ lang ~= 'en-us' ] {}
+span[  lang  ~=  'en-us'  ] {}
+span[ lang |='zh' ] {}
+span[
+lang
+~=
+'en-us'
+] {}
+a[ href ^= '#' ] {}
+a[ href *= 'example' ] {}
+a[
+href
+*=
+'example'
+] {}
+input[ type = 'radio' i ] {}
+input[  type  =  'radio'  i  ] {}
+input[ type ~= 'radio' i ] {}
+input[  type  ~=  'radio'  i  ] {}
+input[
+type
+~=
+'radio'
+i
+] {}
+img[ alt = 'person' ][ src = 'lorem' ] {}
+img[ alt  =  'person' ][ src  =  'lorem' ] {}
+img[ alt ~= 'person' ][ src *= 'lorem' ] {}
+img[  alt  ~=  'person'  ][  src  *=  'lorem'  ] {}
+img[
+alt
+~=
+'person'
+][
+src
+*=
+'lorem'
+] {}
+
+[foo|att=val] {}
+[ foo | att = val ] {}
+[  foo  |  att  =  val  ] {}
+[
+foo
+|
+att
+=
+val
+] {}
+[*|att] {}
+[ * | att ] {}
+[  *  |  att  ] {}
+[
+*
+|
+att
+] {}
+[|att] {}
+[ | att ] {}
+[  |  att  ] {}
+[
+|
+att
+] {}