diff --git a/crates/biome_css_formatter/src/css/properties/generic_property.rs b/crates/biome_css_formatter/src/css/properties/generic_property.rs index 480885566edf..e349fea74103 100644 --- a/crates/biome_css_formatter/src/css/properties/generic_property.rs +++ b/crates/biome_css_formatter/src/css/properties/generic_property.rs @@ -12,9 +12,47 @@ impl FormatNodeRule for FormatCssGenericProperty { value, } = node.as_fields(); - write!( - f, - [name.format(), colon_token.format(), space(), value.format()] - ) + let is_comma: bool = value.iter().any(|v| v.text().eq(",")); + + if is_comma { + write!( + f, + [ + name.format(), + colon_token.format(), + &soft_line_indent_or_hard_space(&format_once(|f| { + for (idx, v) in value.iter().enumerate() { + let is_last = idx == value.len() - 1; + + if is_last { + write!(f, [v.format()])?; + break; + } + + let Some(next) = value.iter().nth(idx + 1) else { + continue; + }; + + let next_is_comma = next.text().eq(","); + + if v.text().eq(",") { + write!(f, [v.format(), hard_line_break()])?; + } else if next_is_comma { + write!(f, [v.format()])?; + } else { + write!(f, [v.format(), space()])?; + } + } + + Ok(()) + })) + ] + ) + } else { + write!( + f, + [name.format(), colon_token.format(), space(), value.format()] + ) + } } } diff --git a/crates/biome_css_formatter/tests/specs/css/atrule/font_face.css.snap b/crates/biome_css_formatter/tests/specs/css/atrule/font_face.css.snap index 074b8b90af40..0543983a4bf9 100644 --- a/crates/biome_css_formatter/tests/specs/css/atrule/font_face.css.snap +++ b/crates/biome_css_formatter/tests/specs/css/atrule/font_face.css.snap @@ -114,33 +114,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"); } ``` diff --git a/crates/biome_css_formatter/tests/specs/css/block.css b/crates/biome_css_formatter/tests/specs/css/block.css index 2d5580a66d27..7f3ee7e8c0b2 100644 --- a/crates/biome_css_formatter/tests/specs/css/block.css +++ b/crates/biome_css_formatter/tests/specs/css/block.css @@ -18,4 +18,4 @@ color: blue; } -.always-new-line { color: blue; } \ No newline at end of file +.always-new-line { color: blue; } diff --git a/crates/biome_css_formatter/tests/specs/css/comma/comma.css b/crates/biome_css_formatter/tests/specs/css/comma/comma.css new file mode 100644 index 000000000000..fb09daec501c --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/comma/comma.css @@ -0,0 +1,11 @@ +div { + box-shadow: 0 0 1px 2px rgba(88, 144, 255, 0.75), 10px 20px 1px 2px rgba(87, 145, 254, 0.65); +} + +html { + font-family: system-ui, -apple-system; +} + +html { + font-family: -apple-system, system-ui; +} diff --git a/crates/biome_css_formatter/tests/specs/css/comma/comma.css.snap b/crates/biome_css_formatter/tests/specs/css/comma/comma.css.snap new file mode 100644 index 000000000000..5310ef570c0c --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/comma/comma.css.snap @@ -0,0 +1,55 @@ +--- +source: crates/biome_formatter_test/src/snapshot_builder.rs +info: css/comma/comma.css +--- +# Input + +```css +div { + box-shadow: 0 0 1px 2px rgba(88, 144, 255, 0.75), 10px 20px 1px 2px rgba(87, 145, 254, 0.65); +} + +html { + font-family: system-ui, -apple-system; +} + +html { + font-family: -apple-system, system-ui; +} + +``` + + +============================= + +# Outputs + +## Output 1 + +----- +Indent style: Tab +Indent width: 2 +Line ending: LF +Line width: 80 +Quote style: Double Quotes +----- + +```css +div { + box-shadow: + 0 0 1px 2px rgba(88, 144, 255, 0.75), + 10px 20px 1px 2px rgba(87, 145, 254, 0.65); +} + +html { + font-family: + system-ui, + -apple-system; +} + +html { + font-family: + -apple-system, + system-ui; +} +``` diff --git a/crates/biome_css_formatter/tests/specs/css/declaration_list.css.snap b/crates/biome_css_formatter/tests/specs/css/declaration_list.css.snap index 9db6650632b6..0311052bce44 100644 --- a/crates/biome_css_formatter/tests/specs/css/declaration_list.css.snap +++ b/crates/biome_css_formatter/tests/specs/css/declaration_list.css.snap @@ -51,7 +51,7 @@ a { color: blue; } } - + .without-comments { a, button { @@ -112,8 +112,14 @@ Quote style: Double Quotes a { --bs-font-monospace: sfmono-regular / menlo; - --bs-font-monospace: sfmono-regular, menlo, monaco, consolas, - "Liberation Mono", "Courier New", monospace; + --bs-font-monospace: + sfmono-regular, + menlo, + monaco, + consolas, + "Liberation Mono", + "Courier New", + monospace; } a { diff --git a/crates/biome_css_formatter/tests/specs/css/properties/all.css.snap b/crates/biome_css_formatter/tests/specs/css/properties/all.css.snap index 311d5acd6b32..7fef34651d38 100644 --- a/crates/biome_css_formatter/tests/specs/css/properties/all.css.snap +++ b/crates/biome_css_formatter/tests/specs/css/properties/all.css.snap @@ -63,7 +63,9 @@ div { all: revert-layer; all: unknown-value; - all: a, value list; + all: + a, + value list; } :root { diff --git a/crates/biome_css_formatter/tests/specs/css/properties/border.css.snap b/crates/biome_css_formatter/tests/specs/css/properties/border.css.snap index 17da2e3aaeff..c5488736ce26 100644 --- a/crates/biome_css_formatter/tests/specs/css/properties/border.css.snap +++ b/crates/biome_css_formatter/tests/specs/css/properties/border.css.snap @@ -25,23 +25,23 @@ div { /* */ border : ThIn; - border: + border: medium ; border: 100px; /* */ - border: + border: #fff; /* combinations */ border: 2px dotted; border : outset #f33; - border:#000 medium - + border:#000 medium + dashed - + ; } @@ -69,7 +69,9 @@ div { border: inherit; border: zzz-unknown-value; - border: a, value list; + border: + a, + value list; /* */ border: SOLID; diff --git a/crates/biome_css_formatter/tests/specs/css/properties/custom.css.snap b/crates/biome_css_formatter/tests/specs/css/properties/custom.css.snap index bfb1eaa23092..554a43ea069b 100644 --- a/crates/biome_css_formatter/tests/specs/css/properties/custom.css.snap +++ b/crates/biome_css_formatter/tests/specs/css/properties/custom.css.snap @@ -10,7 +10,7 @@ div { --custom-property : one-value ; - --custom-property: multiple + --custom-property: multiple values; --custom-property: delimited , values @@ -43,8 +43,13 @@ div { /* Custom property, always generic */ --custom-property: one-value; --custom-property: multiple values; - --custom-property: delimited, values; + --custom-property: + delimited, + values; --custom-property: delimited / slash / values; - --custom-property: mixed, delimiters / can be, used; + --custom-property: + mixed, + delimiters / can be, + used; } ``` diff --git a/crates/biome_css_formatter/tests/specs/css/properties/generic.css.snap b/crates/biome_css_formatter/tests/specs/css/properties/generic.css.snap index d74b33aae3c7..fc34d75ccfb3 100644 --- a/crates/biome_css_formatter/tests/specs/css/properties/generic.css.snap +++ b/crates/biome_css_formatter/tests/specs/css/properties/generic.css.snap @@ -10,7 +10,7 @@ div { unknown-property : one-value ; - unknown-property: multiple + unknown-property: multiple values; unknown-property: delimited , values @@ -43,8 +43,13 @@ div { /* Custom property, always generic */ unknown-property: one-value; unknown-property: multiple values; - unknown-property: delimited, values; + unknown-property: + delimited, + values; unknown-property: delimited / slash / values; - unknown-property: mixed, delimiters / can be, used; + unknown-property: + mixed, + delimiters / can be, + used; } ``` diff --git a/crates/biome_css_formatter/tests/specs/css/properties/long_values.css b/crates/biome_css_formatter/tests/specs/css/properties/long_values.css new file mode 100644 index 000000000000..7357d6490b18 --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/properties/long_values.css @@ -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%); +} diff --git a/crates/biome_css_formatter/tests/specs/css/properties/long_values.css.snap b/crates/biome_css_formatter/tests/specs/css/properties/long_values.css.snap new file mode 100644 index 000000000000..a48800a85ecc --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/properties/long_values.css.snap @@ -0,0 +1,64 @@ +--- +source: crates/biome_formatter_test/src/snapshot_builder.rs +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%); +} +``` diff --git a/crates/biome_css_formatter/tests/specs/css/properties/unicode_range.css.snap b/crates/biome_css_formatter/tests/specs/css/properties/unicode_range.css.snap index 6168574594f3..60639db117df 100644 --- a/crates/biome_css_formatter/tests/specs/css/properties/unicode_range.css.snap +++ b/crates/biome_css_formatter/tests/specs/css/properties/unicode_range.css.snap @@ -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 { @@ -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; diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/font-face.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/font-face.css.snap deleted file mode 100644 index da7a053ca57c..000000000000 --- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/font-face.css.snap +++ /dev/null @@ -1,186 +0,0 @@ ---- -source: crates/biome_formatter_test/src/snapshot_builder.rs -info: css/atrule/font-face.css ---- -# Input - -```css -@font-face { - font-family: "Open Sans"; - 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"), -url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); -} -@font-face{ - font-family: "Open Sans"; - 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"), - url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); -} -@font-face -{ -font-family -: -"Open Sans" -; -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" - -) - -, - -url( - -"/fonts/OpenSans-Regular-webfont.woff" - -) - -format( - - -"woff" - -) - -; - -} - -``` - - -# Prettier differences - -```diff ---- Prettier -+++ Biome -@@ -1,37 +1,31 @@ - @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"); - } -``` - -# Output - -```css -@font-face { - font-family: "Open Sans"; - 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"), - url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); -} -@font-face { - font-family: "Open Sans"; - 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"), - url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); -} -@font-face { - font-family: "Open Sans"; - 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"), - url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); -} -``` diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/comments/declaration.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/comments/declaration.css.snap index 28ebfaa8791b..fed1b4b7da2c 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/comments/declaration.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/comments/declaration.css.snap @@ -86,7 +86,7 @@ body ```diff --- Prettier +++ Biome -@@ -1,58 +1,54 @@ +@@ -1,58 +1,55 @@ a { /* comment 1 */ - /* comment 2 */ @@ -100,17 +100,18 @@ body + /* comment 11 */ color: red /* comment 12 */ !important /* comment 13 */; /* comment 14 */ /* comment 15 */ } - + @font-face { font-family: "Prettier"; - src: /* comment 16 */ - local(/* comment 17 */ "Prettier" /* comment 18 */), - /* comment 19 */ /* comment 20 */ url("http://prettier.com/font.woff") - /* comment 21 */; /* comment 22 */ -+ /* comment 16 */ src: local(/* comment 17 */ "Prettier" /* comment 18 */), /* comment 19 */ ++ /* 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 */ @@ -177,7 +178,7 @@ body + /* comment 73 */ /* comment 75 */ } - + ``` # Output @@ -195,7 +196,8 @@ a { @font-face { font-family: "Prettier"; - /* comment 16 */ src: local(/* comment 17 */ "Prettier" /* comment 18 */), /* comment 19 */ + /* comment 16 */ src: + local(/* comment 17 */ "Prettier" /* comment 18 */), /* comment 19 */ /* comment 20 */ url("http://prettier.com/font.woff") /* comment 21 */; /* comment 22 */ } @@ -273,8 +275,7 @@ body { # Lines exceeding max width of 80 characters ``` 7: /* comment 11 */ color: red /* comment 12 */ !important /* comment 13 */; /* comment 14 */ - 13: /* comment 16 */ src: local(/* comment 17 */ "Prettier" /* comment 18 */), /* comment 19 */ - 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 */ + 15: /* comment 20 */ url("http://prettier.com/font.woff") /* comment 21 */; /* comment 22 */ + 19: /* comment 23 */ /* comment 24 */ /* comment 25 */ color: blue /* comment 26 */; /* comment 27 */ + 25: /* comment 34 */ /* comment 35 */ /* comment 36 */ color: blue /* comment 37 */; /* comment 38 */ ``` diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/fill-value/fill.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/fill-value/fill.css.snap index d8d0f6d8745d..827c90ffdb15 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/fill-value/fill.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/fill-value/fill.css.snap @@ -18,21 +18,17 @@ div { ```diff --- Prettier +++ Biome -@@ -1,11 +1,6 @@ +@@ -1,7 +1,7 @@ div { - border-left: 1px solid - mix($warningBackgroundColors, $warningBorderColors, 50%); - $fontFamily: -- "Lato", -- -apple-system, -- "Helvetica Neue", -- Helvetica, -- Arial, + border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%); + $ -+ fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, - sans-serif; - } ++ fontFamily: + "Lato", + -apple-system, + "Helvetica Neue", ``` # Output @@ -41,7 +37,12 @@ div { div { border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%); $ - fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, + fontFamily: + "Lato", + -apple-system, + "Helvetica Neue", + Helvetica, + Arial, sans-serif; } ``` @@ -51,58 +52,58 @@ 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 │ + ``` diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/indent/indent.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/indent/indent.css.snap index 222d488ce363..5b6fa301d7a8 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/indent/indent.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/indent/indent.css.snap @@ -19,15 +19,8 @@ div { ```diff --- Prettier +++ Biome -@@ -1,11 +1,10 @@ - div { - background: var(fig-light-02) url(/images/inset-shadow-east-ltr.png) 100% 0 - repeat-y; -- box-shadow: -- 0 0 1px 2px rgba(88, 144, 255, 0.75), -- 0 1px 1px rgba(0, 0, 0, 0.15); -+ box-shadow: 0 0 1px 2px rgba(88, 144, 255, 0.75), 0 1px 1px -+ rgba(0, 0, 0, 0.15); +@@ -6,6 +6,6 @@ + 0 1px 1px rgba(0, 0, 0, 0.15); padding-bottom: calc( var(ads-help-tray-footer-with-support-link-height) + - var(ads-help-tray-header-height-new) @@ -42,8 +35,9 @@ div { div { background: var(fig-light-02) url(/images/inset-shadow-east-ltr.png) 100% 0 repeat-y; - box-shadow: 0 0 1px 2px rgba(88, 144, 255, 0.75), 0 1px 1px - rgba(0, 0, 0, 0.15); + box-shadow: + 0 0 1px 2px rgba(88, 144, 255, 0.75), + 0 1px 1px rgba(0, 0, 0, 0.15); padding-bottom: calc( var(ads-help-tray-footer-with-support-link-height) + var(ads-help-tray-header-height-new) diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/modules/modules.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/modules/modules.css.snap new file mode 100644 index 000000000000..4264612b2d78 --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/prettier/css/modules/modules.css.snap @@ -0,0 +1,165 @@ +--- +source: crates/biome_formatter_test/src/snapshot_builder.rs +info: css/modules/modules.css +--- +# Input + +```css +@value colors: './colors.css'; +@value first, second, third from colors; + +.title { + @nest :global(h1)& { + background: red; + } +} + +.className { + color: green; + background: red; +} + +.otherClassName { + composes: className; + color: yellow; +} + +.otherClassName { + composes: className from "./style.css"; +} + +.otherClassName { + composes: globalClassName from global; +} + +:global { + .global-class-name { + color: green; + } +} + +.root :global .text { + color: brown; + font-size: 24px; + font-family: helvetica, arial, sans-serif; + font-weight: 600; +} + +:import("path/to/dep.css") { + localAlias: keyFromDep; +} +:export { + exportedKey: exportedValue; +} + +@keyframes :global(spin) { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +``` + + +# Prettier differences + +```diff +--- Prettier ++++ Biome +@@ -34,7 +34,10 @@ + .root :global .text { + color: brown; + font-size: 24px; +- font-family: helvetica, arial, sans-serif; ++ font-family: ++ helvetica, ++ arial, ++ sans-serif; + font-weight: 600; + } + +``` + +# Output + +```css +@value colors: './colors.css'; +@value first, second, third from colors; + +.title { + @nest :global(h1)& { + background: red; + } +} + +.className { + color: green; + background: red; +} + +.otherClassName { + composes: className; + color: yellow; +} + +.otherClassName { + composes: className from "./style.css"; +} + +.otherClassName { + composes: globalClassName from global; +} + +:global { + .global-class-name { + color: green; + } +} + +.root :global .text { + color: brown; + font-size: 24px; + font-family: + helvetica, + arial, + sans-serif; + font-weight: 600; +} + +:import("path/to/dep.css") { + localAlias: keyFromDep; +} +:export { + exportedKey: exportedValue; +} + +@keyframes :global(spin) { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +``` + +# Errors +``` +modules.css:41:8 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + × expected `,` but instead found `(` + + 39 │ } + 40 │ + > 41 │ :import("path/to/dep.css") { + │ ^ + 42 │ localAlias: keyFromDep; + 43 │ } + + i Remove ( + + +``` diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/parens/parens.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/parens/parens.css.snap index 66d4aaab9a83..2a821faa58ff 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/parens/parens.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/parens/parens.css.snap @@ -347,6 +347,15 @@ a { prop77: calc(-5px); prop78: calc(+5px); prop79: calc(-100px + 100px); +@@ -156,5 +156,7 @@ + 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+0025-00FF, ++ U+4??; /* multiple values */ + } ``` # Output @@ -510,7 +519,9 @@ a { 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+0025-00FF, + U+4??; /* multiple values */ } ``` @@ -519,27 +530,27 @@ a { parens.css:108:26 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Invalid color - + 106 │ color: var( --main-bg-color ); 107 │ background-color: rgb( 255, 0, 0 ); > 108 │ background: element( #css-source ); │ ^ 109 │ padding-top: var( --paddingC ); 110 │ margin: 1*1 (1)*1 1*(1) (1)*(1); - + parens.css:110:12 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 108 │ background: element( #css-source ); 109 │ padding-top: var( --paddingC ); > 110 │ margin: 1*1 (1)*1 1*(1) (1)*(1); │ ^^^^^^^^^^^^^^^^^^^^^^ 111 │ prop: -1*-1 -(-1)*-1 -1*-(-1) -(-1)*-(-1); 112 │ prop4: +1; - + i Expected one of: - + - identifier - string - number @@ -547,20 +558,20 @@ parens.css:110:12 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:111:11 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 109 │ padding-top: var( --paddingC ); 110 │ margin: 1*1 (1)*1 1*(1) (1)*(1); > 111 │ prop: -1*-1 -(-1)*-1 -1*-(-1) -(-1)*-(-1); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 112 │ prop4: +1; 113 │ prop5: -1; - + i Expected one of: - + - identifier - string - number @@ -568,20 +579,20 @@ parens.css:111:11 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:114:15 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 112 │ prop4: +1; 113 │ prop5: -1; > 114 │ prop6: word + 1; /* word1 */ │ ^^^ 115 │ prop7: word - 1; /* word-1 */ 116 │ prop8: +1 +1 +1 +1; /* +1 +1 +1 +1 */ - + i Expected one of: - + - identifier - string - number @@ -589,20 +600,20 @@ parens.css:114:15 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:115:15 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 113 │ prop5: -1; 114 │ prop6: word + 1; /* word1 */ > 115 │ prop7: word - 1; /* word-1 */ │ ^^^ 116 │ prop8: +1 +1 +1 +1; /* +1 +1 +1 +1 */ 117 │ prop9: -1 -1 -1 -1; /* -1 -1 -1 -1 */ - + i Expected one of: - + - identifier - string - number @@ -610,20 +621,20 @@ parens.css:115:15 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:118:11 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 116 │ prop8: +1 +1 +1 +1; /* +1 +1 +1 +1 */ 117 │ prop9: -1 -1 -1 -1; /* -1 -1 -1 -1 */ > 118 │ prop10: (-1); │ ^^^^ 119 │ prop11: (+1); 120 │ prop12: 10px/8px; - + i Expected one of: - + - identifier - string - number @@ -631,20 +642,20 @@ parens.css:118:11 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:119:11 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 117 │ prop9: -1 -1 -1 -1; /* -1 -1 -1 -1 */ 118 │ prop10: (-1); > 119 │ prop11: (+1); │ ^^^^ 120 │ prop12: 10px/8px; 121 │ prop13: round(1.5)/2 round(1.5) /2 round(1.5)/ 2 round(1.5) / 2; - + i Expected one of: - + - identifier - string - number @@ -652,20 +663,20 @@ parens.css:119:11 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:123:11 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 121 │ prop13: round(1.5)/2 round(1.5) /2 round(1.5)/ 2 round(1.5) / 2; 122 │ prop14: 2/round(1.5) 2 /round(1.5) 2/ round(1.5) 2 / round(1.5); > 123 │ prop15: (round(1.5)/2) (round(1.5) /2) (round(1.5)/ 2) (round(1.5) / 2); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 124 │ prop16: (2/round(1.5)) (2 /round(1.5)) (2/ round(1.5)) (2 / round(1.5)); 125 │ prop26: 8px/2px 8px /1 1/ 2px 1 / 2; - + i Expected one of: - + - identifier - string - number @@ -673,20 +684,20 @@ parens.css:123:11 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:124:11 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 122 │ prop14: 2/round(1.5) 2 /round(1.5) 2/ round(1.5) 2 / round(1.5); 123 │ prop15: (round(1.5)/2) (round(1.5) /2) (round(1.5)/ 2) (round(1.5) / 2); > 124 │ prop16: (2/round(1.5)) (2 /round(1.5)) (2/ round(1.5)) (2 / round(1.5)); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 125 │ prop26: 8px/2px 8px /1 1/ 2px 1 / 2; 126 │ prop27: 8px/2px 8px/1 1/2px 1/2; - + i Expected one of: - + - identifier - string - number @@ -694,20 +705,20 @@ parens.css:124:11 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:128:11 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 126 │ prop27: 8px/2px 8px/1 1/2px 1/2; 127 │ prop28: 8px / 2px 8px / 1 1 / 2px 1 / 2; > 128 │ prop29: (8px/2px) (8px/1) (1/2px) (1/2); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 129 │ prop30: (8px / 2px) (8px / 1) (1 / 2px) (1 / 2); 130 │ prop32: func(8px/2); - + i Expected one of: - + - identifier - string - number @@ -715,20 +726,20 @@ parens.css:128:11 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:129:11 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 127 │ prop28: 8px / 2px 8px / 1 1 / 2px 1 / 2; 128 │ prop29: (8px/2px) (8px/1) (1/2px) (1/2); > 129 │ prop30: (8px / 2px) (8px / 1) (1 / 2px) (1 / 2); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 130 │ prop32: func(8px/2); 131 │ prop33: 5px + 8px/2px; - + i Expected one of: - + - identifier - string - number @@ -736,20 +747,20 @@ parens.css:129:11 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:131:15 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 129 │ prop30: (8px / 2px) (8px / 1) (1 / 2px) (1 / 2); 130 │ prop32: func(8px/2); > 131 │ prop33: 5px + 8px/2px; │ ^^^^^^^^^ 132 │ prop34: func(+20px, + 20px); 133 │ prop35: 1+1+1+1; - + i Expected one of: - + - identifier - string - number @@ -757,53 +768,53 @@ parens.css:131:15 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:132:23 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Expected a declaration item but instead found '+'. - + 130 │ prop32: func(8px/2); 131 │ prop33: 5px + 8px/2px; > 132 │ prop34: func(+20px, + 20px); │ ^ 133 │ prop35: 1+1+1+1; 134 │ prop36: 1 + 1 + 1 + 1; - + i Expected a declaration item here. - + 130 │ prop32: func(8px/2); 131 │ prop33: 5px + 8px/2px; > 132 │ prop34: func(+20px, + 20px); │ ^ 133 │ prop35: 1+1+1+1; 134 │ prop36: 1 + 1 + 1 + 1; - + parens.css:132:25 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × expected `,` but instead found `20` - + 130 │ prop32: func(8px/2); 131 │ prop33: 5px + 8px/2px; > 132 │ prop34: func(+20px, + 20px); │ ^^ 133 │ prop35: 1+1+1+1; 134 │ prop36: 1 + 1 + 1 + 1; - + i Remove 20 - + parens.css:134:13 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 132 │ prop34: func(+20px, + 20px); 133 │ prop35: 1+1+1+1; > 134 │ prop36: 1 + 1 + 1 + 1; │ ^^^^^^^^^^^ 135 │ prop37: 1 +1 1 +1; 136 │ prop38: ++1; - + i Expected one of: - + - identifier - string - number @@ -811,20 +822,20 @@ parens.css:134:13 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:136:11 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 134 │ prop36: 1 + 1 + 1 + 1; 135 │ prop37: 1 +1 1 +1; > 136 │ prop38: ++1; │ ^^^ 137 │ prop39: ++(1); 138 │ prop40: --1; - + i Expected one of: - + - identifier - string - number @@ -832,20 +843,20 @@ parens.css:136:11 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:137:11 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 135 │ prop37: 1 +1 1 +1; 136 │ prop38: ++1; > 137 │ prop39: ++(1); │ ^^^^^ 138 │ prop40: --1; 139 │ prop41: --(1); - + i Expected one of: - + - identifier - string - number @@ -853,20 +864,20 @@ parens.css:137:11 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:139:11 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 137 │ prop39: ++(1); 138 │ prop40: --1; > 139 │ prop41: --(1); │ ^^^^^ 140 │ prop42: 1px+1px+1px+1px; 141 │ prop43: 1px + 1px + 1px + 1px; - + i Expected one of: - + - identifier - string - number @@ -874,20 +885,20 @@ parens.css:139:11 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:141:15 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 139 │ prop41: --(1); 140 │ prop42: 1px+1px+1px+1px; > 141 │ prop43: 1px + 1px + 1px + 1px; │ ^^^^^^^^^^^^^^^^^ 142 │ prop44: -1+-1 -(-1)+-1 -1+-(-1) -(-1)+-(-1); 143 │ prop45: round(1.5)*2 round(1.5) *2 round(1.5)* 2 round(1.5) * 2; - + i Expected one of: - + - identifier - string - number @@ -895,20 +906,20 @@ parens.css:141:15 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:142:13 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 140 │ prop42: 1px+1px+1px+1px; 141 │ prop43: 1px + 1px + 1px + 1px; > 142 │ prop44: -1+-1 -(-1)+-1 -1+-(-1) -(-1)+-(-1); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 143 │ prop45: round(1.5)*2 round(1.5) *2 round(1.5)* 2 round(1.5) * 2; 144 │ prop46: 2*round(1.5) 2 *round(1.5) 2* round(1.5) 2 * round(1.5); - + i Expected one of: - + - identifier - string - number @@ -916,20 +927,20 @@ parens.css:142:13 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:143:21 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 141 │ prop43: 1px + 1px + 1px + 1px; 142 │ prop44: -1+-1 -(-1)+-1 -1+-(-1) -(-1)+-(-1); > 143 │ prop45: round(1.5)*2 round(1.5) *2 round(1.5)* 2 round(1.5) * 2; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 144 │ prop46: 2*round(1.5) 2 *round(1.5) 2* round(1.5) 2 * round(1.5); 145 │ prop47: (round(1.5)*2) (round(1.5) *2) (round(1.5)* 2) (round(1.5) * 2); - + i Expected one of: - + - identifier - string - number @@ -937,20 +948,20 @@ parens.css:143:21 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:144:12 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 142 │ prop44: -1+-1 -(-1)+-1 -1+-(-1) -(-1)+-(-1); 143 │ prop45: round(1.5)*2 round(1.5) *2 round(1.5)* 2 round(1.5) * 2; > 144 │ prop46: 2*round(1.5) 2 *round(1.5) 2* round(1.5) 2 * round(1.5); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 145 │ prop47: (round(1.5)*2) (round(1.5) *2) (round(1.5)* 2) (round(1.5) * 2); 146 │ prop48: (2*round(1.5)) (2 *round(1.5)) (2* round(1.5)) (2 * round(1.5)); - + i Expected one of: - + - identifier - string - number @@ -958,20 +969,20 @@ parens.css:144:12 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:145:11 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 143 │ prop45: round(1.5)*2 round(1.5) *2 round(1.5)* 2 round(1.5) * 2; 144 │ prop46: 2*round(1.5) 2 *round(1.5) 2* round(1.5) 2 * round(1.5); > 145 │ prop47: (round(1.5)*2) (round(1.5) *2) (round(1.5)* 2) (round(1.5) * 2); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 146 │ prop48: (2*round(1.5)) (2 *round(1.5)) (2* round(1.5)) (2 * round(1.5)); 147 │ prop57: round(1.5)+2 round(1.5) +2 round(1.5)+ 2 round(1.5) + 2; - + i Expected one of: - + - identifier - string - number @@ -979,20 +990,20 @@ parens.css:145:11 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:146:11 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 144 │ prop46: 2*round(1.5) 2 *round(1.5) 2* round(1.5) 2 * round(1.5); 145 │ prop47: (round(1.5)*2) (round(1.5) *2) (round(1.5)* 2) (round(1.5) * 2); > 146 │ prop48: (2*round(1.5)) (2 *round(1.5)) (2* round(1.5)) (2 * round(1.5)); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 147 │ prop57: round(1.5)+2 round(1.5) +2 round(1.5)+ 2 round(1.5) + 2; 148 │ prop58: 2+round(1.5) 2 +round(1.5) 2+ round(1.5) 2 + round(1.5); - + i Expected one of: - + - identifier - string - number @@ -1000,20 +1011,20 @@ parens.css:146:11 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:147:48 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 145 │ prop47: (round(1.5)*2) (round(1.5) *2) (round(1.5)* 2) (round(1.5) * 2); 146 │ prop48: (2*round(1.5)) (2 *round(1.5)) (2* round(1.5)) (2 * round(1.5)); > 147 │ prop57: round(1.5)+2 round(1.5) +2 round(1.5)+ 2 round(1.5) + 2; │ ^^^^^^^^^^^^^^^^^^ 148 │ prop58: 2+round(1.5) 2 +round(1.5) 2+ round(1.5) 2 + round(1.5); 149 │ prop59: (round(1.5)+2) (round(1.5) +2) (round(1.5)+ 2) (round(1.5) + 2); - + i Expected one of: - + - identifier - string - number @@ -1021,20 +1032,20 @@ parens.css:147:48 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:148:12 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 146 │ prop48: (2*round(1.5)) (2 *round(1.5)) (2* round(1.5)) (2 * round(1.5)); 147 │ prop57: round(1.5)+2 round(1.5) +2 round(1.5)+ 2 round(1.5) + 2; > 148 │ prop58: 2+round(1.5) 2 +round(1.5) 2+ round(1.5) 2 + round(1.5); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 149 │ prop59: (round(1.5)+2) (round(1.5) +2) (round(1.5)+ 2) (round(1.5) + 2); 150 │ prop60: (2+round(1.5)) (2 +round(1.5)) (2+ round(1.5)) (2 + round(1.5)); - + i Expected one of: - + - identifier - string - number @@ -1042,20 +1053,20 @@ parens.css:148:12 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:149:11 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 147 │ prop57: round(1.5)+2 round(1.5) +2 round(1.5)+ 2 round(1.5) + 2; 148 │ prop58: 2+round(1.5) 2 +round(1.5) 2+ round(1.5) 2 + round(1.5); > 149 │ prop59: (round(1.5)+2) (round(1.5) +2) (round(1.5)+ 2) (round(1.5) + 2); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 150 │ prop60: (2+round(1.5)) (2 +round(1.5)) (2+ round(1.5)) (2 + round(1.5)); 151 │ prop69: "test"+1 "test" +1 "test"+ 1 "test" + 1; - + i Expected one of: - + - identifier - string - number @@ -1063,20 +1074,20 @@ parens.css:149:11 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:150:11 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 148 │ prop58: 2+round(1.5) 2 +round(1.5) 2+ round(1.5) 2 + round(1.5); 149 │ prop59: (round(1.5)+2) (round(1.5) +2) (round(1.5)+ 2) (round(1.5) + 2); > 150 │ prop60: (2+round(1.5)) (2 +round(1.5)) (2+ round(1.5)) (2 + round(1.5)); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 151 │ prop69: "test"+1 "test" +1 "test"+ 1 "test" + 1; 152 │ prop70: 1+"test" 1 +"test" 1+ "test" 1 + "test"; - + i Expected one of: - + - identifier - string - number @@ -1084,20 +1095,20 @@ parens.css:150:11 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:151:36 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 149 │ prop59: (round(1.5)+2) (round(1.5) +2) (round(1.5)+ 2) (round(1.5) + 2); 150 │ prop60: (2+round(1.5)) (2 +round(1.5)) (2+ round(1.5)) (2 + round(1.5)); > 151 │ prop69: "test"+1 "test" +1 "test"+ 1 "test" + 1; │ ^^^^^^^^^^^^^^ 152 │ prop70: 1+"test" 1 +"test" 1+ "test" 1 + "test"; 153 │ prop71: "test"-1 "test" -1 "test"- 1 "test" - 1; - + i Expected one of: - + - identifier - string - number @@ -1105,20 +1116,20 @@ parens.css:151:36 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:152:12 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 150 │ prop60: (2+round(1.5)) (2 +round(1.5)) (2+ round(1.5)) (2 + round(1.5)); 151 │ prop69: "test"+1 "test" +1 "test"+ 1 "test" + 1; > 152 │ prop70: 1+"test" 1 +"test" 1+ "test" 1 + "test"; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 153 │ prop71: "test"-1 "test" -1 "test"- 1 "test" - 1; 154 │ prop72: 1-"test" 1 -"test" 1- "test" 1 - "test"; - + i Expected one of: - + - identifier - string - number @@ -1126,20 +1137,20 @@ parens.css:152:12 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:153:36 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 151 │ prop69: "test"+1 "test" +1 "test"+ 1 "test" + 1; 152 │ prop70: 1+"test" 1 +"test" 1+ "test" 1 + "test"; > 153 │ prop71: "test"-1 "test" -1 "test"- 1 "test" - 1; │ ^^^^^^^^^^^^^^ 154 │ prop72: 1-"test" 1 -"test" 1- "test" 1 - "test"; 155 │ prop73: calc(100%*2px) calc(100% *2px) calc(100%* 2px) calc(100% * 2px); - + i Expected one of: - + - identifier - string - number @@ -1147,20 +1158,20 @@ parens.css:153:36 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:154:12 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 152 │ prop70: 1+"test" 1 +"test" 1+ "test" 1 + "test"; 153 │ prop71: "test"-1 "test" -1 "test"- 1 "test" - 1; > 154 │ prop72: 1-"test" 1 -"test" 1- "test" 1 - "test"; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 155 │ prop73: calc(100%*2px) calc(100% *2px) calc(100%* 2px) calc(100% * 2px); 156 │ prop74: calc(100%/2px) calc(100% /2px) calc(100%/ 2px) calc(100% / 2px); - + i Expected one of: - + - identifier - string - number @@ -1168,19 +1179,19 @@ parens.css:154:12 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:240:19 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 239 │ .bar { > 240 │ filter: progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr='#fff',endColorstr='#000'); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 241 │ filter: progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=45, Strength=6) progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=135, Strength=6); 242 │ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#fad59f, endColorstr=#fa9907)"; - + i Expected one of: - + - identifier - string - number @@ -1188,20 +1199,20 @@ parens.css:240:19 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + parens.css:241:19 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 239 │ .bar { 240 │ filter: progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr='#fff',endColorstr='#000'); > 241 │ filter: progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=45, Strength=6) progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=135, Strength=6); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 242 │ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#fad59f, endColorstr=#fa9907)"; 243 │ } - + i Expected one of: - + - identifier - string - number @@ -1209,7 +1220,7 @@ parens.css:241:19 parse ━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + ``` diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/url/url.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/url/url.css.snap index 28859ed6f3dc..e3523f1ff513 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/url/url.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/url/url.css.snap @@ -45,7 +45,7 @@ a { ```diff --- Prettier +++ Biome -@@ -13,16 +13,17 @@ +@@ -13,17 +13,17 @@ content: url(https://example.com/\)\).jpg); content: url(https://example.com/\(\(.jpg); content: url(https://example.com/\ \ .jpg); @@ -54,7 +54,7 @@ a { + content: url(https://example.com/\)\).jpg); + content: url(https://example.com/\(\(.jpg); content: url(https://example.com/\ \ .jpg); - + - background: no-repeat url(https://example.com/\)\).jpg), + background: + no-repeat url(https://example.com/\)\).jpg), @@ -67,8 +67,10 @@ a { - no-repeat url( https://example.com/\(\(.jpg ), - no-repeat url( https://example.com/\ \ .jpg ), no-repeat url(foo.ttf?query=foo,bar,), - no-repeat url(foo.woff2?foo=rgb\(255,255,0\)) - no-repeat url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf); +- no-repeat url(foo.woff2?foo=rgb\(255,255,0\)) +- no-repeat url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf); ++ no-repeat url(foo.woff2?foo=rgb\(255,255,0\)) no-repeat url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf); + } ``` # Output @@ -101,8 +103,7 @@ a { no-repeat url(https://example.com/\(\(.jpg), no-repeat url(https://example.com/\ \ .jpg), no-repeat url(foo.ttf?query=foo,bar,), - no-repeat url(foo.woff2?foo=rgb\(255,255,0\)) - no-repeat url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf); + no-repeat url(foo.woff2?foo=rgb\(255,255,0\)) no-repeat url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf); } ``` @@ -111,49 +112,49 @@ a { url.css:3:23 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Expected a declaration item but instead found '/'. - + 1 │ div { 2 │ background: url(/images/bg.png); > 3 │ background: -fb-url(/images/bg.png); │ ^ 4 │ } - 5 │ - + 5 │ + i Expected a declaration item here. - + 1 │ div { 2 │ background: url(/images/bg.png); > 3 │ background: -fb-url(/images/bg.png); │ ^ 4 │ } - 5 │ - + 5 │ + url.css:3:24 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × expected `,` but instead found `images` - + 1 │ div { 2 │ background: url(/images/bg.png); > 3 │ background: -fb-url(/images/bg.png); │ ^^^^^^ 4 │ } - 5 │ - + 5 │ + i Remove images - + url.css:3:33 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. - + 1 │ div { 2 │ background: url(/images/bg.png); > 3 │ background: -fb-url(/images/bg.png); │ ^^^^ 4 │ } - 5 │ - + 5 │ + i Expected one of: - + - identifier - string - number @@ -161,12 +162,12 @@ url.css:3:33 parse ━━━━━━━━━━━━━━━━━━━━ - ratio - custom property - function - + ``` # Lines exceeding max width of 80 characters ``` 7: src: url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf); - 29: no-repeat url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf); + 28: no-repeat url(foo.woff2?foo=rgb\(255,255,0\)) no-repeat url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf); ```