feat(css_parser): add :local and :global pseudo class. #3011

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

@@ -1,6 +1,7 @@
 use crate::prelude::*;
-use biome_css_syntax::CssValueAtRuleImportClause;
-use biome_rowan::AstNode;
+use biome_css_syntax::{CssValueAtRuleImportClause, CssValueAtRuleImportClauseFields};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssValueAtRuleImportClause;
 impl FormatNodeRule<CssValueAtRuleImportClause> for FormatCssValueAtRuleImportClause {
@@ -9,6 +10,21 @@ impl FormatNodeRule<CssValueAtRuleImportClause> for FormatCssValueAtRuleImportCl
         node: &CssValueAtRuleImportClause,
         f: &mut CssFormatter,
     ) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let CssValueAtRuleImportClauseFields {
+            specifiers,
+            from_token,
+            source,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [
+                specifiers.format(),
+                space(),
+                from_token.format(),
+                space(),
+                source.format()
+            ]
+        )
     }
 }

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

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

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

@@ -1,6 +1,9 @@
 use crate::prelude::*;
-use biome_css_syntax::CssValueAtRuleNamedImportSpecifier;
-use biome_rowan::AstNode;
+use biome_css_syntax::{
+    CssValueAtRuleNamedImportSpecifier, CssValueAtRuleNamedImportSpecifierFields,
+};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssValueAtRuleNamedImportSpecifier;
 impl FormatNodeRule<CssValueAtRuleNamedImportSpecifier>
@@ -11,6 +14,21 @@ impl FormatNodeRule<CssValueAtRuleNamedImportSpecifier>
         node: &CssValueAtRuleNamedImportSpecifier,
         f: &mut CssFormatter,
     ) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let CssValueAtRuleNamedImportSpecifierFields {
+            name,
+            as_token,
+            local_name,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [
+                name.format(),
+                space(),
+                as_token.format(),
+                space(),
+                local_name.format()
+            ]
+        )
     }
 }

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

@@ -1,5 +1,6 @@
 use crate::prelude::*;
 use biome_css_syntax::CssValueAtRuleImportSpecifierList;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssValueAtRuleImportSpecifierList;
 impl FormatRule<CssValueAtRuleImportSpecifierList> for FormatCssValueAtRuleImportSpecifierList {
@@ -9,6 +10,13 @@ impl FormatRule<CssValueAtRuleImportSpecifierList> for FormatCssValueAtRuleImpor
         node: &CssValueAtRuleImportSpecifierList,
         f: &mut CssFormatter,
     ) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let separator = space();
+        let mut joiner = f.join_with(&separator);
+
+        for formatted in node.format_separated(",") {
+            joiner.entry(&formatted);
+        }
+
+        joiner.finish()
     }
 }

crates/biome_css_formatter/tests/specs/css/atrule/value.css

@@ -0,0 +1,40 @@
+@value
+colors:
+"./colors.css";
+@value
+primary,
+secondary from
+colors
+;
+@value
+small
+as
+bp-small,
+medium,
+large as
+bp-large from
+"./breakpoints.css";
+@value
+selectorValue:
+secondary-color;
+@value
+small:
+(max-width:
+599px);
+@value
+medium:
+(min-width: 600px) and (max-width: 959px);
+@value
+large:
+(min-width: 960px);
+@value
+primary:
+#BF4040;
+@value
+secondary:
+#1F4F7F;
+@value
+common-gradient:
+transparent 75%,
+var(--ring-line-color) 75%,
+currentColor 79%;

crates/biome_css_formatter/tests/specs/css/atrule/value.css.snap.new

@@ -0,0 +1,102 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+assertion_line: 212
+info: css/atrule/value.css
+---
+# Input
+
+```css
+@value
+colors:
+"./colors.css";
+@value
+primary,
+secondary from
+colors
+;
+@value
+small
+as
+bp-small,
+medium,
+large as
+bp-large from
+"./breakpoints.css";
+@value
+selectorValue:
+secondary-color;
+@value
+small:
+(max-width:
+599px);
+@value
+medium:
+(min-width: 600px) and (max-width: 959px);
+@value
+large:
+(min-width: 960px);
+@value
+primary:
+#BF4040;
+@value
+secondary:
+#1F4F7F;
+@value
+common-gradient:
+transparent 75%,
+var(--ring-line-color) 75%,
+currentColor 79%;
+
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Quote style: Double Quotes
+-----
+
+```css
+@value colors:
+"./colors.css";
+@value primary, secondary from colors;
+@value small as bp-small, medium, large as bp-large from "./breakpoints.css";
+@value selectorValue:
+secondary-color;
+@value small:
+(max-width:
+599px);
+@value medium:
+(min-width: 600px) and (max-width: 959px);
+@value large:
+(min-width: 960px);
+@value primary:
+#BF4040;
+@value secondary:
+#1F4F7F;
+@value common-gradient:
+transparent 75%,
+var(--ring-line-color) 75%,
+currentColor 79%;
+```
+
+
+
+## Unimplemented nodes/tokens
+
+" colors:\n\"./colors.css\"" => 6..29
+" selectorValue:\nsecondary-color" => 154..185
+" small:\n(max-width:\n599px)" => 193..219
+" medium:\n(min-width: 600px) and (max-width: 959px)" => 227..277
+" large:\n(min-width: 960px)" => 285..311
+" primary:\n#BF4040" => 319..336
+" secondary:\n#1F4F7F" => 344..363
+" common-gradient:\ntransparent 75%,\nvar(--ring-line-color) 75%,\ncurrentColor 79%" => 371..450