Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
c0cd5f2
fix: update fix logic
eryue0220 Nov 6, 2024
a4e7942
Merge branch 'main' into fix/css-formater-update
eryue0220 Nov 6, 2024
cd688a5
fix: update fix logic
eryue0220 Nov 6, 2024
b25b9d7
Merge branch 'main' into fix/css-formater-update
eryue0220 Nov 6, 2024
cd96410
fix: lint
eryue0220 Nov 6, 2024
87c39be
Merge branch 'main' into fix/css-formater-update
eryue0220 Nov 7, 2024
93dbf5d
Merge branch 'main' into fix/css-formater-update
eryue0220 Dec 15, 2024
1a9e77b
Merge branch 'fix/css-formater-update' of github.com:eryue0220/biome …
eryue0220 Dec 15, 2024
b37cc65
Merge branch 'main' into fix/css-formater-update
eryue0220 Dec 21, 2024
ad0cf7f
Merge branch 'main' into fix/css-formater-update
eryue0220 Dec 22, 2024
49b6e08
fix: recheck
eryue0220 Jan 22, 2025
87fa346
Merge branch 'main' into fix/css-formater-update
eryue0220 Jan 22, 2025
f1cf3f9
fix: snap file
eryue0220 Jan 23, 2025
3f9e0a2
Merge branch 'main' into fix/css-formater-update
eryue0220 Jan 23, 2025
b80c129
Merge branch 'main' into fix/css-formater-update
eryue0220 Mar 11, 2025
33326bc
Merge branch 'main' into fix/css-formater-update
eryue0220 Mar 19, 2025
593551a
Merge branch 'main' into fix/css-formater-update
eryue0220 Mar 29, 2025
4238a2f
feat: stash
eryue0220 May 27, 2025
2b27a87
chore: update main
eryue0220 May 27, 2025
3f776ef
Merge branch 'main' into fix/css-formater-update
eryue0220 May 27, 2025
0a4f979
fix: prettier format align bug
eryue0220 Jun 4, 2025
225e8ff
Merge branch 'main' into fix/css-formater-update
eryue0220 Jun 4, 2025
737d046
chore: upgrade deps
eryue0220 Jun 4, 2025
183497b
chore: recover
eryue0220 Jun 4, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions crates/biome_css_formatter/src/utils/component_value_list.rs
Original file line number Diff line number Diff line change
Expand Up @@ -226,6 +226,21 @@ where
.parent::<CssGenericProperty>()
.and_then(|parent| parent.name().ok())
.and_then(|name| name.as_css_identifier().map(|name| name.to_trimmed_text()));

let is_font_family = css_property.as_ref().is_some_and(|name| {
name.to_ascii_lowercase_cow() == "font-family"
});

let is_first_minus_operator_in_font_family = list.iter().next().map_or(false, |x| {
let text = x.syntax().text_trimmed();
text.starts_with("-")
});

let minus_prefixed_count = list.iter()
.filter(|x| x.syntax().text_trimmed().starts_with("-"))
.count();
let has_multiple_minus_prefixed = minus_prefixed_count >= 2;

