From bf1c3eb5c579b2e7de56d232faa872d59d510323 Mon Sep 17 00:00:00 2001 From: Jon Date: Fri, 22 Dec 2023 10:31:14 -0800 Subject: [PATCH] feat(css_formatter): support for pseudo selectors (#1291) --- .../src/css/auxiliary/nth_offset.rs | 9 +- .../src/css/auxiliary/rule.rs | 11 ++- .../src/css/lists/compound_selector_list.rs | 18 +++- .../src/css/lists/pseudo_value_list.rs | 9 +- .../src/css/lists/relative_selector_list.rs | 19 +++- .../src/css/lists/selector_list.rs | 3 +- ...o_class_function_compound_selector_list.rs | 26 ++++- .../pseudo_class_function_identifier.rs | 24 ++++- .../css/pseudo/pseudo_class_function_nth.rs | 24 ++++- ...o_class_function_relative_selector_list.rs | 26 ++++- .../pseudo_class_function_selector_list.rs | 26 ++++- .../pseudo_class_function_value_list.rs | 24 ++++- .../src/css/pseudo/pseudo_class_identifier.rs | 9 +- .../src/css/pseudo/pseudo_class_nth.rs | 20 +++- .../css/pseudo/pseudo_class_nth_identifier.rs | 9 +- .../src/css/pseudo/pseudo_class_nth_number.rs | 9 +- .../pseudo_element_function_identifier.rs | 26 ++++- .../css/pseudo/pseudo_element_identifier.rs | 9 +- .../src/css/selectors/complex_selector.rs | 13 ++- ...pseudo_class_function_compound_selector.rs | 26 ++++- .../pseudo_class_function_selector.rs | 24 ++++- .../selectors/pseudo_class_nth_selector.rs | 15 ++- .../selectors/pseudo_class_of_nth_selector.rs | 12 ++- .../css/selectors/pseudo_class_selector.rs | 9 +- .../pseudo_element_function_selector.rs | 24 ++++- .../css/selectors/pseudo_element_selector.rs | 12 ++- .../src/css/selectors/relative_selector.rs | 12 ++- .../biome_css_formatter/tests/quick_test.rs | 4 +- .../tests/specs/css/pseudo/is.css | 28 ++++++ .../tests/specs/css/pseudo/is.css.snap | 84 ++++++++++++++++ .../tests/specs/css/pseudo/not.css | 12 +++ .../tests/specs/css/pseudo/not.css.snap | 45 +++++++++ ...seudo_class_function_compound_selector.css | 12 +++ ..._class_function_compound_selector.css.snap | 48 +++++++++ ..._class_function_compound_selector_list.css | 8 ++ ...s_function_compound_selector_list.css.snap | 46 +++++++++ .../css/pseudo/pseudo_class_function_nth.css | 34 +++++++ .../pseudo/pseudo_class_function_nth.css.snap | 98 +++++++++++++++++++ ..._class_function_relative_selector_list.css | 13 +++ ...s_function_relative_selector_list.css.snap | 50 ++++++++++ .../pseudo/pseudo_class_function_selector.css | 19 ++++ .../pseudo_class_function_selector.css.snap | 72 ++++++++++++++ .../pseudo_class_function_value_list.css | 13 +++ .../pseudo_class_function_value_list.css.snap | 54 ++++++++++ .../css/pseudo/pseudo_class_identifier.css | 4 + .../pseudo/pseudo_class_identifier.css.snap | 40 ++++++++ .../css/pseudo/pseudo_element_selector.css | 17 ++++ .../pseudo/pseudo_element_selector.css.snap | 62 ++++++++++++ .../tests/specs/css/pseudo/where.css | 22 +++++ .../tests/specs/css/pseudo/where.css.snap | 73 ++++++++++++++ .../css/selectors/complex_selector.css.snap | 18 ++-- 51 files changed, 1243 insertions(+), 81 deletions(-) create mode 100644 crates/biome_css_formatter/tests/specs/css/pseudo/is.css create mode 100644 crates/biome_css_formatter/tests/specs/css/pseudo/is.css.snap create mode 100644 crates/biome_css_formatter/tests/specs/css/pseudo/not.css create mode 100644 crates/biome_css_formatter/tests/specs/css/pseudo/not.css.snap create mode 100644 crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_compound_selector.css create mode 100644 crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_compound_selector.css.snap create mode 100644 crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_compound_selector_list.css create mode 100644 crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_compound_selector_list.css.snap create mode 100644 crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_nth.css create mode 100644 crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_nth.css.snap create mode 100644 crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_relative_selector_list.css create mode 100644 crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_relative_selector_list.css.snap create mode 100644 crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_selector.css create mode 100644 crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_selector.css.snap create mode 100644 crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_value_list.css create mode 100644 crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_value_list.css.snap create mode 100644 crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_identifier.css create mode 100644 crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_identifier.css.snap create mode 100644 crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_element_selector.css create mode 100644 crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_element_selector.css.snap create mode 100644 crates/biome_css_formatter/tests/specs/css/pseudo/where.css create mode 100644 crates/biome_css_formatter/tests/specs/css/pseudo/where.css.snap diff --git a/crates/biome_css_formatter/src/css/auxiliary/nth_offset.rs b/crates/biome_css_formatter/src/css/auxiliary/nth_offset.rs index c3186f82a74e..d7459202a697 100644 --- a/crates/biome_css_formatter/src/css/auxiliary/nth_offset.rs +++ b/crates/biome_css_formatter/src/css/auxiliary/nth_offset.rs @@ -1,10 +1,13 @@ use crate::prelude::*; -use biome_css_syntax::CssNthOffset; -use biome_rowan::AstNode; +use biome_css_syntax::{CssNthOffset, CssNthOffsetFields}; +use biome_formatter::write; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssNthOffset; impl FormatNodeRule for FormatCssNthOffset { fn fmt_fields(&self, node: &CssNthOffset, f: &mut CssFormatter) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssNthOffsetFields { sign, value } = node.as_fields(); + + write!(f, [sign.format(), space(), value.format()]) } } diff --git a/crates/biome_css_formatter/src/css/auxiliary/rule.rs b/crates/biome_css_formatter/src/css/auxiliary/rule.rs index 3e4fa385ecc2..d13d03468c71 100644 --- a/crates/biome_css_formatter/src/css/auxiliary/rule.rs +++ b/crates/biome_css_formatter/src/css/auxiliary/rule.rs @@ -7,6 +7,15 @@ impl FormatNodeRule for FormatCssRule { fn fmt_fields(&self, node: &CssRule, f: &mut CssFormatter) -> FormatResult<()> { let CssRuleFields { prelude, block } = node.as_fields(); - write!(f, [group(&prelude.format()), space(), &block?.format()]) + write!( + f, + [ + // The selector list gets expanded so that every selector + // appears on its own line, no matter how long they are. + group(&prelude.format()).should_expand(true), + space(), + &block?.format() + ] + ) } } diff --git a/crates/biome_css_formatter/src/css/lists/compound_selector_list.rs b/crates/biome_css_formatter/src/css/lists/compound_selector_list.rs index 05cb0645f783..313339464f0c 100644 --- a/crates/biome_css_formatter/src/css/lists/compound_selector_list.rs +++ b/crates/biome_css_formatter/src/css/lists/compound_selector_list.rs @@ -5,6 +5,22 @@ pub(crate) struct FormatCssCompoundSelectorList; impl FormatRule for FormatCssCompoundSelectorList { type Context = CssFormatContext; fn fmt(&self, node: &CssCompoundSelectorList, f: &mut CssFormatter) -> FormatResult<()> { - f.join().entries(node.iter().formatted()).finish() + let mut joiner = f.join_nodes_with_soft_line(); + + for (rule, formatted) in node.elements().zip(node.format_separated(",")) { + // Each selector gets `indent` added in case it breaks over multiple + // lines. The break is added here rather than in each selector both + // for simplicity and to avoid recursively adding indents when + // selectors are nested within other rules. The group is then added + // around the indent to ensure that it tries using a flat layout + // first and only expands when the single selector can't fit the line. + // + // For example, a selector like `div span a` is structured like + // `[div, [span, [a]]]`, so `a` would end up double-indented if it + // was handled by the selector rather than here. + joiner.entry(rule.node()?.syntax(), &group(&indent(&formatted))); + } + + joiner.finish() } } diff --git a/crates/biome_css_formatter/src/css/lists/pseudo_value_list.rs b/crates/biome_css_formatter/src/css/lists/pseudo_value_list.rs index c86b0a30a661..8840a2759712 100644 --- a/crates/biome_css_formatter/src/css/lists/pseudo_value_list.rs +++ b/crates/biome_css_formatter/src/css/lists/pseudo_value_list.rs @@ -1,10 +1,17 @@ use crate::prelude::*; use biome_css_syntax::CssPseudoValueList; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssPseudoValueList; impl FormatRule for FormatCssPseudoValueList { type Context = CssFormatContext; fn fmt(&self, node: &CssPseudoValueList, f: &mut CssFormatter) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let mut joiner = f.join_nodes_with_soft_line(); + + for (rule, formatted) in node.elements().zip(node.format_separated(",")) { + joiner.entry(rule.node()?.syntax(), &formatted); + } + + joiner.finish() } } diff --git a/crates/biome_css_formatter/src/css/lists/relative_selector_list.rs b/crates/biome_css_formatter/src/css/lists/relative_selector_list.rs index bd934930acb1..ba432a879e97 100644 --- a/crates/biome_css_formatter/src/css/lists/relative_selector_list.rs +++ b/crates/biome_css_formatter/src/css/lists/relative_selector_list.rs @@ -1,10 +1,27 @@ use crate::prelude::*; use biome_css_syntax::CssRelativeSelectorList; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssRelativeSelectorList; impl FormatRule for FormatCssRelativeSelectorList { type Context = CssFormatContext; fn fmt(&self, node: &CssRelativeSelectorList, f: &mut CssFormatter) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let mut joiner = f.join_nodes_with_soft_line(); + + for (rule, formatted) in node.elements().zip(node.format_separated(",")) { + // Each selector gets `indent` added in case it breaks over multiple + // lines. The break is added here rather than in each selector both + // for simplicity and to avoid recursively adding indents when + // selectors are nested within other rules. The group is then added + // around the indent to ensure that it tries using a flat layout + // first and only expands when the single selector can't fit the line. + // + // For example, a selector like `div span a` is structured like + // `[div, [span, [a]]]`, so `a` would end up double-indented if it + // was handled by the selector rather than here. + joiner.entry(rule.node()?.syntax(), &group(&indent(&formatted))); + } + + joiner.finish() } } diff --git a/crates/biome_css_formatter/src/css/lists/selector_list.rs b/crates/biome_css_formatter/src/css/lists/selector_list.rs index cd6456d9e7c4..228ec0934d98 100644 --- a/crates/biome_css_formatter/src/css/lists/selector_list.rs +++ b/crates/biome_css_formatter/src/css/lists/selector_list.rs @@ -1,11 +1,12 @@ use crate::prelude::*; use biome_css_syntax::CssSelectorList; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssSelectorList; impl FormatRule for FormatCssSelectorList { type Context = CssFormatContext; fn fmt(&self, node: &CssSelectorList, f: &mut CssFormatter) -> FormatResult<()> { - let mut joiner = f.join_nodes_with_hardline(); + let mut joiner = f.join_nodes_with_soft_line(); for (rule, formatted) in node.elements().zip(node.format_separated(",")) { // Each selector gets `indent` added in case it breaks over multiple diff --git a/crates/biome_css_formatter/src/css/pseudo/pseudo_class_function_compound_selector_list.rs b/crates/biome_css_formatter/src/css/pseudo/pseudo_class_function_compound_selector_list.rs index 4a680a33f3a8..64ac4e3b3fbd 100644 --- a/crates/biome_css_formatter/src/css/pseudo/pseudo_class_function_compound_selector_list.rs +++ b/crates/biome_css_formatter/src/css/pseudo/pseudo_class_function_compound_selector_list.rs @@ -1,6 +1,9 @@ use crate::prelude::*; -use biome_css_syntax::CssPseudoClassFunctionCompoundSelectorList; -use biome_rowan::AstNode; +use biome_css_syntax::{ + CssPseudoClassFunctionCompoundSelectorList, CssPseudoClassFunctionCompoundSelectorListFields, +}; +use biome_formatter::{format_args, write}; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssPseudoClassFunctionCompoundSelectorList; impl FormatNodeRule @@ -11,6 +14,23 @@ impl FormatNodeRule node: &CssPseudoClassFunctionCompoundSelectorList, f: &mut CssFormatter, ) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssPseudoClassFunctionCompoundSelectorListFields { + name, + l_paren_token, + compound_selector_list, + r_paren_token, + } = node.as_fields(); + + write!( + f, + [ + name.format(), + group(&format_args![ + l_paren_token.format(), + soft_block_indent(&compound_selector_list.format()), + r_paren_token.format() + ]) + ] + ) } } diff --git a/crates/biome_css_formatter/src/css/pseudo/pseudo_class_function_identifier.rs b/crates/biome_css_formatter/src/css/pseudo/pseudo_class_function_identifier.rs index 676b90789a1a..8e8fc8339f92 100644 --- a/crates/biome_css_formatter/src/css/pseudo/pseudo_class_function_identifier.rs +++ b/crates/biome_css_formatter/src/css/pseudo/pseudo_class_function_identifier.rs @@ -1,6 +1,7 @@ use crate::prelude::*; -use biome_css_syntax::CssPseudoClassFunctionIdentifier; -use biome_rowan::AstNode; +use biome_css_syntax::{CssPseudoClassFunctionIdentifier, CssPseudoClassFunctionIdentifierFields}; +use biome_formatter::{format_args, write}; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssPseudoClassFunctionIdentifier; impl FormatNodeRule for FormatCssPseudoClassFunctionIdentifier { @@ -9,6 +10,23 @@ impl FormatNodeRule for FormatCssPseudoClassFu node: &CssPseudoClassFunctionIdentifier, f: &mut CssFormatter, ) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssPseudoClassFunctionIdentifierFields { + name_token, + l_paren_token, + ident, + r_paren_token, + } = node.as_fields(); + + write!( + f, + [ + name_token.format(), + group(&format_args![ + l_paren_token.format(), + soft_block_indent(&ident.format()), + r_paren_token.format() + ]) + ] + ) } } diff --git a/crates/biome_css_formatter/src/css/pseudo/pseudo_class_function_nth.rs b/crates/biome_css_formatter/src/css/pseudo/pseudo_class_function_nth.rs index b27ad1c3f821..873837bceaf6 100644 --- a/crates/biome_css_formatter/src/css/pseudo/pseudo_class_function_nth.rs +++ b/crates/biome_css_formatter/src/css/pseudo/pseudo_class_function_nth.rs @@ -1,6 +1,7 @@ use crate::prelude::*; -use biome_css_syntax::CssPseudoClassFunctionNth; -use biome_rowan::AstNode; +use biome_css_syntax::{CssPseudoClassFunctionNth, CssPseudoClassFunctionNthFields}; +use biome_formatter::{format_args, write}; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssPseudoClassFunctionNth; impl FormatNodeRule for FormatCssPseudoClassFunctionNth { @@ -9,6 +10,23 @@ impl FormatNodeRule for FormatCssPseudoClassFunctionN node: &CssPseudoClassFunctionNth, f: &mut CssFormatter, ) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssPseudoClassFunctionNthFields { + name, + l_paren_token, + selector, + r_paren_token, + } = node.as_fields(); + + write!( + f, + [ + name.format(), + group(&format_args![ + l_paren_token.format(), + soft_block_indent(&selector.format()), + r_paren_token.format() + ]) + ] + ) } } diff --git a/crates/biome_css_formatter/src/css/pseudo/pseudo_class_function_relative_selector_list.rs b/crates/biome_css_formatter/src/css/pseudo/pseudo_class_function_relative_selector_list.rs index 868e801badd3..8248d383002d 100644 --- a/crates/biome_css_formatter/src/css/pseudo/pseudo_class_function_relative_selector_list.rs +++ b/crates/biome_css_formatter/src/css/pseudo/pseudo_class_function_relative_selector_list.rs @@ -1,6 +1,9 @@ use crate::prelude::*; -use biome_css_syntax::CssPseudoClassFunctionRelativeSelectorList; -use biome_rowan::AstNode; +use biome_css_syntax::{ + CssPseudoClassFunctionRelativeSelectorList, CssPseudoClassFunctionRelativeSelectorListFields, +}; +use biome_formatter::{format_args, write}; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssPseudoClassFunctionRelativeSelectorList; impl FormatNodeRule @@ -11,6 +14,23 @@ impl FormatNodeRule node: &CssPseudoClassFunctionRelativeSelectorList, f: &mut CssFormatter, ) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssPseudoClassFunctionRelativeSelectorListFields { + name_token, + l_paren_token, + relative_selector_list, + r_paren_token, + } = node.as_fields(); + + write!( + f, + [ + name_token.format(), + group(&format_args![ + l_paren_token.format(), + soft_block_indent(&relative_selector_list.format()), + r_paren_token.format() + ]) + ] + ) } } diff --git a/crates/biome_css_formatter/src/css/pseudo/pseudo_class_function_selector_list.rs b/crates/biome_css_formatter/src/css/pseudo/pseudo_class_function_selector_list.rs index 38cd51fb9e2f..7d38e38a6dd3 100644 --- a/crates/biome_css_formatter/src/css/pseudo/pseudo_class_function_selector_list.rs +++ b/crates/biome_css_formatter/src/css/pseudo/pseudo_class_function_selector_list.rs @@ -1,6 +1,9 @@ use crate::prelude::*; -use biome_css_syntax::CssPseudoClassFunctionSelectorList; -use biome_rowan::AstNode; +use biome_css_syntax::{ + CssPseudoClassFunctionSelectorList, CssPseudoClassFunctionSelectorListFields, +}; +use biome_formatter::{format_args, write}; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssPseudoClassFunctionSelectorList; impl FormatNodeRule @@ -11,6 +14,23 @@ impl FormatNodeRule node: &CssPseudoClassFunctionSelectorList, f: &mut CssFormatter, ) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssPseudoClassFunctionSelectorListFields { + name, + l_paren_token, + selector_list, + r_paren_token, + } = node.as_fields(); + + write!( + f, + [ + name.format(), + group(&format_args![ + l_paren_token.format(), + soft_block_indent(&selector_list.format()), + r_paren_token.format() + ]) + ] + ) } } diff --git a/crates/biome_css_formatter/src/css/pseudo/pseudo_class_function_value_list.rs b/crates/biome_css_formatter/src/css/pseudo/pseudo_class_function_value_list.rs index e03c704b2985..a884533127f0 100644 --- a/crates/biome_css_formatter/src/css/pseudo/pseudo_class_function_value_list.rs +++ b/crates/biome_css_formatter/src/css/pseudo/pseudo_class_function_value_list.rs @@ -1,6 +1,7 @@ use crate::prelude::*; -use biome_css_syntax::CssPseudoClassFunctionValueList; -use biome_rowan::AstNode; +use biome_css_syntax::{CssPseudoClassFunctionValueList, CssPseudoClassFunctionValueListFields}; +use biome_formatter::{format_args, write}; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssPseudoClassFunctionValueList; impl FormatNodeRule for FormatCssPseudoClassFunctionValueList { @@ -9,6 +10,23 @@ impl FormatNodeRule for FormatCssPseudoClassFun node: &CssPseudoClassFunctionValueList, f: &mut CssFormatter, ) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssPseudoClassFunctionValueListFields { + name_token, + l_paren_token, + value_list, + r_paren_token, + } = node.as_fields(); + + write!( + f, + [ + name_token.format(), + group(&format_args![ + l_paren_token.format(), + soft_block_indent(&value_list.format()), + r_paren_token.format() + ]) + ] + ) } } diff --git a/crates/biome_css_formatter/src/css/pseudo/pseudo_class_identifier.rs b/crates/biome_css_formatter/src/css/pseudo/pseudo_class_identifier.rs index 35e8b9206ee9..b340b4df13b8 100644 --- a/crates/biome_css_formatter/src/css/pseudo/pseudo_class_identifier.rs +++ b/crates/biome_css_formatter/src/css/pseudo/pseudo_class_identifier.rs @@ -1,6 +1,7 @@ use crate::prelude::*; -use biome_css_syntax::CssPseudoClassIdentifier; -use biome_rowan::AstNode; +use biome_css_syntax::{CssPseudoClassIdentifier, CssPseudoClassIdentifierFields}; +use biome_formatter::write; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssPseudoClassIdentifier; impl FormatNodeRule for FormatCssPseudoClassIdentifier { @@ -9,6 +10,8 @@ impl FormatNodeRule for FormatCssPseudoClassIdentifier node: &CssPseudoClassIdentifier, f: &mut CssFormatter, ) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssPseudoClassIdentifierFields { name } = node.as_fields(); + + write!(f, [name.format()]) } } diff --git a/crates/biome_css_formatter/src/css/pseudo/pseudo_class_nth.rs b/crates/biome_css_formatter/src/css/pseudo/pseudo_class_nth.rs index a5b4086a21fb..76fdd7146fbe 100644 --- a/crates/biome_css_formatter/src/css/pseudo/pseudo_class_nth.rs +++ b/crates/biome_css_formatter/src/css/pseudo/pseudo_class_nth.rs @@ -1,10 +1,24 @@ use crate::prelude::*; -use biome_css_syntax::CssPseudoClassNth; -use biome_rowan::AstNode; +use biome_css_syntax::{CssPseudoClassNth, CssPseudoClassNthFields}; +use biome_formatter::write; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssPseudoClassNth; impl FormatNodeRule for FormatCssPseudoClassNth { fn fmt_fields(&self, node: &CssPseudoClassNth, f: &mut CssFormatter) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssPseudoClassNthFields { + sign, + value, + symbol_token, + offset, + } = node.as_fields(); + + write!(f, [sign.format(), value.format(), symbol_token.format(),])?; + + if offset.is_some() { + write!(f, [soft_line_break_or_space(), offset.format()])?; + } + + Ok(()) } } diff --git a/crates/biome_css_formatter/src/css/pseudo/pseudo_class_nth_identifier.rs b/crates/biome_css_formatter/src/css/pseudo/pseudo_class_nth_identifier.rs index 95bd226baab0..7e20ae874359 100644 --- a/crates/biome_css_formatter/src/css/pseudo/pseudo_class_nth_identifier.rs +++ b/crates/biome_css_formatter/src/css/pseudo/pseudo_class_nth_identifier.rs @@ -1,6 +1,7 @@ use crate::prelude::*; -use biome_css_syntax::CssPseudoClassNthIdentifier; -use biome_rowan::AstNode; +use biome_css_syntax::{CssPseudoClassNthIdentifier, CssPseudoClassNthIdentifierFields}; +use biome_formatter::write; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssPseudoClassNthIdentifier; impl FormatNodeRule for FormatCssPseudoClassNthIdentifier { @@ -9,6 +10,8 @@ impl FormatNodeRule for FormatCssPseudoClassNthIden node: &CssPseudoClassNthIdentifier, f: &mut CssFormatter, ) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssPseudoClassNthIdentifierFields { value } = node.as_fields(); + + write!(f, [value.format()]) } } diff --git a/crates/biome_css_formatter/src/css/pseudo/pseudo_class_nth_number.rs b/crates/biome_css_formatter/src/css/pseudo/pseudo_class_nth_number.rs index 295b4d25442a..2abf8b7ba3e1 100644 --- a/crates/biome_css_formatter/src/css/pseudo/pseudo_class_nth_number.rs +++ b/crates/biome_css_formatter/src/css/pseudo/pseudo_class_nth_number.rs @@ -1,10 +1,13 @@ use crate::prelude::*; -use biome_css_syntax::CssPseudoClassNthNumber; -use biome_rowan::AstNode; +use biome_css_syntax::{CssPseudoClassNthNumber, CssPseudoClassNthNumberFields}; +use biome_formatter::write; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssPseudoClassNthNumber; impl FormatNodeRule for FormatCssPseudoClassNthNumber { fn fmt_fields(&self, node: &CssPseudoClassNthNumber, f: &mut CssFormatter) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssPseudoClassNthNumberFields { sign, value } = node.as_fields(); + + write!(f, [sign.format(), value.format()]) } } diff --git a/crates/biome_css_formatter/src/css/pseudo/pseudo_element_function_identifier.rs b/crates/biome_css_formatter/src/css/pseudo/pseudo_element_function_identifier.rs index 2b30b85e2f99..16c52512b1b0 100644 --- a/crates/biome_css_formatter/src/css/pseudo/pseudo_element_function_identifier.rs +++ b/crates/biome_css_formatter/src/css/pseudo/pseudo_element_function_identifier.rs @@ -1,6 +1,9 @@ use crate::prelude::*; -use biome_css_syntax::CssPseudoElementFunctionIdentifier; -use biome_rowan::AstNode; +use biome_css_syntax::{ + CssPseudoElementFunctionIdentifier, CssPseudoElementFunctionIdentifierFields, +}; +use biome_formatter::{format_args, write}; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssPseudoElementFunctionIdentifier; impl FormatNodeRule @@ -11,6 +14,23 @@ impl FormatNodeRule node: &CssPseudoElementFunctionIdentifier, f: &mut CssFormatter, ) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssPseudoElementFunctionIdentifierFields { + name, + l_paren_token, + ident, + r_paren_token, + } = node.as_fields(); + + write!( + f, + [ + name.format(), + group(&format_args![ + l_paren_token.format(), + soft_block_indent(&ident.format()), + r_paren_token.format() + ]) + ] + ) } } diff --git a/crates/biome_css_formatter/src/css/pseudo/pseudo_element_identifier.rs b/crates/biome_css_formatter/src/css/pseudo/pseudo_element_identifier.rs index eb4bf66b077d..86099fd36805 100644 --- a/crates/biome_css_formatter/src/css/pseudo/pseudo_element_identifier.rs +++ b/crates/biome_css_formatter/src/css/pseudo/pseudo_element_identifier.rs @@ -1,6 +1,7 @@ use crate::prelude::*; -use biome_css_syntax::CssPseudoElementIdentifier; -use biome_rowan::AstNode; +use biome_css_syntax::{CssPseudoElementIdentifier, CssPseudoElementIdentifierFields}; +use biome_formatter::write; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssPseudoElementIdentifier; impl FormatNodeRule for FormatCssPseudoElementIdentifier { @@ -9,6 +10,8 @@ impl FormatNodeRule for FormatCssPseudoElementIdenti node: &CssPseudoElementIdentifier, f: &mut CssFormatter, ) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssPseudoElementIdentifierFields { name } = node.as_fields(); + + write!(f, [name.format()]) } } diff --git a/crates/biome_css_formatter/src/css/selectors/complex_selector.rs b/crates/biome_css_formatter/src/css/selectors/complex_selector.rs index 9db3bd9d4e4f..d48f83a6f735 100644 --- a/crates/biome_css_formatter/src/css/selectors/complex_selector.rs +++ b/crates/biome_css_formatter/src/css/selectors/complex_selector.rs @@ -18,12 +18,21 @@ impl FormatNodeRule for FormatCssComplexSelector { // to allow the complete selector to break onto multiple lines if needed. let formatted_combinator = format_with(|f| { if matches!(combinator.kind(), CssSyntaxKind::CSS_SPACE_LITERAL) { - write!(f, [soft_line_break_or_space(), format_removed(&combinator)]) + write!(f, [format_removed(&combinator)]) } else { write!(f, [combinator.format()]) } }); - write!(f, [left.format(), formatted_combinator, right.format()]) + write!( + f, + [ + left.format(), + soft_line_break_or_space(), + formatted_combinator, + space(), + right.format() + ] + ) } } diff --git a/crates/biome_css_formatter/src/css/selectors/pseudo_class_function_compound_selector.rs b/crates/biome_css_formatter/src/css/selectors/pseudo_class_function_compound_selector.rs index faaf3666e630..f8e568816aa1 100644 --- a/crates/biome_css_formatter/src/css/selectors/pseudo_class_function_compound_selector.rs +++ b/crates/biome_css_formatter/src/css/selectors/pseudo_class_function_compound_selector.rs @@ -1,6 +1,9 @@ use crate::prelude::*; -use biome_css_syntax::CssPseudoClassFunctionCompoundSelector; -use biome_rowan::AstNode; +use biome_css_syntax::{ + CssPseudoClassFunctionCompoundSelector, CssPseudoClassFunctionCompoundSelectorFields, +}; +use biome_formatter::{format_args, write}; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssPseudoClassFunctionCompoundSelector; impl FormatNodeRule @@ -11,6 +14,23 @@ impl FormatNodeRule node: &CssPseudoClassFunctionCompoundSelector, f: &mut CssFormatter, ) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssPseudoClassFunctionCompoundSelectorFields { + name, + l_paren_token, + selector, + r_paren_token, + } = node.as_fields(); + + write!( + f, + [ + name.format(), + group(&format_args![ + l_paren_token.format(), + soft_block_indent(&selector.format()), + r_paren_token.format() + ]) + ] + ) } } diff --git a/crates/biome_css_formatter/src/css/selectors/pseudo_class_function_selector.rs b/crates/biome_css_formatter/src/css/selectors/pseudo_class_function_selector.rs index 77fca005e4b2..e1585025b7b0 100644 --- a/crates/biome_css_formatter/src/css/selectors/pseudo_class_function_selector.rs +++ b/crates/biome_css_formatter/src/css/selectors/pseudo_class_function_selector.rs @@ -1,6 +1,7 @@ use crate::prelude::*; -use biome_css_syntax::CssPseudoClassFunctionSelector; -use biome_rowan::AstNode; +use biome_css_syntax::{CssPseudoClassFunctionSelector, CssPseudoClassFunctionSelectorFields}; +use biome_formatter::{format_args, write}; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssPseudoClassFunctionSelector; impl FormatNodeRule for FormatCssPseudoClassFunctionSelector { @@ -9,6 +10,23 @@ impl FormatNodeRule for FormatCssPseudoClassFunc node: &CssPseudoClassFunctionSelector, f: &mut CssFormatter, ) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssPseudoClassFunctionSelectorFields { + name, + l_paren_token, + selector, + r_paren_token, + } = node.as_fields(); + + write!( + f, + [ + name.format(), + group(&format_args![ + l_paren_token.format(), + soft_block_indent(&selector.format()), + r_paren_token.format() + ]) + ] + ) } } diff --git a/crates/biome_css_formatter/src/css/selectors/pseudo_class_nth_selector.rs b/crates/biome_css_formatter/src/css/selectors/pseudo_class_nth_selector.rs index 0925f1d2a552..8e6e93ac025c 100644 --- a/crates/biome_css_formatter/src/css/selectors/pseudo_class_nth_selector.rs +++ b/crates/biome_css_formatter/src/css/selectors/pseudo_class_nth_selector.rs @@ -1,6 +1,7 @@ use crate::prelude::*; -use biome_css_syntax::CssPseudoClassNthSelector; -use biome_rowan::AstNode; +use biome_css_syntax::{CssPseudoClassNthSelector, CssPseudoClassNthSelectorFields}; +use biome_formatter::write; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssPseudoClassNthSelector; impl FormatNodeRule for FormatCssPseudoClassNthSelector { @@ -9,6 +10,14 @@ impl FormatNodeRule for FormatCssPseudoClassNthSelect node: &CssPseudoClassNthSelector, f: &mut CssFormatter, ) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssPseudoClassNthSelectorFields { nth, of_selector } = node.as_fields(); + + write!(f, [nth.format()])?; + + if of_selector.is_some() { + write!(f, [space(), of_selector.format()])?; + } + + Ok(()) } } diff --git a/crates/biome_css_formatter/src/css/selectors/pseudo_class_of_nth_selector.rs b/crates/biome_css_formatter/src/css/selectors/pseudo_class_of_nth_selector.rs index ec9688c774fd..de5cb68e108e 100644 --- a/crates/biome_css_formatter/src/css/selectors/pseudo_class_of_nth_selector.rs +++ b/crates/biome_css_formatter/src/css/selectors/pseudo_class_of_nth_selector.rs @@ -1,6 +1,7 @@ use crate::prelude::*; -use biome_css_syntax::CssPseudoClassOfNthSelector; -use biome_rowan::AstNode; +use biome_css_syntax::{CssPseudoClassOfNthSelector, CssPseudoClassOfNthSelectorFields}; +use biome_formatter::write; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssPseudoClassOfNthSelector; impl FormatNodeRule for FormatCssPseudoClassOfNthSelector { @@ -9,6 +10,11 @@ impl FormatNodeRule for FormatCssPseudoClassOfNthSe node: &CssPseudoClassOfNthSelector, f: &mut CssFormatter, ) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssPseudoClassOfNthSelectorFields { + of_token, + selector_list, + } = node.as_fields(); + + write!(f, [of_token.format(), space(), selector_list.format()]) } } diff --git a/crates/biome_css_formatter/src/css/selectors/pseudo_class_selector.rs b/crates/biome_css_formatter/src/css/selectors/pseudo_class_selector.rs index 8f292ae2c25f..998c4e0ffae6 100644 --- a/crates/biome_css_formatter/src/css/selectors/pseudo_class_selector.rs +++ b/crates/biome_css_formatter/src/css/selectors/pseudo_class_selector.rs @@ -1,10 +1,13 @@ use crate::prelude::*; -use biome_css_syntax::CssPseudoClassSelector; -use biome_rowan::AstNode; +use biome_css_syntax::{CssPseudoClassSelector, CssPseudoClassSelectorFields}; +use biome_formatter::write; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssPseudoClassSelector; impl FormatNodeRule for FormatCssPseudoClassSelector { fn fmt_fields(&self, node: &CssPseudoClassSelector, f: &mut CssFormatter) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssPseudoClassSelectorFields { colon_token, class } = node.as_fields(); + + write!(f, [colon_token.format(), class.format()]) } } diff --git a/crates/biome_css_formatter/src/css/selectors/pseudo_element_function_selector.rs b/crates/biome_css_formatter/src/css/selectors/pseudo_element_function_selector.rs index d754836584a5..069bb4edf8c5 100644 --- a/crates/biome_css_formatter/src/css/selectors/pseudo_element_function_selector.rs +++ b/crates/biome_css_formatter/src/css/selectors/pseudo_element_function_selector.rs @@ -1,6 +1,7 @@ use crate::prelude::*; -use biome_css_syntax::CssPseudoElementFunctionSelector; -use biome_rowan::AstNode; +use biome_css_syntax::{CssPseudoElementFunctionSelector, CssPseudoElementFunctionSelectorFields}; +use biome_formatter::{format_args, write}; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssPseudoElementFunctionSelector; impl FormatNodeRule for FormatCssPseudoElementFunctionSelector { @@ -9,6 +10,23 @@ impl FormatNodeRule for FormatCssPseudoElement node: &CssPseudoElementFunctionSelector, f: &mut CssFormatter, ) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssPseudoElementFunctionSelectorFields { + name, + l_paren_token, + selector, + r_paren_token, + } = node.as_fields(); + + write!( + f, + [ + name.format(), + group(&format_args![ + l_paren_token.format(), + soft_block_indent(&selector.format()), + r_paren_token.format() + ]) + ] + ) } } diff --git a/crates/biome_css_formatter/src/css/selectors/pseudo_element_selector.rs b/crates/biome_css_formatter/src/css/selectors/pseudo_element_selector.rs index 16893f224856..75f9de745461 100644 --- a/crates/biome_css_formatter/src/css/selectors/pseudo_element_selector.rs +++ b/crates/biome_css_formatter/src/css/selectors/pseudo_element_selector.rs @@ -1,6 +1,7 @@ use crate::prelude::*; -use biome_css_syntax::CssPseudoElementSelector; -use biome_rowan::AstNode; +use biome_css_syntax::{CssPseudoElementSelector, CssPseudoElementSelectorFields}; +use biome_formatter::write; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssPseudoElementSelector; impl FormatNodeRule for FormatCssPseudoElementSelector { @@ -9,6 +10,11 @@ impl FormatNodeRule for FormatCssPseudoElementSelector node: &CssPseudoElementSelector, f: &mut CssFormatter, ) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssPseudoElementSelectorFields { + double_colon_token, + element, + } = node.as_fields(); + + write!(f, [double_colon_token.format(), element.format()]) } } diff --git a/crates/biome_css_formatter/src/css/selectors/relative_selector.rs b/crates/biome_css_formatter/src/css/selectors/relative_selector.rs index cba43f0871f0..92fb6ea3efd5 100644 --- a/crates/biome_css_formatter/src/css/selectors/relative_selector.rs +++ b/crates/biome_css_formatter/src/css/selectors/relative_selector.rs @@ -1,10 +1,16 @@ use crate::prelude::*; -use biome_css_syntax::CssRelativeSelector; -use biome_rowan::AstNode; +use biome_css_syntax::{CssRelativeSelector, CssRelativeSelectorFields}; +use biome_formatter::write; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssRelativeSelector; impl FormatNodeRule for FormatCssRelativeSelector { fn fmt_fields(&self, node: &CssRelativeSelector, f: &mut CssFormatter) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssRelativeSelectorFields { + combinator, + selector, + } = node.as_fields(); + + write!(f, [combinator.format(), space(), selector.format()]) } } diff --git a/crates/biome_css_formatter/tests/quick_test.rs b/crates/biome_css_formatter/tests/quick_test.rs index 2edb54e830da..0ade8fc302ab 100644 --- a/crates/biome_css_formatter/tests/quick_test.rs +++ b/crates/biome_css_formatter/tests/quick_test.rs @@ -8,7 +8,7 @@ mod language { include!("language.rs"); } -// #[ignore] +#[ignore] #[test] // use this test check if your snippet prints as you wish, without using a snapshot fn quick_test() { @@ -24,7 +24,7 @@ fn quick_test() { println!("{:#?}", parse.syntax()); let options = CssFormatOptions::default() - .with_line_width(LineWidth::try_from(40).unwrap()) + .with_line_width(LineWidth::try_from(80).unwrap()) .with_indent_style(IndentStyle::Space); let doc = format_node(options.clone(), &parse.syntax()).unwrap(); let result = doc.print().unwrap(); diff --git a/crates/biome_css_formatter/tests/specs/css/pseudo/is.css b/crates/biome_css_formatter/tests/specs/css/pseudo/is.css new file mode 100644 index 000000000000..a5b937741008 --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/pseudo/is.css @@ -0,0 +1,28 @@ +:is(ol, ul, menu:unsupported) :is(ol, ul) { + color: green; +} + +:is(ol, ul) :is(ol, ul) ol { + list-style-type: lower-greek; + color: chocolate; +} + +:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) { + list-style-type: square; +} + +h1 { + font-size: 30px; +} + +:is(section, article, aside, nav) h1 { + font-size: 25px; +} + +:is(section, article, aside, nav) :is(section, article, aside, nav) h1 { + font-size: 20px; +} + +some-element:is(::before, ::after) { + display: block; +} \ No newline at end of file diff --git a/crates/biome_css_formatter/tests/specs/css/pseudo/is.css.snap b/crates/biome_css_formatter/tests/specs/css/pseudo/is.css.snap new file mode 100644 index 000000000000..947f9f0ed83b --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/pseudo/is.css.snap @@ -0,0 +1,84 @@ +--- +source: crates/biome_formatter_test/src/snapshot_builder.rs +info: css/pseudo/is.css +--- + +# Input + +```css +:is(ol, ul, menu:unsupported) :is(ol, ul) { + color: green; +} + +:is(ol, ul) :is(ol, ul) ol { + list-style-type: lower-greek; + color: chocolate; +} + +:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) { + list-style-type: square; +} + +h1 { + font-size: 30px; +} + +:is(section, article, aside, nav) h1 { + font-size: 25px; +} + +:is(section, article, aside, nav) :is(section, article, aside, nav) h1 { + font-size: 20px; +} + +some-element:is(::before, ::after) { + display: block; +} +``` + + +============================= + +# Outputs + +## Output 1 + +----- +Indent style: Tab +Indent width: 2 +Line ending: LF +Line width: 80 +----- + +```css +:is(ol, ul, menu:unsupported) :is(ol, ul) { + color: green; +} + +:is(ol, ul) :is(ol, ul) ol { + list-style-type: lower-greek; + color: chocolate; +} + +:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) { + list-style-type: square; +} + +h1 { + font-size: 30px; +} + +:is(section, article, aside, nav) h1 { + font-size: 25px; +} + +:is(section, article, aside, nav) :is(section, article, aside, nav) h1 { + font-size: 20px; +} + +some-element:is(::before, ::after) { + display: block; +} +``` + + diff --git a/crates/biome_css_formatter/tests/specs/css/pseudo/not.css b/crates/biome_css_formatter/tests/specs/css/pseudo/not.css new file mode 100644 index 000000000000..8968db2a5ae1 --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/pseudo/not.css @@ -0,0 +1,12 @@ +div:not( + :last-child + ) { +} + +:not( + div + + + + #id:hover + + ) {} \ No newline at end of file diff --git a/crates/biome_css_formatter/tests/specs/css/pseudo/not.css.snap b/crates/biome_css_formatter/tests/specs/css/pseudo/not.css.snap new file mode 100644 index 000000000000..718fd6cf18e3 --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/pseudo/not.css.snap @@ -0,0 +1,45 @@ +--- +source: crates/biome_formatter_test/src/snapshot_builder.rs +info: css/pseudo/not.css +--- + +# Input + +```css +div:not( + :last-child + ) { +} + +:not( + div + + + + #id:hover + + ) {} +``` + + +============================= + +# Outputs + +## Output 1 + +----- +Indent style: Tab +Indent width: 2 +Line ending: LF +Line width: 80 +----- + +```css +div:not(:last-child) { +} + +:not(div + #id:hover) { +} +``` + + diff --git a/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_compound_selector.css b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_compound_selector.css new file mode 100644 index 000000000000..22d1d4906335 --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_compound_selector.css @@ -0,0 +1,12 @@ +:host(span:focus) {} + +:host( + span:focus + + ) {} + + :host( + + span#id.class:focus + + ) {} \ No newline at end of file diff --git a/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_compound_selector.css.snap b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_compound_selector.css.snap new file mode 100644 index 000000000000..5566ca190a35 --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_compound_selector.css.snap @@ -0,0 +1,48 @@ +--- +source: crates/biome_formatter_test/src/snapshot_builder.rs +info: css/pseudo/pseudo_class_function_compound_selector.css +--- + +# Input + +```css +:host(span:focus) {} + +:host( + span:focus + + ) {} + + :host( + + span#id.class:focus + + ) {} +``` + + +============================= + +# Outputs + +## Output 1 + +----- +Indent style: Tab +Indent width: 2 +Line ending: LF +Line width: 80 +----- + +```css +:host(span:focus) { +} + +:host(span:focus) { +} + +:host(span#id.class:focus) { +} +``` + + diff --git a/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_compound_selector_list.css b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_compound_selector_list.css new file mode 100644 index 000000000000..3b62182a5bea --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_compound_selector_list.css @@ -0,0 +1,8 @@ +:-webkit-any(i,p,:link,span:focus) {} +:-webkit-any( + i, p + + , :link , + +span:focus +) {} \ No newline at end of file diff --git a/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_compound_selector_list.css.snap b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_compound_selector_list.css.snap new file mode 100644 index 000000000000..5d28249c9d26 --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_compound_selector_list.css.snap @@ -0,0 +1,46 @@ +--- +source: crates/biome_formatter_test/src/snapshot_builder.rs +info: css/pseudo/pseudo_class_function_compound_selector_list.css +--- + +# Input + +```css +:-webkit-any(i,p,:link,span:focus) {} +:-webkit-any( + i, p + + , :link , + +span:focus +) {} +``` + + +============================= + +# Outputs + +## Output 1 + +----- +Indent style: Tab +Indent width: 2 +Line ending: LF +Line width: 80 +----- + +```css +:-webkit-any(i, p, :link, span:focus) { +} +:-webkit-any( + i, + p, + :link, + + span:focus + ) { +} +``` + + diff --git a/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_nth.css b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_nth.css new file mode 100644 index 000000000000..5a92012bb60b --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_nth.css @@ -0,0 +1,34 @@ +:nth-child(2n+1) {} +:nth-child(2n + 1) {} +:nth-child(-2n - 3) {} +:nth-child(+2n - 3) {} +:nth-child(2n + + + + 1) {} +:nth-child( + 2n+ 1) {} +:nth-child( + 2n) {} + +:nth-child( +odd) {} +:nth-child( + even) {} +:nth-child( + 102) {} +:nth-child( + -102) {} + + +:nth-child(2n+1 of li, .test) {} +:nth-child( + + 2n+1 of + li, + + .test) {} + +:nth-child(2n+1 + of + li, .test) {} \ No newline at end of file diff --git a/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_nth.css.snap b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_nth.css.snap new file mode 100644 index 000000000000..a2484d8b65f8 --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_nth.css.snap @@ -0,0 +1,98 @@ +--- +source: crates/biome_formatter_test/src/snapshot_builder.rs +info: css/pseudo/pseudo_class_function_nth.css +--- + +# Input + +```css +:nth-child(2n+1) {} +:nth-child(2n + 1) {} +:nth-child(-2n - 3) {} +:nth-child(+2n - 3) {} +:nth-child(2n + + + + 1) {} +:nth-child( + 2n+ 1) {} +:nth-child( + 2n) {} + +:nth-child( +odd) {} +:nth-child( + even) {} +:nth-child( + 102) {} +:nth-child( + -102) {} + + +:nth-child(2n+1 of li, .test) {} +:nth-child( + + 2n+1 of + li, + + .test) {} + +:nth-child(2n+1 + of + li, .test) {} +``` + + +============================= + +# Outputs + +## Output 1 + +----- +Indent style: Tab +Indent width: 2 +Line ending: LF +Line width: 80 +----- + +```css +:nth-child(2n + 1) { +} +:nth-child(2n + 1) { +} +:nth-child(-2n - 3) { +} +:nth-child(+2n - 3) { +} +:nth-child(2n + 1) { +} +:nth-child(2n + 1) { +} +:nth-child(2n) { +} + +:nth-child(odd) { +} +:nth-child(even) { +} +:nth-child(102) { +} +:nth-child(-102) { +} + +:nth-child(2n + 1 of li, .test) { +} +:nth-child( + 2n + + 1 of li, + + .test + ) { +} + +:nth-child(2n + 1 of li, .test) { +} +``` + + diff --git a/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_relative_selector_list.css b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_relative_selector_list.css new file mode 100644 index 000000000000..df0476b19664 --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_relative_selector_list.css @@ -0,0 +1,13 @@ +:has(> img, +dt) {} +:has( + +> img, + +dt + ) {} + +:has(> img) {} +:has( + > img, + dt, >p, ~ + +div +> p) {} \ No newline at end of file diff --git a/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_relative_selector_list.css.snap b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_relative_selector_list.css.snap new file mode 100644 index 000000000000..0a894828ee91 --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_relative_selector_list.css.snap @@ -0,0 +1,50 @@ +--- +source: crates/biome_formatter_test/src/snapshot_builder.rs +info: css/pseudo/pseudo_class_function_relative_selector_list.css +--- + +# Input + +```css +:has(> img, +dt) {} +:has( + +> img, + +dt + ) {} + +:has(> img) {} +:has( + > img, + dt, >p, ~ + +div +> p) {} +``` + + +============================= + +# Outputs + +## Output 1 + +----- +Indent style: Tab +Indent width: 2 +Line ending: LF +Line width: 80 +----- + +```css +:has(> img, + dt) { +} +:has(> img, + dt) { +} + +:has(> img) { +} +:has(> img, + dt, > p, ~ div > p) { +} +``` + + diff --git a/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_selector.css b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_selector.css new file mode 100644 index 000000000000..57c9f5ee6ae8 --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_selector.css @@ -0,0 +1,19 @@ +:global(.class div) {} + +:global() {} + +:global(.class) {} +:global(div p a) {} +:global( + +.class1.class2 ) {} + +:local(.class div) {} + +:local() {} + +:local(.class) {} +:local(div p a) {} +:local( + +.class1.class2 ) {} \ No newline at end of file diff --git a/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_selector.css.snap b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_selector.css.snap new file mode 100644 index 000000000000..764ab7f96c16 --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_selector.css.snap @@ -0,0 +1,72 @@ +--- +source: crates/biome_formatter_test/src/snapshot_builder.rs +info: css/pseudo/pseudo_class_function_selector.css +--- + +# Input + +```css +:global(.class div) {} + +:global() {} + +:global(.class) {} +:global(div p a) {} +:global( + +.class1.class2 ) {} + +:local(.class div) {} + +:local() {} + +:local(.class) {} +:local(div p a) {} +:local( + +.class1.class2 ) {} +``` + + +============================= + +# Outputs + +## Output 1 + +----- +Indent style: Tab +Indent width: 2 +Line ending: LF +Line width: 80 +----- + +```css +:global(.class div) { +} + +:global() { +} + +:global(.class) { +} +:global(div p a) { +} +:global(.class1.class2) { +} + +:local(.class div) { +} + +:local() { +} + +:local(.class) { +} +:local(div p a) { +} +:local(.class1.class2) { +} +``` + + diff --git a/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_value_list.css b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_value_list.css new file mode 100644 index 000000000000..b2e4e72cab24 --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_value_list.css @@ -0,0 +1,13 @@ +:lang(de, fr) {} +:lang( + de, + + fr + ) {} + +:lang( + de + ) {} +:lang( + de, fr, en, es, hi, pt +) {} \ No newline at end of file diff --git a/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_value_list.css.snap b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_value_list.css.snap new file mode 100644 index 000000000000..f4530ae27982 --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_function_value_list.css.snap @@ -0,0 +1,54 @@ +--- +source: crates/biome_formatter_test/src/snapshot_builder.rs +info: css/pseudo/pseudo_class_function_value_list.css +--- + +# Input + +```css +:lang(de, fr) {} +:lang( + de, + + fr + ) {} + +:lang( + de + ) {} +:lang( + de, fr, en, es, hi, pt +) {} +``` + + +============================= + +# Outputs + +## Output 1 + +----- +Indent style: Tab +Indent width: 2 +Line ending: LF +Line width: 80 +----- + +```css +:lang(de, fr) { +} +:lang( + de, + + fr + ) { +} + +:lang(de) { +} +:lang(de, fr, en, es, hi, pt) { +} +``` + + diff --git a/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_identifier.css b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_identifier.css new file mode 100644 index 000000000000..b316385416b4 --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_identifier.css @@ -0,0 +1,4 @@ +:first-of-type {} +div :first-of-type {} +div:first-of-type {} +div:first-of-type div {} \ No newline at end of file diff --git a/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_identifier.css.snap b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_identifier.css.snap new file mode 100644 index 000000000000..cd213f362811 --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_class_identifier.css.snap @@ -0,0 +1,40 @@ +--- +source: crates/biome_formatter_test/src/snapshot_builder.rs +info: css/pseudo/pseudo_class_identifier.css +--- + +# Input + +```css +:first-of-type {} +div :first-of-type {} +div:first-of-type {} +div:first-of-type div {} +``` + + +============================= + +# Outputs + +## Output 1 + +----- +Indent style: Tab +Indent width: 2 +Line ending: LF +Line width: 80 +----- + +```css +:first-of-type { +} +div :first-of-type { +} +div:first-of-type { +} +div:first-of-type div { +} +``` + + diff --git a/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_element_selector.css b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_element_selector.css new file mode 100644 index 000000000000..0e5044c4717b --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_element_selector.css @@ -0,0 +1,17 @@ +a::after {} + +::before {} + +video::cue( b + +) {} +h1 +video::cue( b + +) area {} + +video::cue-region(#scroll +> .div +) {} + +::part( active ) {} diff --git a/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_element_selector.css.snap b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_element_selector.css.snap new file mode 100644 index 000000000000..ea3d3034dcc0 --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/pseudo/pseudo_element_selector.css.snap @@ -0,0 +1,62 @@ +--- +source: crates/biome_formatter_test/src/snapshot_builder.rs +info: css/pseudo/pseudo_element_selector.css +--- + +# Input + +```css +a::after {} + +::before {} + +video::cue( b + +) {} +h1 +video::cue( b + +) area {} + +video::cue-region(#scroll +> .div +) {} + +::part( active ) {} + +``` + + +============================= + +# Outputs + +## Output 1 + +----- +Indent style: Tab +Indent width: 2 +Line ending: LF +Line width: 80 +----- + +```css +a::after { +} + +::before { +} + +video::cue(b) { +} +h1 video::cue(b) area { +} + +video::cue-region(#scroll > .div) { +} + +::part(active) { +} +``` + + diff --git a/crates/biome_css_formatter/tests/specs/css/pseudo/where.css b/crates/biome_css_formatter/tests/specs/css/pseudo/where.css new file mode 100644 index 000000000000..2bb610ee7353 --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/pseudo/where.css @@ -0,0 +1,22 @@ +:where( + + +#p0:checked ~ #play:checked ~ #c1:checked, + +#p1:checked ~ #play:checked ~ #c2:checked, #p2:checked ~ #play:checked ~ #cO:checked) ~ #result > +#c { display: block; } + +:where(ol +, ul , menu:unsupported +) :where(ol, ul) { + color: green; +} + +:where(ol, ul) :where( ol , ul ) ol { + list-style-type: lower-greek; + color: chocolate; +} + +:where( section.where-styling, aside.where-styling , footer.where-styling) a { + color: orange; +} \ No newline at end of file diff --git a/crates/biome_css_formatter/tests/specs/css/pseudo/where.css.snap b/crates/biome_css_formatter/tests/specs/css/pseudo/where.css.snap new file mode 100644 index 000000000000..59d9f86b0c54 --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/pseudo/where.css.snap @@ -0,0 +1,73 @@ +--- +source: crates/biome_formatter_test/src/snapshot_builder.rs +info: css/pseudo/where.css +--- + +# Input + +```css +:where( + + +#p0:checked ~ #play:checked ~ #c1:checked, + +#p1:checked ~ #play:checked ~ #c2:checked, #p2:checked ~ #play:checked ~ #cO:checked) ~ #result > +#c { display: block; } + +:where(ol +, ul , menu:unsupported +) :where(ol, ul) { + color: green; +} + +:where(ol, ul) :where( ol , ul ) ol { + list-style-type: lower-greek; + color: chocolate; +} + +:where( section.where-styling, aside.where-styling , footer.where-styling) a { + color: orange; +} +``` + + +============================= + +# Outputs + +## Output 1 + +----- +Indent style: Tab +Indent width: 2 +Line ending: LF +Line width: 80 +----- + +```css +:where( + #p0:checked ~ #play:checked ~ #c1:checked, + + #p1:checked ~ #play:checked ~ #c2:checked, + #p2:checked ~ #play:checked ~ #cO:checked + ) + ~ #result + > #c { + display: block; +} + +:where(ol, ul, menu:unsupported) :where(ol, ul) { + color: green; +} + +:where(ol, ul) :where(ol, ul) ol { + list-style-type: lower-greek; + color: chocolate; +} + +:where(section.where-styling, aside.where-styling, footer.where-styling) a { + color: orange; +} +``` + + diff --git a/crates/biome_css_formatter/tests/specs/css/selectors/complex_selector.css.snap b/crates/biome_css_formatter/tests/specs/css/selectors/complex_selector.css.snap index 0dc3a67c0fab..e861afc3de71 100644 --- a/crates/biome_css_formatter/tests/specs/css/selectors/complex_selector.css.snap +++ b/crates/biome_css_formatter/tests/specs/css/selectors/complex_selector.css.snap @@ -35,25 +35,25 @@ Line width: 80 ----- ```css -.parent>.child { +.parent > .child { } -.parent>.child { +.parent > .child { } -.parent>.child { +.parent > .child { } -.parent+.child { +.parent + .child { } -.parent+.child { +.parent + .child { } -.parent+.child { +.parent + .child { } -.parent~.child { +.parent ~ .child { } -.parent~.child { +.parent ~ .child { } -.parent~.child { +.parent ~ .child { } ```