Skip to content

Commit

Permalink
container queries
Browse files Browse the repository at this point in the history
  • Loading branch information
@faultyserver
faultyserver committed Dec 22, 2023
1 parent c63922f commit d70092e
Show file tree
Hide file tree
Showing 13 changed files with 396 additions and 33 deletions.
22 changes: 19 additions & 3 deletions crates/biome_css_formatter/src/css/auxiliary/container_and_query.rs
View file
Original file line number Diff line number Diff line change
@@ -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<CssContainerAndQuery> 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()
]
)
}
}
9 changes: 6 additions & 3 deletions crates/biome_css_formatter/src/css/auxiliary/container_not_query.rs
View file
Original file line number Diff line number Diff line change
@@ -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<CssContainerNotQuery> 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()])
}
}
22 changes: 19 additions & 3 deletions crates/biome_css_formatter/src/css/auxiliary/container_or_query.rs
View file
Original file line number Diff line number Diff line change
@@ -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<CssContainerOrQuery> 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()
]
)
}
}
20 changes: 17 additions & 3 deletions crates/biome_css_formatter/src/css/auxiliary/container_query_in_parens.rs
View file
Original file line number Diff line number Diff line change
@@ -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<CssContainerQueryInParens> for FormatCssContainerQueryInParens {
Expand All @@ -9,6 +10,19 @@ impl FormatNodeRule<CssContainerQueryInParens> 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()
])]
)
}
}
20 changes: 17 additions & 3 deletions crates/biome_css_formatter/src/css/auxiliary/container_size_feature_in_parens.rs
View file
Original file line number Diff line number Diff line change
@@ -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<CssContainerSizeFeatureInParens> for FormatCssContainerSizeFeatureInParens {
Expand All @@ -9,6 +10,19 @@ impl FormatNodeRule<CssContainerSizeFeatureInParens> 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()
])]
)
}
}
22 changes: 19 additions & 3 deletions crates/biome_css_formatter/src/css/auxiliary/container_style_and_query.rs
View file
Original file line number Diff line number Diff line change
@@ -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<CssContainerStyleAndQuery> for FormatCssContainerStyleAndQuery {
Expand All @@ -9,6 +10,21 @@ impl FormatNodeRule<CssContainerStyleAndQuery> 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()
]
)
}
}
20 changes: 17 additions & 3 deletions crates/biome_css_formatter/src/css/auxiliary/container_style_in_parens.rs
View file
Original file line number Diff line number Diff line change
@@ -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<CssContainerStyleInParens> for FormatCssContainerStyleInParens {
Expand All @@ -9,6 +10,19 @@ impl FormatNodeRule<CssContainerStyleInParens> 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()
])]
)
}
}
8 changes: 5 additions & 3 deletions crates/biome_css_formatter/src/css/auxiliary/container_style_not_query.rs
View file
Original file line number Diff line number Diff line change
@@ -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<CssContainerStyleNotQuery> for FormatCssContainerStyleNotQuery {
Expand All @@ -9,6 +9,8 @@ impl FormatNodeRule<CssContainerStyleNotQuery> 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()])
}
}
22 changes: 19 additions & 3 deletions crates/biome_css_formatter/src/css/auxiliary/container_style_or_query.rs
View file
Original file line number Diff line number Diff line change
@@ -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<CssContainerStyleOrQuery> for FormatCssContainerStyleOrQuery {
Expand All @@ -9,6 +10,21 @@ impl FormatNodeRule<CssContainerStyleOrQuery> 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()
]
)
}
}
25 changes: 22 additions & 3 deletions crates/biome_css_formatter/src/css/auxiliary/container_style_query_in_parens.rs
View file
Original file line number Diff line number Diff line change
@@ -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<CssContainerStyleQueryInParens> for FormatCssContainerStyleQueryInParens {
Expand All @@ -9,6 +10,24 @@ impl FormatNodeRule<CssContainerStyleQueryInParens> 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()
])
]
)
}
}
20 changes: 17 additions & 3 deletions crates/biome_css_formatter/src/css/statements/container_at_rule.rs
View file
Original file line number Diff line number Diff line change
@@ -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<CssContainerAtRule> 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()])
}
}
68 changes: 68 additions & 0 deletions crates/biome_css_formatter/tests/specs/css/atrule/container.css
View file
Original file line number Diff line number Diff line change
@@ -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 ) { }
Loading

0 comments on commit d70092e

Please sign in to comment.