let is_grid_property = css_property.as_ref().is_some_and(|name| {
let name = name.to_ascii_lowercase_cow();

Expand All @@ -249,6 +264,11 @@ where
// TODO: Check for comments, check for the types of elements in the list, etc.
if is_grid_property {
ValueListLayout::PreserveInline
} else if is_comma_separated
&& is_font_family
&& (!is_first_minus_operator_in_font_family || has_multiple_minus_prefixed)
{
ValueListLayout::OneGroupPerLine
} else if list.len() == 1 {
ValueListLayout::SingleValue
} else if use_one_group_per_line(css_property.as_deref(), list) {
Expand Down
19 changes: 19 additions & 0 deletions crates/biome_css_formatter/tests/specs/css/comma/comma.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
html {
font-family: system-ui, -apple-system;
}

html {
font-family: -apple-system, system-ui;
}

html {
font-family: "Lato", system-ui, -apple-system, Arial, sans-serif;
}

html {
font-family: -apple-system, "Lato", system-ui, -apple-system, Arial, sans-serif;
}

html {
font-family: -apple-system, Arial, sans-serif, sans-serif, sans-serif, Arial, sans-serif;
}
79 changes: 79 additions & 0 deletions crates/biome_css_formatter/tests/specs/css/comma/comma.css.snap
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
---
source: crates/biome_formatter_test/src/snapshot_builder.rs
info: css/comma/comma.css
---
# Input

```css
html {
font-family: system-ui, -apple-system;
}

html {
font-family: -apple-system, system-ui;
}

html {
font-family: "Lato", system-ui, -apple-system, Arial, sans-serif;
}

html {
font-family: -apple-system, "Lato", system-ui, -apple-system, Arial, sans-serif;
}

html {
font-family: -apple-system, Arial, sans-serif, sans-serif, sans-serif, Arial, sans-serif;
}

```


=============================

# Outputs

## Output 1

-----
Indent style: Tab
Indent width: 2
Line ending: LF
Line width: 80
Quote style: Double Quotes
-----

```css
html {
font-family:
system-ui,
-apple-system;
}

html {
font-family: -apple-system, system-ui;
}

html {
font-family:
"Lato",
system-ui,
-apple-system,
Arial,
sans-serif;
}

html {
font-family:
-apple-system,
"Lato",
system-ui,
-apple-system,
Arial,
sans-serif;
}

html {
font-family: -apple-system, Arial, sans-serif, sans-serif, sans-serif, Arial,
sans-serif;
}
```
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ a {
color: blue;
}
}

.without-comments {
a,
button {
Expand Down Expand Up @@ -135,4 +135,4 @@ a {
color: blue;
}
}
```
```
Original file line number Diff line number Diff line change
Expand Up @@ -26,23 +26,23 @@ div {

/* <line-width> */
border : ThIn;
border:
border:
medium
;
border: 100px;

/* <color> */
border:
border:
#fff;

/* combinations */
border: 2px
dotted;
border : outset #f33;
border:#000 medium
border:#000 medium

dashed

;
}

Expand Down Expand Up @@ -91,4 +91,4 @@ div {
border: outset #f33;
border: #000 medium dashed;
}
```
```
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ div {
--custom-property
:
one-value ;
--custom-property: multiple
--custom-property: multiple
values;
--custom-property: delimited
, values
Expand Down Expand Up @@ -47,4 +47,4 @@ div {
--custom-property: delimited / slash / values;
--custom-property: mixed, delimiters / can be, used;
}
```
```
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ div {
unknown-property
:
one-value ;
unknown-property: multiple
unknown-property: multiple
values;
unknown-property: delimited
, values
Expand Down Expand Up @@ -51,4 +51,4 @@ div {
delimiters / can be,
used;
}
```
```
Original file line number Diff line number Diff line change
Expand Up @@ -84,16 +84,35 @@ Quote style: Double Quotes

```css
@font-face {
unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF, U+ff??;
unicode-range:
U+000-49F,
U+2000-27FF,
U+2900-2BFF,
U+1D400-1D7FF,
U+ff??;
}

@font-face {
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
unicode-range:
U+0000-00FF,
U+0131,
U+0152-0153,
U+02C6,
U+02DA,
U+02DC,
U+2000-206F,
U+2074,
U+20AC,
U+2212,
U+2215;
}

@font-face {
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
unicode-range:
U+0400-045F,
U+0490-0491,
U+04B0-04B1,
U+2116;
}

@font-face {
Expand All @@ -104,8 +123,14 @@ Quote style: Double Quotes
unicode-range: U+0-7F;
unicode-range: U+0025-00FF; /* codepoint range */
unicode-range: U+4??; /* wildcard range */
unicode-range: U+0025-00FF, U+4??; /* multiple values */
unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F; /* multiple values */
unicode-range:
U+0025-00FF,
U+4??; /* multiple values */
unicode-range:
U+A5,
U+4E00-9FFF,
U+30??,
U+FF00-FF9F; /* multiple values */
unicode-range: U+????;
unicode-range: U+??????;
unicode-range: U+12;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ body
+ /* comment 11 */ color: red /* comment 12 */ !important /* comment 13 */; /* comment 14 */
/* comment 15 */
}

@font-face {
font-family: "Prettier";
- src: /* comment 16 */
Expand All @@ -110,7 +110,7 @@ body
+ /* comment 16 */ src: local(/* comment 17 */ "Prettier" /* comment 18 */), /* comment 19 */
+ /* comment 20 */ url("http://prettier.com/font.woff") /* comment 21 */; /* comment 22 */
}

.foo {
- /* comment 23 */
- color/* comment 24 */:/* comment 25 */ blue /* comment 26 */; /* comment 27 */
Expand Down Expand Up @@ -177,7 +177,7 @@ body
+ /* comment 73 */
/* comment 75 */
}

```

# Output
Expand Down Expand Up @@ -277,4 +277,4 @@ body {
14: /* comment 20 */ url("http://prettier.com/font.woff") /* comment 21 */; /* comment 22 */
18: /* comment 23 */ /* comment 24 */ /* comment 25 */ color: blue /* comment 26 */; /* comment 27 */
24: /* comment 34 */ /* comment 35 */ /* comment 36 */ color: blue /* comment 37 */; /* comment 38 */
```
```
Original file line number Diff line number Diff line change
Expand Up @@ -51,62 +51,62 @@ div {
fill.css:2:30 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

× unexpected character `$`

1 │ div {
> 2 │ border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%);
│ ^
3 │ $fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
4 │ }

fill.css:2:31 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

× expected `,` but instead found `warningBackgroundColors`

1 │ div {
> 2 │ border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%);
│ ^^^^^^^^^^^^^^^^^^^^^^^
3 │ $fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
4 │ }

i Remove warningBackgroundColors

fill.css:2:56 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

× unexpected character `$`

1 │ div {
> 2 │ border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%);
│ ^
3 │ $fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
4 │ }

fill.css:2:57 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

× expected `,` but instead found `warningBorderColors`

1 │ div {
> 2 │ border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%);
│ ^^^^^^^^^^^^^^^^^^^
3 │ $fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
4 │ }

i Remove warningBorderColors

fill.css:3:3 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

× unexpected character `$`

1 │ div {
2 │ border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%);
> 3 │ $fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
│ ^
4 │ }
5 │
5 │


```

# Lines exceeding max width of 80 characters
```
2: border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%);
```
```
Loading
Loading