diff --git a/crates/biome_css_formatter/src/css/auxiliary/container_and_query.rs b/crates/biome_css_formatter/src/css/auxiliary/container_and_query.rs index 520681e0615a..d9a963468178 100644 --- a/crates/biome_css_formatter/src/css/auxiliary/container_and_query.rs +++ b/crates/biome_css_formatter/src/css/auxiliary/container_and_query.rs @@ -1,10 +1,26 @@ use crate::prelude::*; -use biome_css_syntax::CssContainerAndQuery; -use biome_rowan::AstNode; +use biome_css_syntax::{CssContainerAndQuery, CssContainerAndQueryFields}; +use biome_formatter::write; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssContainerAndQuery; impl FormatNodeRule for FormatCssContainerAndQuery { fn fmt_fields(&self, node: &CssContainerAndQuery, f: &mut CssFormatter) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssContainerAndQueryFields { + left, + and_token, + right, + } = node.as_fields(); + + write!( + f, + [ + left.format(), + space(), + and_token.format(), + space(), + right.format() + ] + ) } } diff --git a/crates/biome_css_formatter/src/css/auxiliary/container_not_query.rs b/crates/biome_css_formatter/src/css/auxiliary/container_not_query.rs index 5353241bcead..a21aa1eefc9d 100644 --- a/crates/biome_css_formatter/src/css/auxiliary/container_not_query.rs +++ b/crates/biome_css_formatter/src/css/auxiliary/container_not_query.rs @@ -1,10 +1,13 @@ use crate::prelude::*; -use biome_css_syntax::CssContainerNotQuery; -use biome_rowan::AstNode; +use biome_css_syntax::{CssContainerNotQuery, CssContainerNotQueryFields}; +use biome_formatter::write; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssContainerNotQuery; impl FormatNodeRule for FormatCssContainerNotQuery { fn fmt_fields(&self, node: &CssContainerNotQuery, f: &mut CssFormatter) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssContainerNotQueryFields { not_token, query } = node.as_fields(); + + write!(f, [not_token.format(), space(), query.format()]) } } diff --git a/crates/biome_css_formatter/src/css/auxiliary/container_or_query.rs b/crates/biome_css_formatter/src/css/auxiliary/container_or_query.rs index 6e92eede9f4f..7dd3bd422c96 100644 --- a/crates/biome_css_formatter/src/css/auxiliary/container_or_query.rs +++ b/crates/biome_css_formatter/src/css/auxiliary/container_or_query.rs @@ -1,10 +1,26 @@ use crate::prelude::*; -use biome_css_syntax::CssContainerOrQuery; -use biome_rowan::AstNode; +use biome_css_syntax::{CssContainerOrQuery, CssContainerOrQueryFields}; +use biome_formatter::write; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssContainerOrQuery; impl FormatNodeRule for FormatCssContainerOrQuery { fn fmt_fields(&self, node: &CssContainerOrQuery, f: &mut CssFormatter) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssContainerOrQueryFields { + left, + or_token, + right, + } = node.as_fields(); + + write!( + f, + [ + left.format(), + space(), + or_token.format(), + space(), + right.format() + ] + ) } } diff --git a/crates/biome_css_formatter/src/css/auxiliary/container_query_in_parens.rs b/crates/biome_css_formatter/src/css/auxiliary/container_query_in_parens.rs index d0e3cf9e5a9e..7b2c6df350cb 100644 --- a/crates/biome_css_formatter/src/css/auxiliary/container_query_in_parens.rs +++ b/crates/biome_css_formatter/src/css/auxiliary/container_query_in_parens.rs @@ -1,6 +1,7 @@ use crate::prelude::*; -use biome_css_syntax::CssContainerQueryInParens; -use biome_rowan::AstNode; +use biome_css_syntax::{CssContainerQueryInParens, CssContainerQueryInParensFields}; +use biome_formatter::{format_args, write}; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssContainerQueryInParens; impl FormatNodeRule for FormatCssContainerQueryInParens { @@ -9,6 +10,19 @@ impl FormatNodeRule for FormatCssContainerQueryInPare node: &CssContainerQueryInParens, f: &mut CssFormatter, ) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssContainerQueryInParensFields { + l_paren_token, + query, + r_paren_token, + } = node.as_fields(); + + write!( + f, + [group(&format_args![ + l_paren_token.format(), + soft_block_indent(&query.format()), + r_paren_token.format() + ])] + ) } } diff --git a/crates/biome_css_formatter/src/css/auxiliary/container_size_feature_in_parens.rs b/crates/biome_css_formatter/src/css/auxiliary/container_size_feature_in_parens.rs index c07f9a7cbf1c..de7605651385 100644 --- a/crates/biome_css_formatter/src/css/auxiliary/container_size_feature_in_parens.rs +++ b/crates/biome_css_formatter/src/css/auxiliary/container_size_feature_in_parens.rs @@ -1,6 +1,7 @@ use crate::prelude::*; -use biome_css_syntax::CssContainerSizeFeatureInParens; -use biome_rowan::AstNode; +use biome_css_syntax::{CssContainerSizeFeatureInParens, CssContainerSizeFeatureInParensFields}; +use biome_formatter::{format_args, write}; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssContainerSizeFeatureInParens; impl FormatNodeRule for FormatCssContainerSizeFeatureInParens { @@ -9,6 +10,19 @@ impl FormatNodeRule for FormatCssContainerSizeF node: &CssContainerSizeFeatureInParens, f: &mut CssFormatter, ) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssContainerSizeFeatureInParensFields { + l_paren_token, + feature, + r_paren_token, + } = node.as_fields(); + + write!( + f, + [group(&format_args![ + l_paren_token.format(), + soft_block_indent(&feature.format()), + r_paren_token.format() + ])] + ) } } diff --git a/crates/biome_css_formatter/src/css/auxiliary/container_style_and_query.rs b/crates/biome_css_formatter/src/css/auxiliary/container_style_and_query.rs index fbb4d6d94cf0..f66ce7c07215 100644 --- a/crates/biome_css_formatter/src/css/auxiliary/container_style_and_query.rs +++ b/crates/biome_css_formatter/src/css/auxiliary/container_style_and_query.rs @@ -1,6 +1,7 @@ use crate::prelude::*; -use biome_css_syntax::CssContainerStyleAndQuery; -use biome_rowan::AstNode; +use biome_css_syntax::{CssContainerStyleAndQuery, CssContainerStyleAndQueryFields}; +use biome_formatter::write; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssContainerStyleAndQuery; impl FormatNodeRule for FormatCssContainerStyleAndQuery { @@ -9,6 +10,21 @@ impl FormatNodeRule for FormatCssContainerStyleAndQue node: &CssContainerStyleAndQuery, f: &mut CssFormatter, ) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssContainerStyleAndQueryFields { + left, + and_token, + right, + } = node.as_fields(); + + write!( + f, + [ + left.format(), + space(), + and_token.format(), + space(), + right.format() + ] + ) } } diff --git a/crates/biome_css_formatter/src/css/auxiliary/container_style_in_parens.rs b/crates/biome_css_formatter/src/css/auxiliary/container_style_in_parens.rs index ac7b3acb839b..c33e303988f7 100644 --- a/crates/biome_css_formatter/src/css/auxiliary/container_style_in_parens.rs +++ b/crates/biome_css_formatter/src/css/auxiliary/container_style_in_parens.rs @@ -1,6 +1,7 @@ use crate::prelude::*; -use biome_css_syntax::CssContainerStyleInParens; -use biome_rowan::AstNode; +use biome_css_syntax::{CssContainerStyleInParens, CssContainerStyleInParensFields}; +use biome_formatter::{format_args, write}; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssContainerStyleInParens; impl FormatNodeRule for FormatCssContainerStyleInParens { @@ -9,6 +10,19 @@ impl FormatNodeRule for FormatCssContainerStyleInPare node: &CssContainerStyleInParens, f: &mut CssFormatter, ) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssContainerStyleInParensFields { + l_paren_token, + query, + r_paren_token, + } = node.as_fields(); + + write!( + f, + [group(&format_args![ + l_paren_token.format(), + &soft_block_indent(&query.format()), + r_paren_token.format() + ])] + ) } } diff --git a/crates/biome_css_formatter/src/css/auxiliary/container_style_not_query.rs b/crates/biome_css_formatter/src/css/auxiliary/container_style_not_query.rs index f03fea075eaa..5b813ed20307 100644 --- a/crates/biome_css_formatter/src/css/auxiliary/container_style_not_query.rs +++ b/crates/biome_css_formatter/src/css/auxiliary/container_style_not_query.rs @@ -1,6 +1,6 @@ use crate::prelude::*; -use biome_css_syntax::CssContainerStyleNotQuery; -use biome_rowan::AstNode; +use biome_css_syntax::{CssContainerStyleNotQuery, CssContainerStyleNotQueryFields}; +use biome_formatter::write; #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssContainerStyleNotQuery; impl FormatNodeRule for FormatCssContainerStyleNotQuery { @@ -9,6 +9,8 @@ impl FormatNodeRule for FormatCssContainerStyleNotQue node: &CssContainerStyleNotQuery, f: &mut CssFormatter, ) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssContainerStyleNotQueryFields { not_token, query } = node.as_fields(); + + write!(f, [not_token.format(), space(), query.format()]) } } diff --git a/crates/biome_css_formatter/src/css/auxiliary/container_style_or_query.rs b/crates/biome_css_formatter/src/css/auxiliary/container_style_or_query.rs index a2688f561c1c..44671dd81da1 100644 --- a/crates/biome_css_formatter/src/css/auxiliary/container_style_or_query.rs +++ b/crates/biome_css_formatter/src/css/auxiliary/container_style_or_query.rs @@ -1,6 +1,7 @@ use crate::prelude::*; -use biome_css_syntax::CssContainerStyleOrQuery; -use biome_rowan::AstNode; +use biome_css_syntax::{CssContainerStyleOrQuery, CssContainerStyleOrQueryFields}; +use biome_formatter::write; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssContainerStyleOrQuery; impl FormatNodeRule for FormatCssContainerStyleOrQuery { @@ -9,6 +10,21 @@ impl FormatNodeRule for FormatCssContainerStyleOrQuery node: &CssContainerStyleOrQuery, f: &mut CssFormatter, ) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssContainerStyleOrQueryFields { + left, + or_token, + right, + } = node.as_fields(); + + write!( + f, + [ + left.format(), + space(), + or_token.format(), + space(), + right.format() + ] + ) } } diff --git a/crates/biome_css_formatter/src/css/auxiliary/container_style_query_in_parens.rs b/crates/biome_css_formatter/src/css/auxiliary/container_style_query_in_parens.rs index 419ee9c369fe..372f0a14495f 100644 --- a/crates/biome_css_formatter/src/css/auxiliary/container_style_query_in_parens.rs +++ b/crates/biome_css_formatter/src/css/auxiliary/container_style_query_in_parens.rs @@ -1,6 +1,7 @@ use crate::prelude::*; -use biome_css_syntax::CssContainerStyleQueryInParens; -use biome_rowan::AstNode; +use biome_css_syntax::{CssContainerStyleQueryInParens, CssContainerStyleQueryInParensFields}; +use biome_formatter::{format_args, write}; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssContainerStyleQueryInParens; impl FormatNodeRule for FormatCssContainerStyleQueryInParens { @@ -9,6 +10,24 @@ impl FormatNodeRule for FormatCssContainerStyleQ node: &CssContainerStyleQueryInParens, f: &mut CssFormatter, ) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssContainerStyleQueryInParensFields { + style_token, + l_paren_token, + query, + r_paren_token, + } = node.as_fields(); + + write!( + f, + [ + style_token.format(), + space(), + group(&format_args![ + l_paren_token.format(), + soft_block_indent(&query.format()), + r_paren_token.format() + ]) + ] + ) } } diff --git a/crates/biome_css_formatter/src/css/statements/container_at_rule.rs b/crates/biome_css_formatter/src/css/statements/container_at_rule.rs index 9b4230aee657..54b24325f428 100644 --- a/crates/biome_css_formatter/src/css/statements/container_at_rule.rs +++ b/crates/biome_css_formatter/src/css/statements/container_at_rule.rs @@ -1,10 +1,24 @@ use crate::prelude::*; -use biome_css_syntax::CssContainerAtRule; -use biome_rowan::AstNode; +use biome_css_syntax::{CssContainerAtRule, CssContainerAtRuleFields}; +use biome_formatter::write; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssContainerAtRule; impl FormatNodeRule for FormatCssContainerAtRule { fn fmt_fields(&self, node: &CssContainerAtRule, f: &mut CssFormatter) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssContainerAtRuleFields { + container_token, + name, + query, + block, + } = node.as_fields(); + + write!(f, [container_token.format(), space()])?; + + if name.is_some() { + write!(f, [name.format(), space()])?; + } + + write!(f, [query.format(), space(), block.format()]) } } diff --git a/crates/biome_css_formatter/tests/specs/css/atrule/container.css b/crates/biome_css_formatter/tests/specs/css/atrule/container.css new file mode 100644 index 000000000000..8c6335315999 --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/atrule/container.css @@ -0,0 +1,68 @@ +@container name not (width <= 500px) { } + +@container my-layout ( inline-size > 45em) { } + +@container card (inline-size > 30em) or style(--responsive: true) { } +@container card (inline-size > 30em) + +and + style(--responsive: true) { } + +@container card +( + inline-size + > + 30em + ) + + and + + style( + --responsive: + true) { } + +@container ( + +inline-size + +>= 0px +) { } + +@container card + +( + inline-size > +30em ) and (inline-size < +45em +) { } + +@container ( + 100px > + width > + 150px ) { } + +@container (not ( width <= 150px ) ) { } + +@container ( ( + width + <= 150px) ) { } + +@container ( + min-width: 700px) { } + +@container sidebar (min-width: 400px) { } + +@container test style( + --responsive: true + ) { } + +@container style(--responsive: true) { } + +@container card (inline-size > 30em) { } + +@container style(--responsive: true) { } + +@container(inline-size>=calc(200px)) { } + +@container ( WIDTH <= 150px ) { } +@container ( 150px <= WIDTH ) { } diff --git a/crates/biome_css_formatter/tests/specs/css/atrule/container.css.snap b/crates/biome_css_formatter/tests/specs/css/atrule/container.css.snap new file mode 100644 index 000000000000..58b87684a671 --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/atrule/container.css.snap @@ -0,0 +1,151 @@ +--- +source: crates/biome_formatter_test/src/snapshot_builder.rs +info: css/atrule/container.css +--- + +# Input + +```css +@container name not (width <= 500px) { } + +@container my-layout ( inline-size > 45em) { } + +@container card (inline-size > 30em) or style(--responsive: true) { } +@container card (inline-size > 30em) + +and + style(--responsive: true) { } + +@container card +( + inline-size + > + 30em + ) + + and + + style( + --responsive: + true) { } + +@container ( + +inline-size + +>= 0px +) { } + +@container card + +( + inline-size > +30em ) and (inline-size < +45em +) { } + +@container ( + 100px > + width > + 150px ) { } + +@container (not ( width <= 150px ) ) { } + +@container ( ( + width + <= 150px) ) { } + +@container ( + min-width: 700px) { } + +@container sidebar (min-width: 400px) { } + +@container test style( + --responsive: true + ) { } + +@container style(--responsive: true) { } + +@container card (inline-size > 30em) { } + +@container style(--responsive: true) { } + +@container(inline-size>=calc(200px)) { } + +@container ( WIDTH <= 150px ) { } +@container ( 150px <= WIDTH ) { } + +``` + + +============================= + +# Outputs + +## Output 1 + +----- +Indent style: Tab +Indent width: 2 +Line ending: LF +Line width: 80 +----- + +```css +@container name not (width <= 500px) { +} + +@container my-layout (inline-size > 45em) { +} + +@container card (inline-size > 30em) or style (--responsive: true) { +} +@container card (inline-size > 30em) and style (--responsive: true) { +} + +@container card (inline-size > 30em) and style (--responsive: true) { +} + +@container (inline-size >= 0px) { +} + +@container card (inline-size > 30em) and (inline-size < 45em) { +} + +@container (100px > width >150px) { +} + +@container (not (width <= 150px)) { +} + +@container ((width <= 150px)) { +} + +@container (min-width: 700px) { +} + +@container sidebar (min-width: 400px) { +} + +@container test style (--responsive: true) { +} + +@container style (--responsive: true) { +} + +@container card (inline-size > 30em) { +} + +@container style (--responsive: true) { +} + +@container (inline-size >= calc(200px)) { +} + +@container (WIDTH <= 150px) { +} +@container (150px <= WIDTH) { +} +``` + +