-
-
Notifications
You must be signed in to change notification settings - Fork 503
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(biome_css_formatter): update css format style #4476
base: main
Are you sure you want to change the base?
Changes from 5 commits
c0cd5f2
a4e7942
cd688a5
b25b9d7
cd96410
87c39be
93dbf5d
1a9e77b
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -12,6 +12,45 @@ impl FormatNodeRule<CssGenericProperty> for FormatCssGenericProperty { | |
value, | ||
} = node.as_fields(); | ||
|
||
let is_dash_identity = name.clone().unwrap().as_css_dashed_identifier().is_some(); | ||
|
||
let has_comma = value.iter().any(|v| v.text().eq(",")); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Checking for a comma ( You can use the playground to surgically understand how to query it: https://biomejs.dev/playground/?lintRules=all&files.main.css=aAB0AG0AbAAgAHsACgAJAGYAbwBuAHQALQBmAGEAbQBpAGwAeQA6ACAAcwB5AHMAdABlAG0ALQB1AGkALAAgAC0AYQBwAHAAbABlAC0AcwB5AHMAdABlAG0AOwAKAH0A (Click on the comma on the left side, and it should point to the relative node on the right, in the syntax tab) |
||
|
||
if has_comma && !is_dash_identity { | ||
write!( | ||
f, | ||
[ | ||
name.format(), | ||
colon_token.format(), | ||
indent(&format_with(|f| { | ||
let last = value.last().unwrap(); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No |
||
|
||
for (idx, v) in value.iter().enumerate() { | ||
if idx == 0 { | ||
write!(f, [soft_line_break_or_space()])?; | ||
} | ||
|
||
if v.text().eq(",") { | ||
write!(f, [v.format(), hard_line_break()])?; | ||
} else if let Some(next) = value.iter().nth(idx + 1) { | ||
if next.text().eq(",") || v == last { | ||
write!(f, [v.format()])?; | ||
} else { | ||
write!(f, [v.format(), space()])?; | ||
} | ||
} else { | ||
write!(f, [v.format()])?; | ||
} | ||
} | ||
Comment on lines
+28
to
+44
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I am not really sure I understand what's happening here, so I am waiting for your to update the PR description and explain how the algorithm works. |
||
|
||
Ok(()) | ||
})), | ||
] | ||
)?; | ||
|
||
return Ok(()); | ||
} | ||
|
||
write!( | ||
f, | ||
[name.format(), colon_token.format(), space(), value.format()] | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,6 @@ | ||
--- | ||
source: crates/biome_formatter_test/src/snapshot_builder.rs | ||
assertion_line: 212 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Update |
||
info: css/atrule/font_face.css | ||
--- | ||
# Input | ||
|
@@ -114,33 +115,39 @@ Quote style: Double Quotes | |
```css | ||
@font-face { | ||
font-family: "Open Sans"; | ||
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), | ||
src: | ||
url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), | ||
url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); | ||
} | ||
@font-face { | ||
font-family: "Open Sans"; | ||
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), | ||
src: | ||
url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), | ||
url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); | ||
} | ||
@font-face { | ||
font-family: "Open Sans"; | ||
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), | ||
src: | ||
url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), | ||
url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); | ||
} | ||
@font-face { | ||
font-family: "Open Sans"; | ||
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), | ||
src: | ||
url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), | ||
url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); | ||
} | ||
@font-face { | ||
font-family: "Open Sans"; | ||
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), | ||
src: | ||
url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), | ||
url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); | ||
} | ||
@font-face { | ||
font-family: "Open Sans"; | ||
|
||
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), | ||
src: | ||
url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), | ||
url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); | ||
} | ||
``` |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,6 @@ | ||
--- | ||
source: crates/biome_formatter_test/src/snapshot_builder.rs | ||
assertion_line: 212 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If you see this line,it means you're using an old version of |
||
info: css/declaration_list.css | ||
--- | ||
# Input | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
html { | ||
font-family: system-ui, -apple-system; | ||
} | ||
|
||
body { | ||
font-family: sans-serif, serif, system-ui; | ||
} | ||
|
||
div { | ||
font-family: system-ui; | ||
} | ||
|
||
div { | ||
box-shadow: 10px 10px 10px 10px rgb(10 18 30 / 12%), 12px 10px 10px 10px rgb(10 18 30 / 16%); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
--- | ||
source: crates/biome_formatter_test/src/snapshot_builder.rs | ||
assertion_line: 212 | ||
info: css/properties/long_values.css | ||
--- | ||
# Input | ||
|
||
```css | ||
html { | ||
font-family: system-ui, -apple-system; | ||
} | ||
|
||
body { | ||
font-family: sans-serif, serif, system-ui; | ||
} | ||
|
||
div { | ||
font-family: system-ui; | ||
} | ||
|
||
div { | ||
box-shadow: 10px 10px 10px 10px rgb(10 18 30 / 12%), 12px 10px 10px 10px rgb(10 18 30 / 16%); | ||
} | ||
|
||
``` | ||
|
||
|
||
============================= | ||
|
||
# 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; | ||
} | ||
|
||
body { | ||
font-family: | ||
sans-serif, | ||
serif, | ||
system-ui; | ||
} | ||
|
||
div { | ||
font-family: system-ui; | ||
} | ||
|
||
div { | ||
box-shadow: | ||
10px 10px 10px 10px rgb(10 18 30 / 12%), | ||
12px 10px 10px 10px rgb(10 18 30 / 16%); | ||
} | ||
``` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Don't use
unwrap()
; you rarely need to use this method because it panics at runtime. In your case you can useCssDashedIdentifer::can_cast(name.syntax().kind())
;