Skip to content

Commit b98379d

Browse files
ematipicoematipico
authored
fix(format): css comma separated values (#6477)
1 parent ec7126c commit b98379d

File tree

10 files changed

+113
-30
lines changed

10 files changed

+113
-30
lines changed

‎.changeset/mean-ways-make.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
"@biomejs/biome": patch
3+
---
4+
5+
Fixed an issue where Biome formatter didn't format consistently CSS value separated by commas.
6+
7+
```diff
8+
.font-heading {
9+
- font-feature-settings: var(--heading-salt), var(--heading-ss06),
10+
- var(--heading-ss11), var(--heading-cv09), var(--heading-liga),
11+
- var(--heading-calt);
12+
13+
+ font-feature-settings:
14+
+ var(--heading-salt), var(--heading-ss06), var(--heading-ss11),
15+
+ var(--heading-cv09), var(--heading-liga), var(--heading-calt);
16+
}
17+
18+
```

‎crates/biome_css_formatter/src/utils/component_value_list.rs

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ use crate::CssFormatter;
22
use crate::comments::CssComments;
33
use crate::prelude::*;
44
use biome_css_syntax::{CssGenericDelimiter, CssGenericProperty, CssLanguage, CssSyntaxKind};
5-
use biome_formatter::{CstFormatContext, write};
5+
use biome_formatter::{CstFormatContext, format_args, write};
66
use biome_formatter::{FormatOptions, FormatResult};
77
use biome_rowan::{AstNode, AstNodeList, TextSize};
88
use biome_string_case::StrLikeExtension;
@@ -112,7 +112,13 @@ where
112112
write!(f, [group(&indent(&content))])
113113
}
114114
ValueListLayout::Fill => {
115-
write!(f, [group(&indent(&values))])
115+
let with_line_break = format_with(|f| {
116+
if should_preceded_by_softline(node) {
117+
write!(f, [soft_line_break()])?;
118+
}
119+
Ok(())
120+
});
121+
write!(f, [indent(&group(&format_args![with_line_break, &values]))])
116122
}
117123
ValueListLayout::SingleValue => {
118124
write!(f, [values])
@@ -209,6 +215,15 @@ pub(crate) enum ValueListLayout {
209215
OneGroupPerLine,
210216
}
211217

218+
fn should_preceded_by_softline<N, I>(node: &N) -> bool
219+
where
220+
N: AstNodeList<Language = CssLanguage, Node = I> + AstNode<Language = CssLanguage>,
221+
I: AstNode<Language = CssLanguage> + IntoFormat<CssFormatContext>,
222+
{
223+
node.iter()
224+
.any(|element| CssGenericDelimiter::can_cast(element.syntax().kind()))
225+
}
226+
212227
/// Returns the layout to use when printing the provided CssComponentValueList.
213228
/// Until the parser supports comma-separated lists, this will always return
214229
/// [ValueListLayout::Fill], since all space-separated lists are intentionally

‎crates/biome_css_formatter/tests/quick_test.rs

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,16 @@ mod language {
88
include!("language.rs");
99
}
1010

11-
#[ignore]
11+
// #[ignore]
1212
#[test]
1313
// use this test check if your snippet prints as you wish, without using a snapshot
1414
fn quick_test() {
15-
let src = r#"
16-
/* 1some medium long comment */
17-
.line1 selector,
18-
/* 2some medium long comment */
19-
.line1 selector,
20-
/* 3some medium long comment */
21-
div selector {
22-
background: green;
15+
let src = r#".font-heading {
16+
font-feature-settings:
17+
var(--heading-salt), var(--heading-ss06), var(--heading-ss11), var(--heading-cv09),
18+
var(--heading-liga), var(--heading-calt);
2319
}
20+
2421
"#;
2522
let parse = parse_css(src, CssParserOptions::default());
2623
println!("{parse:#?}");

‎crates/biome_css_formatter/tests/specs/css/comma_separated_values.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.font-heading {
2+
font-family: Obviously, obviously-fallback, system-ui, sans-serif;
3+
font-variation-settings: var(--heading-wdth), var(--heading-wght), var(--heading-slnt);
4+
font-feature-settings:
5+
var(--heading-salt), var(--heading-ss06), var(--heading-ss11), var(--heading-cv09),
6+
var(--heading-liga), var(--heading-calt);
7+
}

‎crates/biome_css_formatter/tests/specs/css/comma_separated_values.css.snap

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
source: crates/biome_formatter_test/src/snapshot_builder.rs
3+
info: css/comma_separated_values.css
4+
---
5+
# Input
6+
7+
```css
8+
.font-heading {
9+
font-family: Obviously, obviously-fallback, system-ui, sans-serif;
10+
font-variation-settings: var(--heading-wdth), var(--heading-wght), var(--heading-slnt);
11+
font-feature-settings:
12+
var(--heading-salt), var(--heading-ss06), var(--heading-ss11), var(--heading-cv09),
13+
var(--heading-liga), var(--heading-calt);
14+
}
15+
16+
```
17+
18+
19+
=============================
20+
21+
# Outputs
22+
23+
## Output 1
24+
25+
-----
26+
Indent style: Tab
27+
Indent width: 2
28+
Line ending: LF
29+
Line width: 80
30+
Quote style: Double Quotes
31+
-----
32+
33+
```css
34+
.font-heading {
35+
font-family: Obviously, obviously-fallback, system-ui, sans-serif;
36+
font-variation-settings:
37+
var(--heading-wdth), var(--heading-wght), var(--heading-slnt);
38+
font-feature-settings:
39+
var(--heading-salt), var(--heading-ss06), var(--heading-ss11),
40+
var(--heading-cv09), var(--heading-liga), var(--heading-calt);
41+
}
42+
```

‎crates/biome_css_formatter/tests/specs/css/declaration_list.css.snap

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,8 +112,9 @@ Quote style: Double Quotes
112112
113113
a {
114114
--bs-font-monospace: sfmono-regular / menlo;
115-
--bs-font-monospace: sfmono-regular, menlo, monaco, consolas,
116-
"Liberation Mono", "Courier New", monospace;
115+
--bs-font-monospace:
116+
sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New",
117+
monospace;
117118
}
118119
119120
a {

‎crates/biome_css_formatter/tests/specs/css/properties/unicode_range.css.snap

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,9 @@ Quote style: Double Quotes
8888
}
8989
9090
@font-face {
91-
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
92-
U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
91+
unicode-range:
92+
U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F,
93+
U+2074, U+20AC, U+2212, U+2215;
9394
}
9495
9596
@font-face {

‎crates/biome_css_formatter/tests/specs/css/value_one_group_per_line.css.snap

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
---
22
source: crates/biome_formatter_test/src/snapshot_builder.rs
3-
assertion_line: 211
43
info: css/value_one_group_per_line.css
54
---
65
# Input
@@ -64,9 +63,10 @@ body {
6463
background: url("image.jpg") no-repeat center center;
6564
unicode-range: U+0025-00FF, U+4??;
6665
67-
font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
68-
Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
69-
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
66+
font-family:
67+
"Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
68+
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
69+
"Segoe UI Symbol", "Noto Color Emoji";
7070
7171
transition:
7272
color 0.15s ease-in-out,

‎crates/biome_css_formatter/tests/specs/prettier/css/comments/declaration.css.snap

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ body
8686
```diff
8787
--- Prettier
8888
+++ Biome
89-
@@ -1,58 +1,54 @@
89+
@@ -1,58 +1,55 @@
9090
a {
9191
/* comment 1 */
9292
- /* comment 2 */
@@ -107,7 +107,8 @@ body
107107
- local(/* comment 17 */ "Prettier" /* comment 18 */),
108108
- /* comment 19 */ /* comment 20 */ url("http://prettier.com/font.woff")
109109
- /* comment 21 */; /* comment 22 */
110-
+ /* comment 16 */ src: local(/* comment 17 */ "Prettier" /* comment 18 */), /* comment 19 */
110+
+ /* comment 16 */ src:
111+
+ local(/* comment 17 */ "Prettier" /* comment 18 */), /* comment 19 */
111112
+ /* comment 20 */ url("http://prettier.com/font.woff") /* comment 21 */; /* comment 22 */
112113
}
113114
@@ -195,7 +196,8 @@ a {
195196
196197
@font-face {
197198
font-family: "Prettier";
198-
/* comment 16 */ src: local(/* comment 17 */ "Prettier" /* comment 18 */), /* comment 19 */
199+
/* comment 16 */ src:
200+
local(/* comment 17 */ "Prettier" /* comment 18 */), /* comment 19 */
199201
/* comment 20 */ url("http://prettier.com/font.woff") /* comment 21 */; /* comment 22 */
200202
}
201203
@@ -273,8 +275,7 @@ body {
273275
# Lines exceeding max width of 80 characters
274276
```
275277
7: /* comment 11 */ color: red /* comment 12 */ !important /* comment 13 */; /* comment 14 */
276-
13: /* comment 16 */ src: local(/* comment 17 */ "Prettier" /* comment 18 */), /* comment 19 */
277-
14: /* comment 20 */ url("http://prettier.com/font.woff") /* comment 21 */; /* comment 22 */
278-
18: /* comment 23 */ /* comment 24 */ /* comment 25 */ color: blue /* comment 26 */; /* comment 27 */
279-
24: /* comment 34 */ /* comment 35 */ /* comment 36 */ color: blue /* comment 37 */; /* comment 38 */
278+
15: /* comment 20 */ url("http://prettier.com/font.woff") /* comment 21 */; /* comment 22 */
279+
19: /* comment 23 */ /* comment 24 */ /* comment 25 */ color: blue /* comment 26 */; /* comment 27 */
280+
25: /* comment 34 */ /* comment 35 */ /* comment 36 */ color: blue /* comment 37 */; /* comment 38 */
280281
```

‎crates/biome_css_formatter/tests/specs/prettier/css/fill-value/fill.css.snap

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,11 @@ div {
2828
- "Helvetica Neue",
2929
- Helvetica,
3030
- Arial,
31+
- sans-serif;
3132
+ border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%);
3233
+ $
33-
+ fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial,
34-
sans-serif;
34+
+ fontFamily:
35+
+ "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
3536
}
3637
```
3738

@@ -41,8 +42,8 @@ div {
4142
div {
4243
border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%);
4344
$
44-
fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial,
45-
sans-serif;
45+
fontFamily:
46+
"Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
4647
}
4748
```
4849

0 commit comments

Comments
 (0)