diff --git a/CHANGELOG.md b/CHANGELOG.md index 93e05df209ad..586b1654ffd9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b #### Bug fixes - Fix [#3069](https://github.com/biomejs/biome/issues/3069), prevent overwriting paths when using `--staged` or `--changed` options. Contributed by @unvalley +- Fix the bug where whitespace after the & character in CSS nesting was incorrectly trimmed, ensuring proper targeting of child classes [#3061](https://github.com/biomejs/biome/issues/3061). Contributed by @denbezrukov ### Linter diff --git a/crates/biome_css_formatter/tests/quick_test.rs b/crates/biome_css_formatter/tests/quick_test.rs index 3960b0a54e64..43c7f28ab2f3 100644 --- a/crates/biome_css_formatter/tests/quick_test.rs +++ b/crates/biome_css_formatter/tests/quick_test.rs @@ -13,18 +13,12 @@ mod language { // use this test check if your snippet prints as you wish, without using a snapshot fn quick_test() { let src = r#" -:root { - --bs-gradient: linear-gradient( - 180deg, - 180deg, - 180deg, - 180deg, - 180deg, - 180deg, - 180deg - ); +.container { + & + .child { + color: blue; + } } - "#; let parse = parse_css(src, CssParserOptions::default()); println!("{:#?}", parse); diff --git a/crates/biome_css_formatter/tests/specs/css/nesting/nesting.css b/crates/biome_css_formatter/tests/specs/css/nesting/nesting.css index 98104ba6cd50..fb4968da689b 100644 --- a/crates/biome_css_formatter/tests/specs/css/nesting/nesting.css +++ b/crates/biome_css_formatter/tests/specs/css/nesting/nesting.css @@ -174,3 +174,112 @@ article { } } } + +/*should be without whitespace*/ + +.container { + &.child { + color: blue; + } +} +.container {&:child { + color: blue; +} +} + +.container {&|d { + color: blue; +} +} + +.container {&* { + color: blue; +} +} + +.container {&* +.selector{ + color: blue; +} +} + +/*should keep whitespace*/ + +.container { + & .child { + color: blue; + } +} + +.container { + & + .child { + color: blue; + } +} + +.container {& :child { + color: blue; +} +} + +.container {& +:child { + color: blue; + } +} + +.container {& +.child { + color: blue; + } +} + +.container {& .child { + color: blue; +} +} + +.container {& +|d { + color: blue; + } +} + +.container {& |d { + color: blue; +} +} + +.container {& +div { + color: blue; + } +} + +.container {& div { + color: blue; +} +} + +.container {& +* { + color: blue; + } +} + +.container {& * { + color: blue; +} +} + +.container {& +[lang=ru] { + color: blue; +} +} + +.container {& [lang=ru] { + color: blue; +} +} diff --git a/crates/biome_css_formatter/tests/specs/css/nesting/nesting.css.snap b/crates/biome_css_formatter/tests/specs/css/nesting/nesting.css.snap index 349f6275bc19..e9827cffac19 100644 --- a/crates/biome_css_formatter/tests/specs/css/nesting/nesting.css.snap +++ b/crates/biome_css_formatter/tests/specs/css/nesting/nesting.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/nesting/nesting.css --- - # Input ```css @@ -183,6 +182,115 @@ article { } } +/*should be without whitespace*/ + +.container { + &.child { + color: blue; + } +} +.container {&:child { + color: blue; +} +} + +.container {&|d { + color: blue; +} +} + +.container {&* { + color: blue; +} +} + +.container {&* +.selector{ + color: blue; +} +} + +/*should keep whitespace*/ + +.container { + & .child { + color: blue; + } +} + +.container { + & + .child { + color: blue; + } +} + +.container {& :child { + color: blue; +} +} + +.container {& +:child { + color: blue; + } +} + +.container {& +.child { + color: blue; + } +} + +.container {& .child { + color: blue; +} +} + +.container {& +|d { + color: blue; + } +} + +.container {& |d { + color: blue; +} +} + +.container {& +div { + color: blue; + } +} + +.container {& div { + color: blue; +} +} + +.container {& +* { + color: blue; + } +} + +.container {& * { + color: blue; +} +} + +.container {& +[lang=ru] { + color: blue; +} +} + +.container {& [lang=ru] { + color: blue; +} +} + ``` @@ -202,7 +310,7 @@ Quote style: Double Quotes ```css table.colortable { - &td { + & td { text-align: center; &.c { text-transform: uppercase; @@ -213,7 +321,7 @@ table.colortable { } } - &th { + & th { text-align: center; background: black; color: white; @@ -245,7 +353,7 @@ table.colortable { .foo { color: blue; - &.bar &.baz &.qux { + & .bar & .baz & .qux { color: red; } } @@ -324,7 +432,7 @@ figure { div { color: red; - &input { + & input { margin: 1em; } /* valid, no longer starts with an identifier */ @@ -347,7 +455,7 @@ div { .foo { color: blue; - &.bar &.baz &.qux { + & .bar & .baz & .qux { color: red; } } @@ -380,7 +488,7 @@ div { } .foo { - &:is(.bar, &.baz) { + & :is(.bar, &.baz) { color: red; } } @@ -389,7 +497,7 @@ div { html { block-size: 100%; - &body { + & body { min-block-size: 100%; } } @@ -400,7 +508,7 @@ div { block-size: 100%; @layer base.support { - &body { + & body { min-block-size: 100%; } } @@ -418,12 +526,127 @@ article { .foo { color: red; @media (min-width: 480px) { - &h1, - &h2 { + & h1, + & h2 { color: blue; } } } -``` +/*should be without whitespace*/ + +.container { + &.child { + color: blue; + } +} +.container { + &:child { + color: blue; + } +} + +.container { + &|d { + color: blue; + } +} + +.container { + &* { + color: blue; + } +} + +.container { + &* .selector { + color: blue; + } +} + +/*should keep whitespace*/ + +.container { + & .child { + color: blue; + } +} + +.container { + & .child { + color: blue; + } +} + +.container { + & :child { + color: blue; + } +} + +.container { + & :child { + color: blue; + } +} + +.container { + & .child { + color: blue; + } +} + +.container { + & .child { + color: blue; + } +} + +.container { + & |d { + color: blue; + } +} + +.container { + & |d { + color: blue; + } +} + +.container { + & div { + color: blue; + } +} + +.container { + & div { + color: blue; + } +} + +.container { + & * { + color: blue; + } +} + +.container { + & * { + color: blue; + } +} + +.container { + & [lang="ru"] { + color: blue; + } +} +.container { + & [lang="ru"] { + color: blue; + } +} +``` diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/at-root.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/at-root.css.snap index e285a2a4fcd7..f7d57ca37703 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/at-root.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/at-root.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/atrule/at-root.css --- - # Input ```css @@ -365,7 +364,7 @@ red .child1 { width: 100px; } -@@ -59,117 +65,171 @@ +@@ -59,37 +65,44 @@ } } .parent { @@ -399,36 +398,25 @@ red .parent { - @at-root .child { + @ -+ at-root.child { ++ at-root .child { width: 100px; } } .parent { - @at-root .child { + @ -+ at-root.child { ++ at-root .child { width: 100px; } } .parent { - @at-root input[type="radio"] { -- color: red; -- } + @ -+ at-root -+input[ -+type -+= -+'radio' -+] -+{ -+color -+: -+red -+; -+} ++ at-root input[type="radio"] { + color: red; + } } - @media print { +@@ -97,79 +110,117 @@ .page { width: 8in; @@ -670,30 +658,21 @@ red } .parent { @ - at-root.child { + at-root .child { width: 100px; } } .parent { @ - at-root.child { + at-root .child { width: 100px; } } .parent { @ - at-root -input[ -type -= -'radio' -] -{ -color -: -red -; -} + at-root input[type="radio"] { + color: red; + } } @media print { .page { @@ -1232,19 +1211,6 @@ at-root.css:152:2 parse ━━━━━━━━━━━━━━━━━━ - viewport - scope -at-root.css:153:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `input` - - 151 │ .parent { - 152 │ @at-root - > 153 │ input[ - │ ^^^^^ - 154 │ type - 155 │ = - - i Remove input - at-root.css:169:10 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. @@ -1743,7 +1709,7 @@ at-root.css:228:2 parse ━━━━━━━━━━━━━━━━━━ at-root.css:229:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `(` + × Expected a compound selector but instead found '('. 227 │ ; 228 │ @at-root @@ -1752,7 +1718,14 @@ at-root.css:229:1 parse ━━━━━━━━━━━━━━━━━━ 230 │ with 231 │ : - i Remove ( + i Expected a compound selector here. + + 227 │ ; + 228 │ @at-root + > 229 │ ( + │ ^ + 230 │ with + 231 │ : at-root.css:230:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -1814,7 +1787,7 @@ at-root.css:258:2 parse ━━━━━━━━━━━━━━━━━━ at-root.css:260:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `(` + × Expected a compound selector but instead found '('. 258 │ @at-root 259 │ @@ -1823,7 +1796,14 @@ at-root.css:260:1 parse ━━━━━━━━━━━━━━━━━━ 261 │ 262 │ with - i Remove ( + i Expected a compound selector here. + + 258 │ @at-root + 259 │ + > 260 │ ( + │ ^ + 261 │ + 262 │ with at-root.css:262:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -1931,5 +1911,3 @@ at-root.css:288:33 parse ━━━━━━━━━━━━━━━━━━ ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/custom-media.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/custom-media.css.snap index 60273faaa24d..7a0577fecccc 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/custom-media.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/custom-media.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/atrule/custom-media.css --- - # Input ```css @@ -119,7 +118,7 @@ max-width ```diff --- Prettier +++ Biome -@@ -1,20 +1,136 @@ +@@ -1,20 +1,131 @@ -@custom-media --small-viewport (max-width: 30em); -@custom-media --small-viewport (max-width: 30em); -@custom-media --small-viewport (max-width: 30em); @@ -156,7 +155,6 @@ max-width +@ +custom-media + --small-viewport -+ +( +max-width: 30em + ) @@ -174,7 +172,6 @@ max-width +custom-media + +--small-viewport -+ +( + +max-width @@ -212,7 +209,6 @@ max-width +not + +all -+ +; +@ +custom-media --tablet (min-width: 768px) and (max-width: 1279px) @@ -241,7 +237,7 @@ max-width +: +768px +) -+and ++and +( +max-width +: @@ -252,7 +248,6 @@ max-width +custom-media + +--tablet -+ +( + +min-width @@ -263,8 +258,7 @@ max-width + +) + -+and -+ ++and +( + +max-width @@ -297,7 +291,6 @@ custom-media --small-viewport @ custom-media --small-viewport - ( max-width: 30em ) @@ -315,7 +308,6 @@ max-width custom-media --small-viewport - ( max-width @@ -353,7 +345,6 @@ custom-media not all - ; @ custom-media --tablet (min-width: 768px) and (max-width: 1279px) @@ -382,7 +373,7 @@ min-width : 768px ) -and +and ( max-width : @@ -393,7 +384,6 @@ max-width custom-media --tablet - ( min-width @@ -404,8 +394,7 @@ min-width ) -and - +and ( max-width @@ -1231,22 +1220,18 @@ custom-media.css:11:2 parse ━━━━━━━━━━━━━━━━━ - viewport - scope -custom-media.css:12:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +custom-media.css:13:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `--small-viewport` + × Expected a compound selector but instead found '('. - 10 │ ); 11 │ @custom-media - > 12 │ --small-viewport - │ ^^^^^^^^^^^^^^^^ - 13 │ ( + 12 │ --small-viewport + > 13 │ ( + │ ^ 14 │ max-width + 15 │ : - i Remove --small-viewport - -custom-media.css:13:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `(` + i Expected a compound selector here. 11 │ @custom-media 12 │ --small-viewport @@ -1255,8 +1240,6 @@ custom-media.css:13:1 parse ━━━━━━━━━━━━━━━━━ 14 │ max-width 15 │ : - i Remove ( - custom-media.css:16:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. @@ -1374,22 +1357,18 @@ custom-media.css:19:2 parse ━━━━━━━━━━━━━━━━━ - viewport - scope -custom-media.css:21:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +custom-media.css:23:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `--small-viewport` + × Expected a compound selector but instead found '('. - 19 │ @custom-media - 20 │ - > 21 │ --small-viewport - │ ^^^^^^^^^^^^^^^^ + 21 │ --small-viewport 22 │ - 23 │ ( - - i Remove --small-viewport + > 23 │ ( + │ ^ + 24 │ + 25 │ max-width -custom-media.css:23:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `(` + i Expected a compound selector here. 21 │ --small-viewport 22 │ @@ -1398,8 +1377,6 @@ custom-media.css:23:1 parse ━━━━━━━━━━━━━━━━━ 24 │ 25 │ max-width - i Remove ( - custom-media.css:29:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. @@ -1702,48 +1679,18 @@ custom-media.css:41:2 parse ━━━━━━━━━━━━━━━━━ - viewport - scope -custom-media.css:42:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +custom-media.css:45:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `--none` + × Expected a compound selector but instead found ';'. - 40 │ all; - 41 │ @custom-media - > 42 │ --none - │ ^^^^^^ 43 │ not 44 │ all - - i Remove --none - -custom-media.css:43:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `not` - - 41 │ @custom-media - 42 │ --none - > 43 │ not - │ ^^^ - 44 │ all - 45 │ ; - - i Remove not - -custom-media.css:44:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `all` - - 42 │ --none - 43 │ not - > 44 │ all - │ ^^^ - 45 │ ; + > 45 │ ; + │ ^ 46 │ @custom-media + 47 │ - i Remove all - -custom-media.css:45:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `;` + i Expected a compound selector here. 43 │ not 44 │ all @@ -1752,8 +1699,6 @@ custom-media.css:45:1 parse ━━━━━━━━━━━━━━━━━ 46 │ @custom-media 47 │ - i Remove ; - custom-media.css:46:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. @@ -1786,48 +1731,18 @@ custom-media.css:46:2 parse ━━━━━━━━━━━━━━━━━ - viewport - scope -custom-media.css:48:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `--none` - - 46 │ @custom-media - 47 │ - > 48 │ --none - │ ^^^^^^ - 49 │ - 50 │ not - - i Remove --none - -custom-media.css:50:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +custom-media.css:54:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `not` + × Expected a compound selector but instead found ';'. - 48 │ --none - 49 │ - > 50 │ not - │ ^^^ - 51 │ 52 │ all - - i Remove not - -custom-media.css:52:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `all` - - 50 │ not - 51 │ - > 52 │ all - │ ^^^ 53 │ - 54 │ ; - - i Remove all + > 54 │ ; + │ ^ + 55 │ @custom-media --tablet (min-width: 768px) and (max-width: 1279px); + 56 │ @custom-media --tablet (min-width:768px) and (max-width:1279px); -custom-media.css:54:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `;` + i Expected a compound selector here. 52 │ all 53 │ @@ -1836,8 +1751,6 @@ custom-media.css:54:1 parse ━━━━━━━━━━━━━━━━━ 55 │ @custom-media --tablet (min-width: 768px) and (max-width: 1279px); 56 │ @custom-media --tablet (min-width:768px) and (max-width:1279px); - i Remove ; - custom-media.css:55:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. @@ -3325,22 +3238,18 @@ custom-media.css:64:2 parse ━━━━━━━━━━━━━━━━━ - viewport - scope -custom-media.css:65:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +custom-media.css:66:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `--tablet` + × Expected a compound selector but instead found '('. - 63 │ (max-width: 1279px); 64 │ @custom-media - > 65 │ --tablet - │ ^^^^^^^^ - 66 │ ( + 65 │ --tablet + > 66 │ ( + │ ^ 67 │ min-width + 68 │ : - i Remove --tablet - -custom-media.css:66:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `(` + i Expected a compound selector here. 64 │ @custom-media 65 │ --tablet @@ -3349,8 +3258,6 @@ custom-media.css:66:1 parse ━━━━━━━━━━━━━━━━━ 67 │ min-width 68 │ : - i Remove ( - custom-media.css:69:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. @@ -3438,7 +3345,7 @@ custom-media.css:70:1 parse ━━━━━━━━━━━━━━━━━ custom-media.css:72:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `(` + × Expected a compound selector but instead found '('. 70 │ ) 71 │ and @@ -3447,7 +3354,14 @@ custom-media.css:72:1 parse ━━━━━━━━━━━━━━━━━ 73 │ max-width 74 │ : - i Remove ( + i Expected a compound selector here. + + 70 │ ) + 71 │ and + > 72 │ ( + │ ^ + 73 │ max-width + 74 │ : custom-media.css:75:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -3566,22 +3480,18 @@ custom-media.css:78:2 parse ━━━━━━━━━━━━━━━━━ - viewport - scope -custom-media.css:80:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +custom-media.css:82:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `--tablet` + × Expected a compound selector but instead found '('. - 78 │ @custom-media - 79 │ - > 80 │ --tablet - │ ^^^^^^^^ + 80 │ --tablet 81 │ - 82 │ ( - - i Remove --tablet + > 82 │ ( + │ ^ + 83 │ + 84 │ min-width -custom-media.css:82:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `(` + i Expected a compound selector here. 80 │ --tablet 81 │ @@ -3590,8 +3500,6 @@ custom-media.css:82:1 parse ━━━━━━━━━━━━━━━━━ 83 │ 84 │ min-width - i Remove ( - custom-media.css:88:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. @@ -3679,7 +3587,7 @@ custom-media.css:90:1 parse ━━━━━━━━━━━━━━━━━ custom-media.css:94:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `(` + × Expected a compound selector but instead found '('. 92 │ and 93 │ @@ -3688,7 +3596,14 @@ custom-media.css:94:1 parse ━━━━━━━━━━━━━━━━━ 95 │ 96 │ max-width - i Remove ( + i Expected a compound selector here. + + 92 │ and + 93 │ + > 94 │ ( + │ ^ + 95 │ + 96 │ max-width custom-media.css:100:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -3780,7 +3695,5 @@ custom-media.css:102:1 parse ━━━━━━━━━━━━━━━━━ # Lines exceeding max width of 80 characters ``` - 82: custom-media --tablet ( min-width : 768px ) and ( max-width : 1279px ) + 79: custom-media --tablet ( min-width : 768px ) and ( max-width : 1279px ) ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/custom-selector.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/custom-selector.css.snap index 75b08cde0bee..cbc1fa0c6f1b 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/custom-selector.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/custom-selector.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/atrule/custom-selector.css --- - # Input ```css @@ -79,7 +78,7 @@ h6 ```diff --- Prettier +++ Biome -@@ -1,48 +1,147 @@ +@@ -1,48 +1,146 @@ -@custom-selector :--heading h1, h2, h3, h4, h5, h6; -@custom-selector :--heading h1, h2, h3, h4, h5, h6; -@custom-selector :--heading h1, h2, h3, h4, h5, h6; @@ -164,7 +163,6 @@ h6 +, + +h6 -+ +; +@ +custom-selector @@ -353,7 +351,6 @@ h5 , h6 - ; @ custom-selector @@ -686,22 +683,9 @@ custom-selector.css:14:2 parse ━━━━━━━━━━━━━━━━ - viewport - scope -custom-selector.css:16:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `h1` - - 14 │ @custom-selector - 15 │ :--heading - > 16 │ h1 - │ ^^ - 17 │ , - 18 │ h2 - - i Remove h1 - custom-selector.css:27:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `;` + × Expected a compound selector but instead found ';'. 25 │ , 26 │ h6 @@ -710,7 +694,14 @@ custom-selector.css:27:1 parse ━━━━━━━━━━━━━━━━ 28 │ @custom-selector 29 │ - i Remove ; + i Expected a compound selector here. + + 25 │ , + 26 │ h6 + > 27 │ ; + │ ^ + 28 │ @custom-selector + 29 │ custom-selector.css:28:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -744,22 +735,9 @@ custom-selector.css:28:2 parse ━━━━━━━━━━━━━━━━ - viewport - scope -custom-selector.css:32:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `h1` - - 30 │ :--heading - 31 │ - > 32 │ h1 - │ ^^ - 33 │ - 34 │ , - - i Remove h1 - custom-selector.css:54:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `;` + × Expected a compound selector but instead found ';'. 52 │ h6 53 │ @@ -768,7 +746,14 @@ custom-selector.css:54:1 parse ━━━━━━━━━━━━━━━━ 55 │ @custom-selector :--very-very-very-very-very-very-very-very-very-long-selector-name h1, h2, h3, h4, h5, h6; 56 │ @custom-selector :--very-very-very-very-very-very-very-very-very-long-selector-name h1 + h1, h2, h3, h4, h5, h6; - i Remove ; + i Expected a compound selector here. + + 52 │ h6 + 53 │ + > 54 │ ; + │ ^ + 55 │ @custom-selector :--very-very-very-very-very-very-very-very-very-long-selector-name h1, h2, h3, h4, h5, h6; + 56 │ @custom-selector :--very-very-very-very-very-very-very-very-very-long-selector-name h1 + h1, h2, h3, h4, h5, h6; custom-selector.css:55:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -1218,5 +1203,3 @@ custom-selector.css:64:60 parse ━━━━━━━━━━━━━━━━ ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/debug.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/debug.css.snap index c31530447503..e50456933a1c 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/debug.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/debug.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/atrule/debug.css --- - # Input ```css @@ -37,7 +36,7 @@ info: css/atrule/debug.css ```diff --- Prettier +++ Biome -@@ -1,8 +1,36 @@ +@@ -1,8 +1,34 @@ -@debug 10em + 12em; -@debug 10em+12em; -@debug 10em + 12em; @@ -59,7 +58,6 @@ info: css/atrule/debug.css +debug 10em + + + 12em -+ +; +@ +debug @@ -75,7 +73,6 @@ info: css/atrule/debug.css ++ + +12em -+ +; +@ +debug @@ -100,7 +97,6 @@ debug 10em + 12em debug 10em + 12em - ; @ debug @@ -116,7 +112,6 @@ debug + 12em - ; @ debug @@ -589,7 +584,7 @@ debug.css:8:2 parse ━━━━━━━━━━━━━━━━━━━━ debug.css:9:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `10` + × Expected a compound selector but instead found '10'. 7 │ ; 8 │ @debug @@ -598,7 +593,14 @@ debug.css:9:1 parse ━━━━━━━━━━━━━━━━━━━━ 10 │ + 11 │ 12em - i Remove 10 + i Expected a compound selector here. + + 7 │ ; + 8 │ @debug + > 9 │ 10em + │ ^^ + 10 │ + + 11 │ 12em debug.css:9:3 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -648,7 +650,7 @@ debug.css:11:3 parse ━━━━━━━━━━━━━━━━━━━ debug.css:12:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `;` + × Expected a compound selector but instead found ';'. 10 │ + 11 │ 12em @@ -657,7 +659,14 @@ debug.css:12:1 parse ━━━━━━━━━━━━━━━━━━━ 13 │ @debug 14 │ - i Remove ; + i Expected a compound selector here. + + 10 │ + + 11 │ 12em + > 12 │ ; + │ ^ + 13 │ @debug + 14 │ debug.css:13:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -693,7 +702,7 @@ debug.css:13:2 parse ━━━━━━━━━━━━━━━━━━━ debug.css:15:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `10` + × Expected a compound selector but instead found '10'. 13 │ @debug 14 │ @@ -702,7 +711,14 @@ debug.css:15:1 parse ━━━━━━━━━━━━━━━━━━━ 16 │ 17 │ + - i Remove 10 + i Expected a compound selector here. + + 13 │ @debug + 14 │ + > 15 │ 10em + │ ^^ + 16 │ + 17 │ + debug.css:15:3 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -752,7 +768,7 @@ debug.css:19:3 parse ━━━━━━━━━━━━━━━━━━━ debug.css:21:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `;` + × Expected a compound selector but instead found ';'. 19 │ 12em 20 │ @@ -761,7 +777,14 @@ debug.css:21:1 parse ━━━━━━━━━━━━━━━━━━━ 22 │ @debug $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var; 23 │ - i Remove ; + i Expected a compound selector here. + + 19 │ 12em + 20 │ + > 21 │ ; + │ ^ + 22 │ @debug $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var; + 23 │ debug.css:22:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -809,8 +832,6 @@ debug.css:22:179 parse ━━━━━━━━━━━━━━━━━━━ # Lines exceeding max width of 80 characters ``` - 34: $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var - 35: + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var + 32: $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var + 33: + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/each.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/each.css.snap index 6547a334d40f..2c4725b88912 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/each.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/each.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/atrule/each.css --- - # Input ```css @@ -232,7 +231,7 @@ h3 ```diff --- Prettier +++ Biome -@@ -1,69 +1,264 @@ +@@ -1,69 +1,234 @@ -@each $animal in puma, sea-slug, egret, salamander { +@ +each $animal in puma, @@ -248,7 +247,12 @@ h3 +salamander { } -@each $animal in puma, sea-slug, egret, salamander { --} ++@ ++each $animal in puma, ++sea-slug, ++egret, ++salamander { + } -@each $animal in puma, sea-slug, egret, salamander { +@ +each $animal in puma, @@ -271,7 +275,12 @@ h3 +salamander { } -@each $animal in puma, sea-slug, egret, salamander { --} ++@ ++each $animal in puma, ++sea-slug, ++egret, ++salamander { + } -@each $animal in ((puma), (sea-slug), (egret), (salamander)) { -} -@each $animal in((puma), (sea-slug), (egret), (salamander)) { @@ -310,44 +319,9 @@ h3 -@each $element, $size in(h1: 20px, h2: 16px, h3: 14px) { -} -@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) { -+@ -+each -+$animal -+in -+puma -+, -+sea-slug -+, -+egret -+, -+salamander -+{ - } +-} -@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) { -+@ -+each -+ -+$animal -+ -+in -+ -+puma -+ -+, -+ -+sea-slug -+ -+, -+ -+egret -+ -+, -+ -+salamander -+ -+{ -+ - } +-} -@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) { +@ +each $animal in ((puma), (sea-slug), (egret), (salamander)) {} @@ -374,7 +348,6 @@ h3 +each + $animal + in -+ +( + ( +puma @@ -400,8 +373,6 @@ h3 + $animal + + in -+ -+ +( + + ( @@ -474,7 +445,6 @@ h3 + $element, + $size + in -+ +( +h1 + : @@ -521,7 +491,6 @@ h3 +$size + +in -+ +( + +h1 @@ -535,14 +504,12 @@ h3 +h2 + +: -+ -+16px - h2: 16px, ++16px ++ +, - -- h3: 14px -- ) { ++ +h3 + +: @@ -552,7 +519,9 @@ h3 +) + +{ -+ + +- h3: 14px +- ) { } ``` @@ -590,41 +559,16 @@ egret, salamander { } @ -each -$animal -in -puma -, -sea-slug -, -egret -, -salamander -{ +each $animal in puma, +sea-slug, +egret, +salamander { } @ -each - -$animal - -in - -puma - -, - -sea-slug - -, - -egret - -, - -salamander - -{ - +each $animal in puma, +sea-slug, +egret, +salamander { } @ each $animal in ((puma), (sea-slug), (egret), (salamander)) {} @@ -651,7 +595,6 @@ puma), each $animal in - ( ( puma @@ -677,8 +620,6 @@ each $animal in - - ( ( @@ -750,7 +691,6 @@ each $element, $size in - ( h1 : @@ -793,7 +733,6 @@ $element, $size in - ( h1 @@ -1016,45 +955,6 @@ each.css:18:2 parse ━━━━━━━━━━━━━━━━━━━━ - viewport - scope -each.css:19:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `$animal` - - 17 │ } - 18 │ @each - > 19 │ $animal - │ ^^^^^^^ - 20 │ in - 21 │ puma - - i Remove $animal - -each.css:20:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `in` - - 18 │ @each - 19 │ $animal - > 20 │ in - │ ^^ - 21 │ puma - 22 │ , - - i Remove in - -each.css:21:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `puma` - - 19 │ $animal - 20 │ in - > 21 │ puma - │ ^^^^ - 22 │ , - 23 │ sea-slug - - i Remove puma - each.css:30:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. @@ -1087,45 +987,6 @@ each.css:30:2 parse ━━━━━━━━━━━━━━━━━━━━ - viewport - scope -each.css:32:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `$animal` - - 30 │ @each - 31 │ - > 32 │ $animal - │ ^^^^^^^ - 33 │ - 34 │ in - - i Remove $animal - -each.css:34:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `in` - - 32 │ $animal - 33 │ - > 34 │ in - │ ^^ - 35 │ - 36 │ puma - - i Remove in - -each.css:36:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `puma` - - 34 │ in - 35 │ - > 36 │ puma - │ ^^^^ - 37 │ - 38 │ , - - i Remove puma - each.css:53:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. @@ -4558,35 +4419,18 @@ each.css:163:2 parse ━━━━━━━━━━━━━━━━━━━ - viewport - scope -each.css:164:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +each.css:167:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `$element` + × Expected a compound selector but instead found '('. - 162 │ } - 163 │ @each - > 164 │ $element, - │ ^^^^^^^^ 165 │ $size 166 │ in - - i Remove $element - -each.css:166:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `in` - - 164 │ $element, - 165 │ $size - > 166 │ in - │ ^^ - 167 │ ( + > 167 │ ( + │ ^ 168 │ h1 + 169 │ : - i Remove in - -each.css:167:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `(` + i Expected a compound selector here. 165 │ $size 166 │ in @@ -4595,8 +4439,6 @@ each.css:167:1 parse ━━━━━━━━━━━━━━━━━━━ 168 │ h1 169 │ : - i Remove ( - each.css:170:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. @@ -4858,35 +4700,18 @@ each.css:182:2 parse ━━━━━━━━━━━━━━━━━━━ - viewport - scope -each.css:183:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `$element` - - 181 │ } - 182 │ @each - > 183 │ $element, - │ ^^^^^^^^ - 184 │ - 185 │ $size - - i Remove $element - -each.css:187:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +each.css:189:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `in` + × Expected a compound selector but instead found '('. - 185 │ $size - 186 │ - > 187 │ in - │ ^^ + 187 │ in 188 │ - 189 │ ( - - i Remove in + > 189 │ ( + │ ^ + 190 │ + 191 │ h1 -each.css:189:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `(` + i Expected a compound selector here. 187 │ in 188 │ @@ -4895,8 +4720,6 @@ each.css:189:1 parse ━━━━━━━━━━━━━━━━━━━ 190 │ 191 │ h1 - i Remove ( - each.css:195:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. @@ -5131,12 +4954,10 @@ each.css:213:1 parse ━━━━━━━━━━━━━━━━━━━ # Lines exceeding max width of 80 characters ``` - 73: each $animal in ( ( puma ) , ( sea-slug ) , ( egret ) , ( salamander ) ) {} - 159: each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {} - 161: each $animal,$color,$cursor in (puma,black,default),(sea-slug,blue,pointer),(egret,white,move){} - 169: $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var - 177: each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {} - 183: each $element , $size in ( h1 : 20px , h2 : 16px , h3 : 14px ) {} + 48: each $animal in ( ( puma ) , ( sea-slug ) , ( egret ) , ( salamander ) ) {} + 131: each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {} + 133: each $animal,$color,$cursor in (puma,black,default),(sea-slug,blue,pointer),(egret,white,move){} + 141: $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var + 149: each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {} + 155: each $element , $size in ( h1 : 20px , h2 : 16px , h3 : 14px ) {} ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/extend.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/extend.css.snap index 1edac5db533d..cf3bce5b8f0a 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/extend.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/extend.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/atrule/extend.css --- - # Input ```css @@ -902,7 +901,7 @@ extend.css:23:2 parse ━━━━━━━━━━━━━━━━━━━ extend.css:25:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `;` + × Expected a compound selector but instead found ';'. 23 │ @extend 24 │ .master @@ -911,7 +910,14 @@ extend.css:25:1 parse ━━━━━━━━━━━━━━━━━━━ 26 │ font-weight 27 │ : - i Remove ; + i Expected a compound selector here. + + 23 │ @extend + 24 │ .master + > 25 │ ; + │ ^ + 26 │ font-weight + 27 │ : extend.css:26:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -928,7 +934,7 @@ extend.css:26:1 parse ━━━━━━━━━━━━━━━━━━━ extend.css:29:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `;` + × Expected a compound selector but instead found ';'. 27 │ : 28 │ bold @@ -937,7 +943,14 @@ extend.css:29:1 parse ━━━━━━━━━━━━━━━━━━━ 30 │ } 31 │ .emphasis - i Remove ; + i Expected a compound selector here. + + 27 │ : + 28 │ bold + > 29 │ ; + │ ^ + 30 │ } + 31 │ .emphasis extend.css:31:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -986,7 +999,7 @@ extend.css:35:2 parse ━━━━━━━━━━━━━━━━━━━ extend.css:39:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `;` + × Expected a compound selector but instead found ';'. 37 │ .master 38 │ @@ -995,7 +1008,14 @@ extend.css:39:1 parse ━━━━━━━━━━━━━━━━━━━ 40 │ 41 │ font-weight - i Remove ; + i Expected a compound selector here. + + 37 │ .master + 38 │ + > 39 │ ; + │ ^ + 40 │ + 41 │ font-weight extend.css:41:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -1012,7 +1032,7 @@ extend.css:41:1 parse ━━━━━━━━━━━━━━━━━━━ extend.css:47:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `;` + × Expected a compound selector but instead found ';'. 45 │ bold 46 │ @@ -1021,7 +1041,14 @@ extend.css:47:1 parse ━━━━━━━━━━━━━━━━━━━ 48 │ 49 │ } - i Remove ; + i Expected a compound selector here. + + 45 │ bold + 46 │ + > 47 │ ; + │ ^ + 48 │ + 49 │ } extend.css:50:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -1447,7 +1474,7 @@ extend.css:68:2 parse ━━━━━━━━━━━━━━━━━━━ extend.css:69:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `%` + × Expected a compound selector but instead found '%'. 67 │ .message { 68 │ @extend @@ -1456,7 +1483,14 @@ extend.css:69:1 parse ━━━━━━━━━━━━━━━━━━━ 70 │ } 71 │ .message { - i Remove % + i Expected a compound selector here. + + 67 │ .message { + 68 │ @extend + > 69 │ %message-shared; + │ ^ + 70 │ } + 71 │ .message { extend.css:69:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -1531,7 +1565,7 @@ extend.css:73:2 parse ━━━━━━━━━━━━━━━━━━━ extend.css:75:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `%` + × Expected a compound selector but instead found '%'. 73 │ @extend 74 │ @@ -1540,7 +1574,14 @@ extend.css:75:1 parse ━━━━━━━━━━━━━━━━━━━ 76 │ 77 │ } - i Remove % + i Expected a compound selector here. + + 73 │ @extend + 74 │ + > 75 │ %message-shared; + │ ^ + 76 │ + 77 │ } extend.css:75:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -1992,7 +2033,7 @@ extend.css:92:2 parse ━━━━━━━━━━━━━━━━━━━ extend.css:94:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `!` + × Expected a compound selector but instead found '!'. 92 │ @extend 93 │ .notice @@ -2001,7 +2042,14 @@ extend.css:94:1 parse ━━━━━━━━━━━━━━━━━━━ 95 │ ; 96 │ } - i Remove ! + i Expected a compound selector here. + + 92 │ @extend + 93 │ .notice + > 94 │ !optional + │ ^ + 95 │ ; + 96 │ } extend.css:94:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -2018,7 +2066,7 @@ extend.css:94:2 parse ━━━━━━━━━━━━━━━━━━━ extend.css:95:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `;` + × Expected a compound selector but instead found ';'. 93 │ .notice 94 │ !optional @@ -2027,7 +2075,14 @@ extend.css:95:1 parse ━━━━━━━━━━━━━━━━━━━ 96 │ } 97 │ a.important - i Remove ; + i Expected a compound selector here. + + 93 │ .notice + 94 │ !optional + > 95 │ ; + │ ^ + 96 │ } + 97 │ a.important extend.css:97:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -2076,7 +2131,7 @@ extend.css:101:2 parse ━━━━━━━━━━━━━━━━━━━ extend.css:105:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `!` + × Expected a compound selector but instead found '!'. 103 │ .notice 104 │ @@ -2085,7 +2140,14 @@ extend.css:105:1 parse ━━━━━━━━━━━━━━━━━━━ 106 │ 107 │ ; - i Remove ! + i Expected a compound selector here. + + 103 │ .notice + 104 │ + > 105 │ !optional + │ ^ + 106 │ + 107 │ ; extend.css:105:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -2102,7 +2164,7 @@ extend.css:105:2 parse ━━━━━━━━━━━━━━━━━━━ extend.css:107:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `;` + × Expected a compound selector but instead found ';'. 105 │ !optional 106 │ @@ -2111,7 +2173,14 @@ extend.css:107:1 parse ━━━━━━━━━━━━━━━━━━━ 108 │ 109 │ } - i Remove ; + i Expected a compound selector here. + + 105 │ !optional + 106 │ + > 107 │ ; + │ ^ + 108 │ + 109 │ } extend.css:110:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -2463,7 +2532,7 @@ extend.css:130:2 parse ━━━━━━━━━━━━━━━━━━━ extend.css:134:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `;` + × Expected a compound selector but instead found ';'. 132 │ , 133 │ .important @@ -2472,7 +2541,14 @@ extend.css:134:1 parse ━━━━━━━━━━━━━━━━━━━ 135 │ } 136 │ .message-error - i Remove ; + i Expected a compound selector here. + + 132 │ , + 133 │ .important + > 134 │ ; + │ ^ + 135 │ } + 136 │ .message-error extend.css:136:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -2612,5 +2688,3 @@ extend.css:152:1 parse ━━━━━━━━━━━━━━━━━━━ ``` 150: @extend .very-very-very-very-very-very-very-very-very-very-very-very-very-long-selector, .very-very-very-very-very-very-very-very-very-very-very-very-very-long-selector; ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/for.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/for.css.snap index 90058e6e97f7..da6a51fd1f2f 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/for.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/for.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/atrule/for.css --- - # Input ```css @@ -58,7 +57,7 @@ through ```diff --- Prettier +++ Biome -@@ -1,51 +1,69 @@ +@@ -1,51 +1,67 @@ -@for $i from 1 through 8 { -} -@for $i from 1 through 8 { @@ -94,7 +93,7 @@ through +for $i +from +1 -+through ++through +8 +{} +@ @@ -102,7 +101,7 @@ through +$i +from +1 -+through ++through +8 +{} +@ @@ -110,7 +109,7 @@ through +$i +from +1 -+through ++through +8 +{} +@ @@ -119,11 +118,9 @@ through +$i + +from -+ +1 + -+through -+ ++through +8 + +{} @@ -184,7 +181,7 @@ for $i from 1 through 8 {} for $i from 1 -through +through 8 {} @ @@ -192,7 +189,7 @@ for $i from 1 -through +through 8 {} @ @@ -200,7 +197,7 @@ for $i from 1 -through +through 8 {} @ @@ -209,11 +206,9 @@ for $i from - 1 -through - +through 8 {} @@ -516,22 +511,18 @@ for.css:4:2 parse ━━━━━━━━━━━━━━━━━━━━ - viewport - scope -for.css:5:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +for.css:6:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `from` + × Expected a compound selector but instead found '1'. - 3 │ @for $i from 1 through 8 {} 4 │ @for $i - > 5 │ from - │ ^^^^ - 6 │ 1 + 5 │ from + > 6 │ 1 + │ ^ 7 │ through + 8 │ 8 - i Remove from - -for.css:6:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `1` + i Expected a compound selector here. 4 │ @for $i 5 │ from @@ -540,11 +531,9 @@ for.css:6:1 parse ━━━━━━━━━━━━━━━━━━━━ 7 │ through 8 │ 8 - i Remove 1 - for.css:8:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `8` + × Expected a compound selector but instead found '8'. 6 │ 1 7 │ through @@ -553,7 +542,14 @@ for.css:8:1 parse ━━━━━━━━━━━━━━━━━━━━ 9 │ {} 10 │ @for - i Remove 8 + i Expected a compound selector here. + + 6 │ 1 + 7 │ through + > 8 │ 8 + │ ^ + 9 │ {} + 10 │ @for for.css:10:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -587,35 +583,18 @@ for.css:10:2 parse ━━━━━━━━━━━━━━━━━━━━ - viewport - scope -for.css:11:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `$i` - - 9 │ {} - 10 │ @for - > 11 │ $i - │ ^^ - 12 │ from - 13 │ 1 - - i Remove $i - -for.css:12:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +for.css:13:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `from` + × Expected a compound selector but instead found '1'. - 10 │ @for 11 │ $i - > 12 │ from - │ ^^^^ - 13 │ 1 + 12 │ from + > 13 │ 1 + │ ^ 14 │ through + 15 │ 8 - i Remove from - -for.css:13:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `1` + i Expected a compound selector here. 11 │ $i 12 │ from @@ -624,11 +603,9 @@ for.css:13:1 parse ━━━━━━━━━━━━━━━━━━━━ 14 │ through 15 │ 8 - i Remove 1 - for.css:15:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `8` + × Expected a compound selector but instead found '8'. 13 │ 1 14 │ through @@ -637,7 +614,14 @@ for.css:15:1 parse ━━━━━━━━━━━━━━━━━━━━ 16 │ {} 17 │ @for - i Remove 8 + i Expected a compound selector here. + + 13 │ 1 + 14 │ through + > 15 │ 8 + │ ^ + 16 │ {} + 17 │ @for for.css:17:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -671,35 +655,18 @@ for.css:17:2 parse ━━━━━━━━━━━━━━━━━━━━ - viewport - scope -for.css:18:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `$i` - - 16 │ {} - 17 │ @for - > 18 │ $i - │ ^^ - 19 │ from - 20 │ 1 - - i Remove $i - -for.css:19:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +for.css:20:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `from` + × Expected a compound selector but instead found '1'. - 17 │ @for 18 │ $i - > 19 │ from - │ ^^^^ - 20 │ 1 + 19 │ from + > 20 │ 1 + │ ^ 21 │ through + 22 │ 8 - i Remove from - -for.css:20:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `1` + i Expected a compound selector here. 18 │ $i 19 │ from @@ -708,11 +675,9 @@ for.css:20:1 parse ━━━━━━━━━━━━━━━━━━━━ 21 │ through 22 │ 8 - i Remove 1 - for.css:22:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `8` + × Expected a compound selector but instead found '8'. 20 │ 1 21 │ through @@ -721,7 +686,14 @@ for.css:22:1 parse ━━━━━━━━━━━━━━━━━━━━ 23 │ {} 24 │ @for - i Remove 8 + i Expected a compound selector here. + + 20 │ 1 + 21 │ through + > 22 │ 8 + │ ^ + 23 │ {} + 24 │ @for for.css:24:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -755,35 +727,18 @@ for.css:24:2 parse ━━━━━━━━━━━━━━━━━━━━ - viewport - scope -for.css:26:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +for.css:30:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `$i` + × Expected a compound selector but instead found '1'. - 24 │ @for - 25 │ - > 26 │ $i - │ ^^ - 27 │ 28 │ from - - i Remove $i - -for.css:28:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `from` - - 26 │ $i - 27 │ - > 28 │ from - │ ^^^^ 29 │ - 30 │ 1 - - i Remove from + > 30 │ 1 + │ ^ + 31 │ + 32 │ through -for.css:30:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `1` + i Expected a compound selector here. 28 │ from 29 │ @@ -792,11 +747,9 @@ for.css:30:1 parse ━━━━━━━━━━━━━━━━━━━━ 31 │ 32 │ through - i Remove 1 - for.css:34:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `8` + × Expected a compound selector but instead found '8'. 32 │ through 33 │ @@ -805,7 +758,14 @@ for.css:34:1 parse ━━━━━━━━━━━━━━━━━━━━ 35 │ 36 │ {} - i Remove 8 + i Expected a compound selector here. + + 32 │ through + 33 │ + > 34 │ 8 + │ ^ + 35 │ + 36 │ {} for.css:37:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -1336,17 +1296,15 @@ for.css:43:456 parse ━━━━━━━━━━━━━━━━━━━ # Lines exceeding max width of 80 characters ``` - 45: for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from 1 through 5 {} - 47: for $i from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through 5 {} - 49: for $i from 1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {} - 52: $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var - 54: $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 - 56: $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 { - 60: $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var - 62: $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 - 64: $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 { - 67: for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($var1 + $var1) through ($var-2 + $var-2) {} - 69: for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1) through ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2) {} + 43: for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from 1 through 5 {} + 45: for $i from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through 5 {} + 47: for $i from 1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {} + 50: $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var + 52: $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 + 54: $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 { + 58: $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var + 60: $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 + 62: $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 { + 65: for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($var1 + $var1) through ($var-2 + $var-2) {} + 67: for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1) through ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2) {} ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/function.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/function.css.snap index e8be24ac3e83..08e13b4fd7af 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/function.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/function.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/atrule/function.css --- - # Input ```css @@ -1603,22 +1602,18 @@ function.css:30:2 parse ━━━━━━━━━━━━━━━━━━ i Remove function -function.css:31:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +function.css:32:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `func` + × Expected a compound selector but instead found '('. - 29 │ } 30 │ @function - > 31 │ func - │ ^^^^ - 32 │ ( + 31 │ func + > 32 │ ( + │ ^ 33 │ $arg + 34 │ , - i Remove func - -function.css:32:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `(` + i Expected a compound selector here. 30 │ @function 31 │ func @@ -1627,8 +1622,6 @@ function.css:32:1 parse ━━━━━━━━━━━━━━━━━━ 33 │ $arg 34 │ , - i Remove ( - function.css:33:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × expected `,` but instead found `$arg` @@ -1795,7 +1788,7 @@ function.css:45:2 parse ━━━━━━━━━━━━━━━━━━ function.css:46:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `"Func"` + × Expected a compound selector but instead found '"Func"'. 44 │ { 45 │ @return @@ -1804,7 +1797,14 @@ function.css:46:1 parse ━━━━━━━━━━━━━━━━━━ 47 │ ; 48 │ } - i Remove "Func" + i Expected a compound selector here. + + 44 │ { + 45 │ @return + > 46 │ "Func" + │ ^^^^^^ + 47 │ ; + 48 │ } function.css:49:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -1819,22 +1819,18 @@ function.css:49:2 parse ━━━━━━━━━━━━━━━━━━ i Remove function -function.css:51:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +function.css:53:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `func` + × Expected a compound selector but instead found '('. - 49 │ @function - 50 │ - > 51 │ func - │ ^^^^ + 51 │ func 52 │ - 53 │ ( - - i Remove func + > 53 │ ( + │ ^ + 54 │ + 55 │ $arg -function.css:53:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `(` + i Expected a compound selector here. 51 │ func 52 │ @@ -1843,8 +1839,6 @@ function.css:53:1 parse ━━━━━━━━━━━━━━━━━━ 54 │ 55 │ $arg - i Remove ( - function.css:55:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × expected `,` but instead found `$arg` @@ -2011,7 +2005,7 @@ function.css:79:2 parse ━━━━━━━━━━━━━━━━━━ function.css:81:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `"Func"` + × Expected a compound selector but instead found '"Func"'. 79 │ @return 80 │ @@ -2020,7 +2014,14 @@ function.css:81:1 parse ━━━━━━━━━━━━━━━━━━ 82 │ 83 │ ; - i Remove "Func" + i Expected a compound selector here. + + 79 │ @return + 80 │ + > 81 │ "Func" + │ ^^^^^^ + 82 │ + 83 │ ; function.css:86:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -2245,5 +2246,3 @@ function.css:89:1 parse ━━━━━━━━━━━━━━━━━━ ``` 87: @function func($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-args...) { ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/include.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/include.css.snap index 58dd659c8e9f..cdc3d94266c1 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/include.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/include.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/atrule/include.css --- - # Input ```css @@ -134,7 +133,7 @@ border-color: $very-very-very-very-very-very-very-very-very-very-very-very-very- ```diff --- Prettier +++ Biome -@@ -1,89 +1,142 @@ +@@ -1,89 +1,140 @@ -@include mix(1px, 2px, $arg2: 10, 2px 4px 6px); -@include mix(1px, 2px, $arg2: 10, 2px 4px 6px); -@include mix(1px, 2px, $arg2: 10, 2px 4px 6px); @@ -146,13 +145,6 @@ border-color: $very-very-very-very-very-very-very-very-very-very-very-very-very- - 1px, - 2px, - $arg2: 10, -- -- 2px 4px 6px --); --@include mix( -- $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg: -- 1px, -- $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1: +@ +include mix(1px, 2px, $arg2: 10, 2px 4px 6px) +; @@ -170,18 +162,13 @@ border-color: $very-very-very-very-very-very-very-very-very-very-very-very-very- +( + 1 +px, - 2px, -- $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: -- 10, -- 2px 4px 6px --); ++ 2px, + $arg2: 10, + 2px 4px 6px +) +; +@ -+include -+mix ++include mix +( + 1 +px, @@ -213,7 +200,6 @@ border-color: $very-very-very-very-very-very-very-very-very-very-very-very-very- +include + +mix -+ +( + +1 @@ -232,7 +218,18 @@ border-color: $very-very-very-very-very-very-very-very-very-very-very-very-very- +10 + +, -+ + +- 2px 4px 6px +-); +-@include mix( +- $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg: +- 1px, +- $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1: +- 2px, +- $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: +- 10, +- 2px 4px 6px +-); +2 +px + @@ -274,11 +271,11 @@ border-color: $very-very-very-very-very-very-very-very-very-very-very-very-very- + include apply-to-ie6-only { } - @include apply-to-ie6-only { +- } +- @include apply-to-ie6-only { + @ + include apply-to-ie6-only { } -- @include apply-to-ie6-only { -- } } a { @@ -375,8 +372,7 @@ px, ) ; @ -include -mix +include mix ( 1 px, @@ -408,7 +404,6 @@ px include mix - ( 1 @@ -1852,19 +1847,6 @@ include.css:11:2 parse ━━━━━━━━━━━━━━━━━━━ - viewport - scope -include.css:12:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `mix` - - 10 │ ); - 11 │ @include - > 12 │ mix( - │ ^^^ - 13 │ 1px, - 14 │ 2px, - - i Remove mix - include.css:12:4 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × expected `,` but instead found `(` @@ -2127,22 +2109,18 @@ include.css:18:2 parse ━━━━━━━━━━━━━━━━━━━ - viewport - scope -include.css:19:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +include.css:20:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `mix` + × Expected a compound selector but instead found '('. - 17 │ ); 18 │ @include - > 19 │ mix - │ ^^^ - 20 │ ( + 19 │ mix + > 20 │ ( + │ ^ 21 │ 1px + 22 │ , - i Remove mix - -include.css:20:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `(` + i Expected a compound selector here. 18 │ @include 19 │ mix @@ -2151,8 +2129,6 @@ include.css:20:1 parse ━━━━━━━━━━━━━━━━━━━ 21 │ 1px 22 │ , - i Remove ( - include.css:23:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Expected a selector but instead found '2'. @@ -2247,7 +2223,7 @@ include.css:27:1 parse ━━━━━━━━━━━━━━━━━━━ include.css:30:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `4` + × Expected a compound selector but instead found '4'. 28 │ , 29 │ 2px @@ -2256,7 +2232,14 @@ include.css:30:1 parse ━━━━━━━━━━━━━━━━━━━ 31 │ 6px 32 │ ) - i Remove 4 + i Expected a compound selector here. + + 28 │ , + 29 │ 2px + > 30 │ 4px + │ ^ + 31 │ 6px + 32 │ ) include.css:30:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -2273,7 +2256,7 @@ include.css:30:2 parse ━━━━━━━━━━━━━━━━━━━ include.css:31:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `6` + × Expected a compound selector but instead found '6'. 29 │ 2px 30 │ 4px @@ -2282,7 +2265,14 @@ include.css:31:1 parse ━━━━━━━━━━━━━━━━━━━ 32 │ ) 33 │ ; - i Remove 6 + i Expected a compound selector here. + + 29 │ 2px + 30 │ 4px + > 31 │ 6px + │ ^ + 32 │ ) + 33 │ ; include.css:31:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -2342,22 +2332,18 @@ include.css:34:2 parse ━━━━━━━━━━━━━━━━━━━ - viewport - scope -include.css:36:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +include.css:38:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `mix` + × Expected a compound selector but instead found '('. - 34 │ @include - 35 │ - > 36 │ mix - │ ^^^ + 36 │ mix 37 │ - 38 │ ( - - i Remove mix + > 38 │ ( + │ ^ + 39 │ + 40 │ 1px -include.css:38:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `(` + i Expected a compound selector here. 36 │ mix 37 │ @@ -2366,8 +2352,6 @@ include.css:38:1 parse ━━━━━━━━━━━━━━━━━━━ 39 │ 40 │ 1px - i Remove ( - include.css:44:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Expected a selector but instead found '2'. @@ -2462,7 +2446,7 @@ include.css:52:1 parse ━━━━━━━━━━━━━━━━━━━ include.css:58:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `4` + × Expected a compound selector but instead found '4'. 56 │ 2px 57 │ @@ -2471,7 +2455,14 @@ include.css:58:1 parse ━━━━━━━━━━━━━━━━━━━ 59 │ 60 │ 6px - i Remove 4 + i Expected a compound selector here. + + 56 │ 2px + 57 │ + > 58 │ 4px + │ ^ + 59 │ + 60 │ 6px include.css:58:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -2488,7 +2479,7 @@ include.css:58:2 parse ━━━━━━━━━━━━━━━━━━━ include.css:60:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `6` + × Expected a compound selector but instead found '6'. 58 │ 4px 59 │ @@ -2497,7 +2488,14 @@ include.css:60:1 parse ━━━━━━━━━━━━━━━━━━━ 61 │ 62 │ ) - i Remove 6 + i Expected a compound selector here. + + 58 │ 4px + 59 │ + > 60 │ 6px + │ ^ + 61 │ + 62 │ ) include.css:60:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -4868,11 +4866,9 @@ include.css:120:1 parse ━━━━━━━━━━━━━━━━━━ # Lines exceeding max width of 80 characters ``` - 88: include mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg: 1px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1: 2px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, 2px 4px 6px) - 93: @include mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg: 1px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1: 2px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, 2px 4px 6px); - 112: $decoration: (type: base, margin: 0 auto -1px 0, primary-color: $brand-primary, secondary-color: $gray-light), - 113: $title: (margin: 0 0 $margin-small, color: false, font-size: $font-size-h3, font-weight: false, line-height: $line-height-h3) - 139: border-color: $very-very-very-very-very-very-very-very-very-very-very-very-very-long-value + 86: include mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg: 1px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1: 2px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, 2px 4px 6px) + 91: @include mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg: 1px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1: 2px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, 2px 4px 6px); + 110: $decoration: (type: base, margin: 0 auto -1px 0, primary-color: $brand-primary, secondary-color: $gray-light), + 111: $title: (margin: 0 0 $margin-small, color: false, font-size: $font-size-h3, font-weight: false, line-height: $line-height-h3) + 137: border-color: $very-very-very-very-very-very-very-very-very-very-very-very-very-long-value ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/media.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/media.css.snap index 39a6fb1ebe8b..2ea0824135f2 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/media.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/media.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/atrule/media.css --- - # Input ```css @@ -766,7 +765,7 @@ media.css:93:21 parse ━━━━━━━━━━━━━━━━━━━ media.css:104:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `;` + × Expected a compound selector but instead found ';'. 102 │ : 103 │ green @@ -775,11 +774,18 @@ media.css:104:1 parse ━━━━━━━━━━━━━━━━━━━ 105 │ @media 106 │ ( - i Remove ; + i Expected a compound selector here. + + 102 │ : + 103 │ green + > 104 │ ; + │ ^ + 105 │ @media + 106 │ ( media.css:115:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `;` + × Expected a compound selector but instead found ';'. 113 │ : 114 │ red @@ -788,11 +794,18 @@ media.css:115:1 parse ━━━━━━━━━━━━━━━━━━━ 116 │ } 117 │ } - i Remove ; + i Expected a compound selector here. + + 113 │ : + 114 │ red + > 115 │ ; + │ ^ + 116 │ } + 117 │ } media.css:124:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `;` + × Expected a compound selector but instead found ';'. 122 │ : 123 │ black @@ -801,11 +814,18 @@ media.css:124:1 parse ━━━━━━━━━━━━━━━━━━━ 125 │ } 126 │ } - i Remove ; + i Expected a compound selector here. + + 122 │ : + 123 │ black + > 124 │ ; + │ ^ + 125 │ } + 126 │ } media.css:143:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `;` + × Expected a compound selector but instead found ';'. 141 │ green 142 │ @@ -814,11 +834,18 @@ media.css:143:1 parse ━━━━━━━━━━━━━━━━━━━ 144 │ 145 │ @media - i Remove ; + i Expected a compound selector here. + + 141 │ green + 142 │ + > 143 │ ; + │ ^ + 144 │ + 145 │ @media media.css:165:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `;` + × Expected a compound selector but instead found ';'. 163 │ red 164 │ @@ -827,11 +854,18 @@ media.css:165:1 parse ━━━━━━━━━━━━━━━━━━━ 166 │ 167 │ } - i Remove ; + i Expected a compound selector here. + + 163 │ red + 164 │ + > 165 │ ; + │ ^ + 166 │ + 167 │ } media.css:183:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `;` + × Expected a compound selector but instead found ';'. 181 │ black 182 │ @@ -840,7 +874,14 @@ media.css:183:1 parse ━━━━━━━━━━━━━━━━━━━ 184 │ 185 │ } - i Remove ; + i Expected a compound selector here. + + 181 │ black + 182 │ + > 183 │ ; + │ ^ + 184 │ + 185 │ } media.css:190:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -863,5 +904,3 @@ media.css:190:1 parse ━━━━━━━━━━━━━━━━━━━ ``` 195: @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3/2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {} ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/mixin.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/mixin.css.snap index e86ddc194873..9cf33469e42c 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/mixin.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/mixin.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/atrule/mixin.css --- - # Input ```css @@ -124,7 +123,7 @@ $background ```diff --- Prettier +++ Biome -@@ -1,70 +1,132 @@ +@@ -1,70 +1,122 @@ -@mixin clearfix { +@ +mixin clearfix { @@ -138,8 +137,6 @@ $background +mixin clearfix { } -@mixin clearfix { --} --@mixin clearfix { +@ +mixin clearfix { } @@ -149,21 +146,14 @@ $background } -@mixin clearfix { +@ -+mixin -+clearfix -+{ ++mixin clearfix { } +-@mixin clearfix { +@ -+mixin -+ -+clearfix - --@mixin mix($arg, $arg1, $arg2: 10, $args...) { -+{ -+ ++mixin clearfix { } + -@mixin mix($arg, $arg1, $arg2: 10, $args...) { -+ +@ +mixin mix($arg, $arg1, $arg2: 10, $args...) {} +@ @@ -181,8 +171,7 @@ $background + $args... +) {} +@ -+mixin -+mix ++mixin mix +( +$arg, + $arg1, @@ -195,7 +184,7 @@ $background +( +$arg, +$arg1, -+$arg2: ++$arg2 : +10 +, +$args @@ -213,6 +202,8 @@ $background -} -@mixin mix($arg, $arg1, $arg2: 10, $args...) { -} +-@mixin mix($arg, $arg1, $arg2: 10, $args...) { +-} -@mixin mix( - $arg, - $arg1, @@ -221,12 +212,11 @@ $background +mixin + +mix -+ +( + +$arg, +$arg1, -+$arg2: ++$arg2 : + +10 + @@ -240,7 +230,8 @@ $background - $args... -) { --} ++{ + } -@mixin mix( - $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg, - $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1, @@ -270,8 +261,7 @@ $background -@mixin button-variant($foo: " ... ") { -} -@mixin sexy-border($color, $width, $foo: (color: red)) { -+{ - } +-} +@ +mixin mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-args...) {} +@ @@ -291,10 +281,9 @@ $background +) +) {} +@ -+mixin -+button-variant ++mixin button-variant +( -+$hover-background:darken ++$hover-background :darken +( +$background, +7.5 @@ -336,17 +325,10 @@ mixin clearfix { mixin clearfix { } @ -mixin -clearfix -{ +mixin clearfix { } @ -mixin - -clearfix - -{ - +mixin clearfix { } @ @@ -366,8 +348,7 @@ $arg, $args... ) {} @ -mixin -mix +mixin mix ( $arg, $arg1, @@ -380,7 +361,7 @@ mix ( $arg, $arg1, -$arg2: +$arg2 : 10 , $args @@ -392,12 +373,11 @@ $args mixin mix - ( $arg, $arg1, -$arg2: +$arg2 : 10 @@ -430,10 +410,9 @@ $hover-background: darken($background, 7.5% ) ) {} @ -mixin -button-variant +mixin button-variant ( -$hover-background:darken +$hover-background :darken ( $background, 7.5 @@ -645,19 +624,6 @@ mixin.css:9:2 parse ━━━━━━━━━━━━━━━━━━━━ - viewport - scope -mixin.css:10:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `clearfix` - - 8 │ {} - 9 │ @mixin - > 10 │ clearfix - │ ^^^^^^^^ - 11 │ { - 12 │ } - - i Remove clearfix - mixin.css:13:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. @@ -690,19 +656,6 @@ mixin.css:13:2 parse ━━━━━━━━━━━━━━━━━━━ - viewport - scope -mixin.css:15:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `clearfix` - - 13 │ @mixin - 14 │ - > 15 │ clearfix - │ ^^^^^^^^ - 16 │ - 17 │ { - - i Remove clearfix - mixin.css:21:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. @@ -1611,19 +1564,6 @@ mixin.css:31:2 parse ━━━━━━━━━━━━━━━━━━━ - viewport - scope -mixin.css:32:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `mix` - - 30 │ ) {} - 31 │ @mixin - > 32 │ mix( - │ ^^^ - 33 │ $arg, - 34 │ $arg1, - - i Remove mix - mixin.css:32:4 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × expected `,` but instead found `(` @@ -1788,22 +1728,18 @@ mixin.css:38:2 parse ━━━━━━━━━━━━━━━━━━━ - viewport - scope -mixin.css:39:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +mixin.css:40:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `mix` + × Expected a compound selector but instead found '('. - 37 │ ) {} 38 │ @mixin - > 39 │ mix - │ ^^^ - 40 │ ( + 39 │ mix + > 40 │ ( + │ ^ 41 │ $arg + 42 │ , - i Remove mix - -mixin.css:40:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `(` + i Expected a compound selector here. 38 │ @mixin 39 │ mix @@ -1812,8 +1748,6 @@ mixin.css:40:1 parse ━━━━━━━━━━━━━━━━━━━ 41 │ $arg 42 │ , - i Remove ( - mixin.css:47:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. @@ -1965,22 +1899,18 @@ mixin.css:54:2 parse ━━━━━━━━━━━━━━━━━━━ - viewport - scope -mixin.css:56:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +mixin.css:58:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `mix` + × Expected a compound selector but instead found '('. - 54 │ @mixin - 55 │ - > 56 │ mix - │ ^^^ + 56 │ mix 57 │ - 58 │ ( - - i Remove mix + > 58 │ ( + │ ^ + 59 │ + 60 │ $arg -mixin.css:58:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `(` + i Expected a compound selector here. 56 │ mix 57 │ @@ -1989,8 +1919,6 @@ mixin.css:58:1 parse ━━━━━━━━━━━━━━━━━━━ 59 │ 60 │ $arg - i Remove ( - mixin.css:72:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. @@ -2969,19 +2897,6 @@ mixin.css:93:2 parse ━━━━━━━━━━━━━━━━━━━ - viewport - scope -mixin.css:94:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `button-variant` - - 92 │ ) {} - 93 │ @mixin - > 94 │ button-variant( - │ ^^^^^^^^^^^^^^ - 95 │ $hover-background - 96 │ : - - i Remove button-variant - mixin.css:94:15 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × expected `,` but instead found `(` @@ -3653,7 +3568,5 @@ mixin.css:109:25 parse ━━━━━━━━━━━━━━━━━━━ # Lines exceeding max width of 80 characters ``` - 93: mixin mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-args...) {} + 84: mixin mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-args...) {} ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/return.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/return.css.snap index 926f48c0033d..de4b5bf872eb 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/return.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/return.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/atrule/return.css --- - # Input ```css @@ -1664,19 +1663,6 @@ return.css:47:2 parse ━━━━━━━━━━━━━━━━━━━ i Remove function -return.css:48:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `grid-width` - - 46 │ } - 47 │ @function - > 48 │ grid-width( - │ ^^^^^^^^^^ - 49 │ $n - 50 │ ) - - i Remove grid-width - return.css:48:11 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × expected `,` but instead found `(` @@ -1748,45 +1734,6 @@ return.css:52:2 parse ━━━━━━━━━━━━━━━━━━━ - viewport - scope -return.css:53:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `$n` - - 51 │ { - 52 │ @return - > 53 │ $n - │ ^^ - 54 │ * - 55 │ $grid-width - - i Remove $n - -return.css:54:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `*` - - 52 │ @return - 53 │ $n - > 54 │ * - │ ^ - 55 │ $grid-width - 56 │ + - - i Remove * - -return.css:55:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `$grid-width` - - 53 │ $n - 54 │ * - > 55 │ $grid-width - │ ^^^^^^^^^^^ - 56 │ + - 57 │ ( - - i Remove $grid-width - return.css:57:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Expected a compound selector but instead found '('. @@ -1822,7 +1769,7 @@ return.css:58:1 parse ━━━━━━━━━━━━━━━━━━━ return.css:59:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `-` + × Expected a compound selector but instead found '-'. 57 │ ( 58 │ $n @@ -1831,7 +1778,14 @@ return.css:59:1 parse ━━━━━━━━━━━━━━━━━━━ 60 │ 1 61 │ ) - i Remove - + i Expected a compound selector here. + + 57 │ ( + 58 │ $n + > 59 │ - + │ ^ + 60 │ 1 + 61 │ ) return.css:62:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -1846,22 +1800,18 @@ return.css:62:1 parse ━━━━━━━━━━━━━━━━━━━ i Remove * -return.css:63:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +return.css:64:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `$gutter-width` + × Expected a compound selector but instead found '/'. - 61 │ ) 62 │ * - > 63 │ $gutter-width - │ ^^^^^^^^^^^^^ - 64 │ / + 63 │ $gutter-width + > 64 │ / + │ ^ 65 │ 10 + 66 │ ; - i Remove $gutter-width - -return.css:64:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `/` + i Expected a compound selector here. 62 │ * 63 │ $gutter-width @@ -1870,8 +1820,6 @@ return.css:64:1 parse ━━━━━━━━━━━━━━━━━━━ 65 │ 10 66 │ ; - i Remove / - return.css:68:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × expected `,` but instead found `function` @@ -1885,19 +1833,6 @@ return.css:68:2 parse ━━━━━━━━━━━━━━━━━━━ i Remove function -return.css:70:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `grid-width` - - 68 │ @function - 69 │ - > 70 │ grid-width( - │ ^^^^^^^^^^ - 71 │ - 72 │ $n - - i Remove grid-width - return.css:70:11 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × expected `,` but instead found `(` @@ -1969,45 +1904,6 @@ return.css:78:2 parse ━━━━━━━━━━━━━━━━━━━ - viewport - scope -return.css:80:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `$n` - - 78 │ @return - 79 │ - > 80 │ $n - │ ^^ - 81 │ - 82 │ * - - i Remove $n - -return.css:82:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `*` - - 80 │ $n - 81 │ - > 82 │ * - │ ^ - 83 │ - 84 │ $grid-width - - i Remove * - -return.css:84:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `$grid-width` - - 82 │ * - 83 │ - > 84 │ $grid-width - │ ^^^^^^^^^^^ - 85 │ - 86 │ + - - i Remove $grid-width - return.css:88:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Expected a compound selector but instead found '('. @@ -2043,7 +1939,7 @@ return.css:90:1 parse ━━━━━━━━━━━━━━━━━━━ return.css:92:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `-` + × Expected a compound selector but instead found '-'. 90 │ $n 91 │ @@ -2052,7 +1948,14 @@ return.css:92:1 parse ━━━━━━━━━━━━━━━━━━━ 93 │ 94 │ 1 - i Remove - + i Expected a compound selector here. + + 90 │ $n + 91 │ + > 92 │ - + │ ^ + 93 │ + 94 │ 1 return.css:98:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -2067,22 +1970,18 @@ return.css:98:1 parse ━━━━━━━━━━━━━━━━━━━ i Remove * -return.css:100:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +return.css:102:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `$gutter-width` + × Expected a compound selector but instead found '/'. - 98 │ * - 99 │ - > 100 │ $gutter-width - │ ^^^^^^^^^^^^^ + 100 │ $gutter-width 101 │ - 102 │ / - - i Remove $gutter-width + > 102 │ / + │ ^ + 103 │ + 104 │ 10 -return.css:102:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `/` + i Expected a compound selector here. 100 │ $gutter-width 101 │ @@ -2091,8 +1990,6 @@ return.css:102:1 parse ━━━━━━━━━━━━━━━━━━━ 103 │ 104 │ 10 - i Remove / - return.css:109:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × expected `,` but instead found `function` @@ -2767,5 +2664,3 @@ return.css:130:1 parse ━━━━━━━━━━━━━━━━━━━ ``` 111: @return $very-very-very-very-very-very-vey-long-var * $very-very-very-very-very-very-vey-long-var + ($very-very-very-very-very-very-vey-long-var - 1) * $very-very-very-very-very-very-vey-long-var; ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/supports.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/supports.css.snap index e948c8e5d6dc..6ee02525d72a 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/supports.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/supports.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/atrule/supports.css --- - # Input ```css @@ -972,7 +971,7 @@ B ``` supports.css:298:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `)` but instead found `<` + × Expected a compound selector but instead found '<'. 296 │ @supports selector( 297 │ A @@ -981,7 +980,14 @@ supports.css:298:1 parse ━━━━━━━━━━━━━━━━━━ 299 │ B 300 │ ) {} - i Remove < + i Expected a compound selector here. + + 296 │ @supports selector( + 297 │ A + > 298 │ < + │ ^ + 299 │ B + 300 │ ) {} supports.css:300:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -1309,5 +1315,3 @@ supports.css:372:45 parse ━━━━━━━━━━━━━━━━━━ 214: @supports selector(.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas 216: .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas){ ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/while.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/while.css.snap index 0541a69990d9..f1617b693afb 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/while.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/while.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/atrule/while.css --- - # Input ```css @@ -125,7 +124,7 @@ $i ```diff --- Prettier +++ Biome -@@ -1,72 +1,144 @@ +@@ -1,72 +1,142 @@ -@while $i > 0 { +@ +while $i > 0 {} @@ -152,6 +151,22 @@ $i +{ } -@while $i>0 { +-} +-@while $i > 0 { +-} +-@while $i > 0 { +-} +-@while $i > 0 { +-} +-@while $i > 0 { +-} +-@while $i > 0 { +-} +-@while ($i > 0) { +-} +-@while ($i>0) { +-} +-@while ($i > 0) { +@ +while + @@ -164,7 +179,7 @@ $i +{ + } --@while $i > 0 { +-@while ($i > 0) { +@ +while ($i > 0) {} +@ @@ -183,7 +198,7 @@ $i +while + ($i > 0) {} +@ -+while ++while +( +$i +> @@ -191,22 +206,9 @@ $i +) +{ } --@while $i > 0 { --} --@while $i > 0 { --} --@while $i > 0 { --} --@while $i > 0 { --} --@while ($i > 0) { --} --@while ($i>0) { --} -@while ($i > 0) { +@ -+while -+ ++while +( + +$i @@ -226,10 +228,6 @@ $i -} -@while ($i > 0) { -} --@while ($i > 0) { --} --@while ($i > 0) { --} -@while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var - > 1 { -} @@ -290,7 +288,7 @@ $i + (0) +) {} +@ -+while ++while +( +( +$i @@ -301,10 +299,9 @@ $i +) +) +{ -+} + } +@ -+while -+ ++while +( + +( @@ -325,7 +322,7 @@ $i + +{ + - } ++} +@ +while ($very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1) {} +@ @@ -393,7 +390,7 @@ $i > while ($i > 0) {} @ -while +while ( $i > @@ -402,8 +399,7 @@ $i { } @ -while - +while ( $i @@ -439,7 +435,7 @@ while (($i (0) ) {} @ -while +while ( ( $i @@ -452,8 +448,7 @@ $i { } @ -while - +while ( ( @@ -770,19 +765,6 @@ while.css:13:2 parse ━━━━━━━━━━━━━━━━━━━ - viewport - scope -while.css:14:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `$i` - - 12 │ {} - 13 │ @while - > 14 │ $i - │ ^^ - 15 │ > - 16 │ 0 - - i Remove $i - while.css:16:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Expected a compound selector but instead found '0'. @@ -835,19 +817,6 @@ while.css:19:2 parse ━━━━━━━━━━━━━━━━━━━ - viewport - scope -while.css:21:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `$i` - - 19 │ @while - 20 │ - > 21 │ $i - │ ^^ - 22 │ - 23 │ > - - i Remove $i - while.css:25:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Expected a compound selector but instead found '0'. @@ -1393,7 +1362,7 @@ while.css:39:2 parse ━━━━━━━━━━━━━━━━━━━ while.css:40:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `(` + × Expected a compound selector but instead found '('. 38 │ ($i > 0) {} 39 │ @while @@ -1402,7 +1371,14 @@ while.css:40:1 parse ━━━━━━━━━━━━━━━━━━━ 41 │ $i 42 │ > - i Remove ( + i Expected a compound selector here. + + 38 │ ($i > 0) {} + 39 │ @while + > 40 │ ( + │ ^ + 41 │ $i + 42 │ > while.css:43:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -1458,7 +1434,7 @@ while.css:47:2 parse ━━━━━━━━━━━━━━━━━━━ while.css:49:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `(` + × Expected a compound selector but instead found '('. 47 │ @while 48 │ @@ -1467,7 +1443,14 @@ while.css:49:1 parse ━━━━━━━━━━━━━━━━━━━ 50 │ 51 │ $i - i Remove ( + i Expected a compound selector here. + + 47 │ @while + 48 │ + > 49 │ ( + │ ^ + 50 │ + 51 │ $i while.css:55:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -1981,7 +1964,7 @@ while.css:72:2 parse ━━━━━━━━━━━━━━━━━━━ while.css:73:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `(` + × Expected a compound selector but instead found '('. 71 │ ) {} 72 │ @while @@ -1990,7 +1973,14 @@ while.css:73:1 parse ━━━━━━━━━━━━━━━━━━━ 74 │ ( 75 │ $i - i Remove ( + i Expected a compound selector here. + + 71 │ ) {} + 72 │ @while + > 73 │ ( + │ ^ + 74 │ ( + 75 │ $i while.css:76:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -2039,7 +2029,7 @@ while.css:84:2 parse ━━━━━━━━━━━━━━━━━━━ while.css:86:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `(` + × Expected a compound selector but instead found '('. 84 │ @while 85 │ @@ -2048,7 +2038,14 @@ while.css:86:1 parse ━━━━━━━━━━━━━━━━━━━ 87 │ 88 │ ( - i Remove ( + i Expected a compound selector here. + + 84 │ @while + 85 │ + > 86 │ ( + │ ^ + 87 │ + 88 │ ( while.css:92:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -2383,14 +2380,12 @@ while.css:110:196 parse ━━━━━━━━━━━━━━━━━━ # Lines exceeding max width of 80 characters ``` - 80: while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1 {} - 82: while 1 > $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var {} - 85: $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var - 86: > $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var { - 138: while ($very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1) {} - 140: while (1 > $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var) {} - 142: while ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1) {} - 144: while ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var) {} + 79: while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1 {} + 81: while 1 > $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var {} + 84: $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var + 85: > $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var { + 136: while ($very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1) {} + 138: while (1 > $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var) {} + 140: while ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1) {} + 142: while ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var) {} ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/attribute/custom-selector.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/attribute/custom-selector.css.snap index e0fd2218f2c9..21c79f1168d6 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/attribute/custom-selector.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/attribute/custom-selector.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/attribute/custom-selector.css --- - # Input ```css @@ -206,22 +205,9 @@ custom-selector.css:3:2 parse ━━━━━━━━━━━━━━━━ - viewport - scope -custom-selector.css:5:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `i` - - 3 │ @custom-selector - 4 │ :--icon - > 5 │ i[ - │ ^ - 6 │ class - 7 │ ^= - - i Remove i - custom-selector.css:16:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `;` + × Expected a compound selector but instead found ';'. 14 │ ' icon-' 15 │ ] @@ -229,9 +215,13 @@ custom-selector.css:16:1 parse ━━━━━━━━━━━━━━━━ │ ^ 17 │ - i Remove ; + i Expected a compound selector here. + + 14 │ ' icon-' + 15 │ ] + > 16 │ ; + │ ^ + 17 │ ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/comments/selectors.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/comments/selectors.css.snap index 4c2f03e7cf8e..9ae5f4001b02 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/comments/selectors.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/comments/selectors.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/comments/selectors.css --- - # Input ```css @@ -195,7 +194,7 @@ input:not(/* comment 125 */[/* comment 126 */disabled/* comment 127 */]/* commen /* comment 8 */ { /* comment 9 */ /* comment 10 */ -@@ -28,150 +26,143 @@ +@@ -28,150 +26,142 @@ } /* comment 13 */ /* comment 14 */ @@ -226,8 +225,7 @@ input:not(/* comment 125 */[/* comment 126 */disabled/* comment 127 */]/* commen -/* comment 27 */ -.element -/* comment 28 */ { -+.element/* comment 27 */ -+ .element /* comment 28 */ ++.element /* comment 27 */ .element /* comment 28 */ +{ } @@ -413,7 +411,7 @@ input:not(/* comment 125 */[/* comment 126 */disabled/* comment 127 */]/* commen /* comment 144 */ color: white; /* comment 145 */ -@@ -179,8 +170,7 @@ +@@ -179,8 +169,7 @@ /* comment 147 */ } /* comment 148 */ @@ -423,7 +421,7 @@ input:not(/* comment 125 */[/* comment 126 */disabled/* comment 127 */]/* commen /* comment 151 */ display: block; /* comment 152 */ -@@ -189,11 +179,9 @@ +@@ -189,11 +178,9 @@ } /* comment 155 */ @media (max-width: 500px) { @@ -437,7 +435,7 @@ input:not(/* comment 125 */[/* comment 126 */disabled/* comment 127 */]/* commen /* comment 161 */ } /* comment 162 */ /* comment 163 */ -@@ -201,30 +189,35 @@ +@@ -201,30 +188,35 @@ /* comment 165 */ } /* comment 166 */ @@ -536,8 +534,7 @@ input:not(/* comment 125 */[/* comment 126 */disabled/* comment 127 */]/* commen /* comment 23 */ .element /* comment 24 */ .element /* comment 25 */ { } /* comment 26 */ -.element/* comment 27 */ - .element /* comment 28 */ +.element /* comment 27 */ .element /* comment 28 */ { } @@ -852,15 +849,13 @@ selectors.css:156:6 parse ━━━━━━━━━━━━━━━━━━ # Lines exceeding max width of 80 characters ``` - 81: /* comment 53 */ .element /* comment 54 */ >>> /* comment 55 */ .element /* comment 56 */ {} - 93: a[/* comment 63 */ target /* comment 64 */=/* comment 65 */ "_blank" /* comment 66 */] { - 95: a[/* comment 67 */ target /* comment 68 */~=/* comment 69 */ "_blank" /* comment 70 */] { - 97: a[/* comment 71 */ target /* comment 72 */|=/* comment 73 */ "_blank" /* comment 74 */] { - 99: a[/* comment 75 */ target /* comment 76 */^=/* comment 77 */ "_blank" /* comment 78 */] { - 101: a[/* comment 79 */ target /* comment 80 */$=/* comment 81 */ "_blank" /* comment 82 */] { - 103: a[/* comment 83 */ target /* comment 84 */*=/* comment 85 */ "_blank" /* comment 86 */] { - 106: [/* comment 87 */ foo /* comment 88 */| /* comment 89 */att /* comment 90 */=/* comment 91 */ "val" /* comment 92 */] { - 151: /* comment 125 */ [/* comment 126 */ disabled /* comment 127 */] /* comment 128 */ + 80: /* comment 53 */ .element /* comment 54 */ >>> /* comment 55 */ .element /* comment 56 */ {} + 92: a[/* comment 63 */ target /* comment 64 */=/* comment 65 */ "_blank" /* comment 66 */] { + 94: a[/* comment 67 */ target /* comment 68 */~=/* comment 69 */ "_blank" /* comment 70 */] { + 96: a[/* comment 71 */ target /* comment 72 */|=/* comment 73 */ "_blank" /* comment 74 */] { + 98: a[/* comment 75 */ target /* comment 76 */^=/* comment 77 */ "_blank" /* comment 78 */] { + 100: a[/* comment 79 */ target /* comment 80 */$=/* comment 81 */ "_blank" /* comment 82 */] { + 102: a[/* comment 83 */ target /* comment 84 */*=/* comment 85 */ "_blank" /* comment 86 */] { + 105: [/* comment 87 */ foo /* comment 88 */| /* comment 89 */att /* comment 90 */=/* comment 91 */ "val" /* comment 92 */] { + 150: /* comment 125 */ [/* comment 126 */ disabled /* comment 127 */] /* comment 128 */ ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/front-matter/custom-parser.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/front-matter/custom-parser.css.snap index 788e82747b6b..74b364e887ac 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/front-matter/custom-parser.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/front-matter/custom-parser.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/front-matter/custom-parser.css --- - # Input ```css @@ -69,34 +68,18 @@ custom-parser.css:1:1 parse ━━━━━━━━━━━━━━━━━ 2 │ title: Title 3 │ description: Description -custom-parser.css:2:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `title` - - 1 │ ---mycustomparser - > 2 │ title: Title - │ ^^^^^ - 3 │ description: Description - 4 │ --- - - i Remove title - -custom-parser.css:3:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +custom-parser.css:4:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `description` + × Expected a compound selector but instead found '-'. - 1 │ ---mycustomparser 2 │ title: Title - > 3 │ description: Description - │ ^^^^^^^^^^^ - 4 │ --- + 3 │ description: Description + > 4 │ --- + │ ^ 5 │ /* comment */ + 6 │ .something· - i Remove description - -custom-parser.css:4:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `-` + i Expected a compound selector here. 2 │ title: Title 3 │ description: Description @@ -105,8 +88,6 @@ custom-parser.css:4:1 parse ━━━━━━━━━━━━━━━━━ 5 │ /* comment */ 6 │ .something· - i Remove - - custom-parser.css:4:3 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × expected `,` but instead found `-` @@ -122,5 +103,3 @@ custom-parser.css:4:3 parse ━━━━━━━━━━━━━━━━━ ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/postcss-plugins/postcss-nesting.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/postcss-plugins/postcss-nesting.css.snap index 7cbbf1716205..04eb554854ef 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/postcss-plugins/postcss-nesting.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/postcss-plugins/postcss-nesting.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/postcss-plugins/postcss-nesting.css --- - # Input ```css @@ -244,22 +243,22 @@ a { order: 1; - @nest & b { + @ -+ nest &b { ++ nest & b { order: 2; } - @nest & c { + @ -+ nest &c { ++ nest & c { order: 3; } - @nest & d { + @ -+ nest &d { ++ nest & d { order: 4; } - @nest & e { + @ -+ nest &e { ++ nest & e { order: 5; } } @@ -360,19 +359,19 @@ a { a { order: 1; @ - nest &b { + nest & b { order: 2; } @ - nest &c { + nest & c { order: 3; } @ - nest &d { + nest & d { order: 4; } @ - nest &e { + nest & e { order: 5; } } @@ -2345,5 +2344,3 @@ postcss-nesting.css:202:1 parse ━━━━━━━━━━━━━━━━ 203: @nest very-very-very-very-very-very-very-very-very-long-selector &, very-very-very-very-very-very-very-very-very-long-selector & { 206: @nest very-very-very-very-very-very-very-very-very-long-selector + very-very-very-very-very-very-very-very-very-long-selector &, very-very-very-very-very-very-very-very-very-long-selector very-very-very-very-very-very-very-very-very-long-selector & { ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/selector-list/selectors.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/selector-list/selectors.css.snap index a79f42712936..cf88f351c7cb 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/selector-list/selectors.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/selector-list/selectors.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/selector-list/selectors.css --- - # Input ```css @@ -326,27 +325,7 @@ ns|* {} ```diff --- Prettier +++ Biome -@@ -21,15 +21,11 @@ - .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas - .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas { - } --.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas -- .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas, --.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas -- .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas { -+.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas, -+.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas { - } --.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas -- .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas, --.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas -- .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas { -+.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas, -+.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas { - } - - .parent, -@@ -100,35 +96,37 @@ +@@ -100,35 +100,37 @@ } .parent > .child { } @@ -408,7 +387,7 @@ ns|* {} } .parent { > .child-one { -@@ -167,35 +165,37 @@ +@@ -167,35 +169,37 @@ } .parent + .child { } @@ -470,7 +449,7 @@ ns|* {} } .parent { + .child-one { -@@ -234,35 +234,37 @@ +@@ -234,35 +238,37 @@ } .parent ~ .child { } @@ -532,10 +511,12 @@ ns|* {} } .parent { ~ .child-one { -@@ -295,71 +297,60 @@ +@@ -295,71 +301,60 @@ } } +-.parent >>> .child { +-} -.parent >>> .child { -} -.parent >>> .child { @@ -546,8 +527,6 @@ ns|* {} + .child-one {} + .child-two {} } --.parent >>> .child { --} .parent >>> { - .child-one { - } @@ -643,7 +622,7 @@ ns|* {} } /* This matches all XHTML elements, as XHTML is the default unprefixed namespace */ -@@ -374,7 +365,7 @@ +@@ -374,7 +369,7 @@ *|a { } @@ -680,11 +659,15 @@ ns|* {} .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas { } -.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas, -.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas { +.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas + .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas, +.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas + .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas { } -.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas, -.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas { +.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas + .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas, +.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas + .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas { } .parent, @@ -2160,11 +2143,5 @@ selectors.css:293:6 parse ━━━━━━━━━━━━━━━━━━ # Lines exceeding max width of 80 characters ``` - 24: .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas, - 25: .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas { - 27: .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas, - 28: .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas { - 356: /* This matches all XHTML elements, as XHTML is the default unprefixed namespace */ + 360: /* This matches all XHTML elements, as XHTML is the default unprefixed namespace */ ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/yaml/comment_after.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/yaml/comment_after.css.snap index 7fe075eabaa2..b7f41e28a792 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/yaml/comment_after.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/yaml/comment_after.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/yaml/comment_after.css --- - # Input ```css @@ -66,22 +65,18 @@ comment_after.css:1:1 parse ━━━━━━━━━━━━━━━━━ 2 │ title: Title 3 │ description: Description -comment_after.css:3:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +comment_after.css:4:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `description` + × Expected a compound selector but instead found '-'. - 1 │ --- 2 │ title: Title - > 3 │ description: Description - │ ^^^^^^^^^^^ - 4 │ --- + 3 │ description: Description + > 4 │ --- + │ ^ 5 │ /* comment */ + 6 │ .something { - i Remove description - -comment_after.css:4:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `-` + i Expected a compound selector here. 2 │ title: Title 3 │ description: Description @@ -90,8 +85,6 @@ comment_after.css:4:1 parse ━━━━━━━━━━━━━━━━━ 5 │ /* comment */ 6 │ .something { - i Remove - - comment_after.css:4:3 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × expected `,` but instead found `-` @@ -107,5 +100,3 @@ comment_after.css:4:3 parse ━━━━━━━━━━━━━━━━━ ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/yaml/dirty.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/yaml/dirty.css.snap index 59160405b6bf..a36aabac57b3 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/yaml/dirty.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/yaml/dirty.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/yaml/dirty.css --- - # Input ```css @@ -76,19 +75,6 @@ dirty.css:1:1 parse ━━━━━━━━━━━━━━━━━━━━ 2 │ hello: world 3 │ a:······· -dirty.css:3:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `a` - - 1 │ --- - 2 │ hello: world - > 3 │ a:······· - │ ^ - 4 │ - 123 - 5 │ - 666 - - i Remove a - dirty.css:4:13 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. @@ -163,5 +149,3 @@ dirty.css:4:15 parse ━━━━━━━━━━━━━━━━━━━ ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/yaml/ignore.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/yaml/ignore.css.snap index 74f308f7f2d4..8de32ec18871 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/yaml/ignore.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/yaml/ignore.css.snap @@ -63,7 +63,7 @@ ignore.css:1:1 parse ━━━━━━━━━━━━━━━━━━━ ignore.css:3:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `-` + × Expected a compound selector but instead found '-'. 1 │ --- 2 │ hello: world @@ -72,7 +72,14 @@ ignore.css:3:1 parse ━━━━━━━━━━━━━━━━━━━ 4 │ 5 │ /* biome-ignore format: prettier ignore */ - i Remove - + i Expected a compound selector here. + + 1 │ --- + 2 │ hello: world + > 3 │ --- + │ ^ + 4 │ + 5 │ /* biome-ignore format: prettier ignore */ ignore.css:3:3 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/yaml/malformed-2.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/yaml/malformed-2.css.snap index 9bf75c8f0cc8..aad370451309 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/yaml/malformed-2.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/yaml/malformed-2.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/yaml/malformed-2.css --- - # Input ```css @@ -85,7 +84,7 @@ malformed-2.css:1:1 parse ━━━━━━━━━━━━━━━━━━ malformed-2.css:3:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `-` + × Expected a compound selector but instead found '-'. 1 │ --- 2 │ foo: bar @@ -94,7 +93,14 @@ malformed-2.css:3:1 parse ━━━━━━━━━━━━━━━━━━ 4 │ 5 │ a { - i Remove - + i Expected a compound selector here. + + 1 │ --- + 2 │ foo: bar + > 3 │ --- + │ ^ + 4 │ + 5 │ a { malformed-2.css:3:3 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ @@ -131,5 +137,3 @@ malformed-2.css:9:1 parse ━━━━━━━━━━━━━━━━━━ ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/yaml/malformed.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/yaml/malformed.css.snap index 9393543a5693..82ecae2a9f0a 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/yaml/malformed.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/yaml/malformed.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/yaml/malformed.css --- - # Input ```css @@ -21,15 +20,11 @@ a { ```diff --- Prettier +++ Biome -@@ -1,3 +1,7 @@ +@@ -1,3 +1,4 @@ ---- aaa b--- a { -- color: red; +--- -+aaa -+b--- -+ -+a { -+ color: red; ++aaa b--- a { + color: red; } ``` @@ -37,11 +32,8 @@ a { ```css --- -aaa -b--- - -a { - color: red; +aaa b--- a { + color: red; } ``` @@ -63,33 +55,5 @@ malformed.css:1:1 parse ━━━━━━━━━━━━━━━━━━ 2 │ aaa 3 │ b--- -malformed.css:3:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `b---` - - 1 │ --- - 2 │ aaa - > 3 │ b--- - │ ^^^^ - 4 │ - 5 │ a { - - i Remove b--- - -malformed.css:5:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `a` - - 3 │ b--- - 4 │ - > 5 │ a { - │ ^ - 6 │ color: red; - 7 │ } - - i Remove a - ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/yaml/with_comments.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/yaml/with_comments.css.snap index c9b041ce1c54..175fbef7e6ed 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/yaml/with_comments.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/yaml/with_comments.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/yaml/with_comments.css --- - # Input ```css @@ -68,22 +67,18 @@ with_comments.css:1:1 parse ━━━━━━━━━━━━━━━━━ 2 │ title: Title 3 │ description: Description -with_comments.css:3:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +with_comments.css:5:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `description` + × Expected a compound selector but instead found '-'. - 1 │ --- - 2 │ title: Title - > 3 │ description: Description - │ ^^^^^^^^^^^ + 3 │ description: Description 4 │ # This is a comment - 5 │ --- - - i Remove description + > 5 │ --- + │ ^ + 6 │ + 7 │ a { -with_comments.css:5:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `-` + i Expected a compound selector here. 3 │ description: Description 4 │ # This is a comment @@ -92,8 +87,6 @@ with_comments.css:5:1 parse ━━━━━━━━━━━━━━━━━ 6 │ 7 │ a { - i Remove - - with_comments.css:5:3 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × expected `,` but instead found `-` @@ -109,5 +102,3 @@ with_comments.css:5:3 parse ━━━━━━━━━━━━━━━━━ ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/yaml/without-newline-after.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/yaml/without-newline-after.css.snap index e16f94927728..00328753a7fc 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/yaml/without-newline-after.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/yaml/without-newline-after.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/yaml/without-newline-after.css --- - # Input ```css @@ -66,22 +65,18 @@ without-newline-after.css:1:1 parse ━━━━━━━━━━━━━━ 2 │ title: Title 3 │ description: Description -without-newline-after.css:3:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +without-newline-after.css:4:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `description` + × Expected a compound selector but instead found '-'. - 1 │ --- 2 │ title: Title - > 3 │ description: Description - │ ^^^^^^^^^^^ - 4 │ --- + 3 │ description: Description + > 4 │ --- + │ ^ 5 │ a { + 6 │ color: red; - i Remove description - -without-newline-after.css:4:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `-` + i Expected a compound selector here. 2 │ title: Title 3 │ description: Description @@ -90,8 +85,6 @@ without-newline-after.css:4:1 parse ━━━━━━━━━━━━━━ 5 │ a { 6 │ color: red; - i Remove - - without-newline-after.css:4:3 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × expected `,` but instead found `-` @@ -107,5 +100,3 @@ without-newline-after.css:4:3 parse ━━━━━━━━━━━━━━ ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/yaml/yaml.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/yaml/yaml.css.snap index 2199d7088fbe..cbe0febf5e75 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/yaml/yaml.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/yaml/yaml.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/yaml/yaml.css --- - # Input ```css @@ -67,22 +66,18 @@ yaml.css:1:1 parse ━━━━━━━━━━━━━━━━━━━━ 2 │ title: Title 3 │ description: Description -yaml.css:3:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +yaml.css:4:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `,` but instead found `description` + × Expected a compound selector but instead found '-'. - 1 │ --- 2 │ title: Title - > 3 │ description: Description - │ ^^^^^^^^^^^ - 4 │ --- + 3 │ description: Description + > 4 │ --- + │ ^ 5 │ + 6 │ a { - i Remove description - -yaml.css:4:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × expected `,` but instead found `-` + i Expected a compound selector here. 2 │ title: Title 3 │ description: Description @@ -91,8 +86,6 @@ yaml.css:4:1 parse ━━━━━━━━━━━━━━━━━━━━ 5 │ 6 │ a { - i Remove - - yaml.css:4:3 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × expected `,` but instead found `-` @@ -108,5 +101,3 @@ yaml.css:4:3 parse ━━━━━━━━━━━━━━━━━━━━ ``` - - diff --git a/crates/biome_css_parser/src/lexer/mod.rs b/crates/biome_css_parser/src/lexer/mod.rs index f0c53ad51f76..7d4e06f918ee 100644 --- a/crates/biome_css_parser/src/lexer/mod.rs +++ b/crates/biome_css_parser/src/lexer/mod.rs @@ -376,8 +376,10 @@ impl<'src> CssLexer<'src> { } fn consume_selector_token(&mut self, current: u8) -> CssSyntaxKind { - match current { - b' ' => self.consume_byte(CSS_SPACE_LITERAL), + let dispatched = lookup_byte(current); + + match dispatched { + WHS => self.consume_byte(CSS_SPACE_LITERAL), _ => self.consume_token(current), } } diff --git a/crates/biome_css_parser/src/syntax/selector/mod.rs b/crates/biome_css_parser/src/syntax/selector/mod.rs index ed0a774895a6..8c8320f24895 100644 --- a/crates/biome_css_parser/src/syntax/selector/mod.rs +++ b/crates/biome_css_parser/src/syntax/selector/mod.rs @@ -285,8 +285,9 @@ fn parse_compound_selector(p: &mut CssParser) -> ParsedSyntax { let m = p.start(); - p.eat(T![&]); - parse_simple_selector(p).ok(); + let context = selector_lex_context(p); + p.eat_with_context(T![&], context); + parse_simple_selector(p).ok(); // We don't need to handle error here because a simple selector is optional SubSelectorList.parse_list(p); Present(m.complete(p, CSS_COMPOUND_SELECTOR)) diff --git a/crates/biome_css_parser/tests/css_test_suite/error/selector/pseudo_class/pseudo_class_function_compound_selector.css.snap b/crates/biome_css_parser/tests/css_test_suite/error/selector/pseudo_class/pseudo_class_function_compound_selector.css.snap index a3260bf208d7..8131841bcb23 100644 --- a/crates/biome_css_parser/tests/css_test_suite/error/selector/pseudo_class/pseudo_class_function_compound_selector.css.snap +++ b/crates/biome_css_parser/tests/css_test_suite/error/selector/pseudo_class/pseudo_class_function_compound_selector.css.snap @@ -2,7 +2,6 @@ source: crates/biome_css_parser/tests/spec_test.rs expression: snapshot --- - ## Input ```css @@ -307,6 +306,11 @@ CssRoot { }, ], }, + CssBogus { + items: [ + CSS_SPACE_LITERAL@133..134 "\n" [] [], + ], + }, ], }, }, @@ -318,7 +322,7 @@ CssRoot { }, }, ], - eof_token: EOF@133..134 "" [Newline("\n")] [], + eof_token: EOF@134..134 "" [] [], } ``` @@ -327,7 +331,7 @@ CssRoot { ``` 0: CSS_ROOT@0..134 0: (empty) - 1: CSS_RULE_LIST@0..133 + 1: CSS_RULE_LIST@0..134 0: CSS_QUALIFIED_RULE@0..9 0: CSS_SELECTOR_LIST@0..7 0: CSS_COMPOUND_SELECTOR@0..7 @@ -492,15 +496,15 @@ CssRoot { 0: L_CURLY@120..121 "{" [] [] 1: CSS_DECLARATION_OR_RULE_LIST@121..121 2: R_CURLY@121..122 "}" [] [] - 7: CSS_QUALIFIED_RULE@122..133 - 0: CSS_SELECTOR_LIST@122..133 - 0: CSS_COMPOUND_SELECTOR@122..133 + 7: CSS_QUALIFIED_RULE@122..134 + 0: CSS_SELECTOR_LIST@122..134 + 0: CSS_COMPOUND_SELECTOR@122..134 0: (empty) 1: (empty) - 2: CSS_SUB_SELECTOR_LIST@122..133 - 0: CSS_PSEUDO_CLASS_SELECTOR@122..133 + 2: CSS_SUB_SELECTOR_LIST@122..134 + 0: CSS_PSEUDO_CLASS_SELECTOR@122..134 0: COLON@122..124 ":" [Newline("\n")] [] - 1: CSS_BOGUS_PSEUDO_CLASS@124..133 + 1: CSS_BOGUS_PSEUDO_CLASS@124..134 0: HOST_KW@124..128 "host" [] [] 1: L_PAREN@128..129 "(" [] [] 2: CSS_COMPOUND_SELECTOR@129..133 @@ -511,8 +515,10 @@ CssRoot { 0: DOT@129..130 "." [] [] 1: CSS_CUSTOM_IDENTIFIER@130..133 0: IDENT@130..133 "div" [] [] - 1: CSS_BOGUS_BLOCK@133..133 - 2: EOF@133..134 "" [Newline("\n")] [] + 3: CSS_BOGUS@133..134 + 0: CSS_SPACE_LITERAL@133..134 "\n" [] [] + 1: CSS_BOGUS_BLOCK@134..134 + 2: EOF@134..134 "" [] [] ``` @@ -672,6 +678,27 @@ pseudo_class_function_compound_selector.css:7:12 parse ━━━━━━━━ i Remove { +pseudo_class_function_compound_selector.css:8:7 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + × Expected a compound selector but instead found '.div + '. + + 6 │ :host(.div .class {} + 7 │ :host(.div {} + > 8 │ :host(.div + │ ^^^^ + > 9 │ + │ + + i Expected a compound selector here. + + 6 │ :host(.div .class {} + 7 │ :host(.div {} + > 8 │ :host(.div + │ ^^^^ + > 9 │ + │ + pseudo_class_function_compound_selector.css:9:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × expected `)` but instead the file ends @@ -689,5 +716,3 @@ pseudo_class_function_compound_selector.css:9:1 parse ━━━━━━━━ │ ``` - - diff --git a/crates/biome_css_parser/tests/css_test_suite/error/selector/pseudo_class/pseudo_class_function_compound_selector_list.css.snap b/crates/biome_css_parser/tests/css_test_suite/error/selector/pseudo_class/pseudo_class_function_compound_selector_list.css.snap index 483b24ee23af..14bb84834482 100644 --- a/crates/biome_css_parser/tests/css_test_suite/error/selector/pseudo_class/pseudo_class_function_compound_selector_list.css.snap +++ b/crates/biome_css_parser/tests/css_test_suite/error/selector/pseudo_class/pseudo_class_function_compound_selector_list.css.snap @@ -2,7 +2,6 @@ source: crates/biome_css_parser/tests/spec_test.rs expression: snapshot --- - ## Input ```css @@ -341,6 +340,11 @@ CssRoot { ], }, ], + CssBogus { + items: [ + CSS_SPACE_LITERAL@148..149 "\n" [] [], + ], + }, ], }, }, @@ -352,7 +356,7 @@ CssRoot { }, }, ], - eof_token: EOF@148..149 "" [Newline("\n")] [], + eof_token: EOF@149..149 "" [] [], } ``` @@ -361,7 +365,7 @@ CssRoot { ``` 0: CSS_ROOT@0..149 0: (empty) - 1: CSS_RULE_LIST@0..148 + 1: CSS_RULE_LIST@0..149 0: CSS_QUALIFIED_RULE@0..9 0: CSS_SELECTOR_LIST@0..7 0: CSS_COMPOUND_SELECTOR@0..7 @@ -545,15 +549,15 @@ CssRoot { 0: L_CURLY@135..136 "{" [] [] 1: CSS_DECLARATION_OR_RULE_LIST@136..136 2: R_CURLY@136..137 "}" [] [] - 8: CSS_QUALIFIED_RULE@137..148 - 0: CSS_SELECTOR_LIST@137..148 - 0: CSS_COMPOUND_SELECTOR@137..148 + 8: CSS_QUALIFIED_RULE@137..149 + 0: CSS_SELECTOR_LIST@137..149 + 0: CSS_COMPOUND_SELECTOR@137..149 0: (empty) 1: (empty) - 2: CSS_SUB_SELECTOR_LIST@137..148 - 0: CSS_PSEUDO_CLASS_SELECTOR@137..148 + 2: CSS_SUB_SELECTOR_LIST@137..149 + 0: CSS_PSEUDO_CLASS_SELECTOR@137..149 0: COLON@137..139 ":" [Newline("\n")] [] - 1: CSS_BOGUS_PSEUDO_CLASS@139..148 + 1: CSS_BOGUS_PSEUDO_CLASS@139..149 0: PAST_KW@139..143 "past" [] [] 1: L_PAREN@143..144 "(" [] [] 2: CSS_COMPOUND_SELECTOR_LIST@144..148 @@ -565,8 +569,10 @@ CssRoot { 0: DOT@144..145 "." [] [] 1: CSS_CUSTOM_IDENTIFIER@145..148 0: IDENT@145..148 "div" [] [] - 1: CSS_BOGUS_BLOCK@148..148 - 2: EOF@148..149 "" [Newline("\n")] [] + 3: CSS_BOGUS@148..149 + 0: CSS_SPACE_LITERAL@148..149 "\n" [] [] + 1: CSS_BOGUS_BLOCK@149..149 + 2: EOF@149..149 "" [] [] ``` @@ -785,6 +791,42 @@ pseudo_class_function_compound_selector_list.css:8:12 parse ━━━━━━ i Remove { +pseudo_class_function_compound_selector_list.css:9:11 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + × expected `,` but instead found ` + ` + + 7 │ :past(.div .class {} + 8 │ :past(.div {} + > 9 │ :past(.div + │ + > 10 │ + │ + + i Remove + + +pseudo_class_function_compound_selector_list.css:9:7 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + × Expected a compound selector but instead found '.div + '. + + 7 │ :past(.div .class {} + 8 │ :past(.div {} + > 9 │ :past(.div + │ ^^^^ + > 10 │ + │ + + i Expected a compound selector here. + + 7 │ :past(.div .class {} + 8 │ :past(.div {} + > 9 │ :past(.div + │ ^^^^ + > 10 │ + │ + pseudo_class_function_compound_selector_list.css:10:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × expected `)` but instead the file ends @@ -802,5 +844,3 @@ pseudo_class_function_compound_selector_list.css:10:1 parse ━━━━━━ │ ``` - - diff --git a/crates/biome_css_parser/tests/css_test_suite/error/selector/pseudo_class/pseudo_class_function_relative_selector_list.css.snap b/crates/biome_css_parser/tests/css_test_suite/error/selector/pseudo_class/pseudo_class_function_relative_selector_list.css.snap index 0fd4aabee77b..31c967056db9 100644 --- a/crates/biome_css_parser/tests/css_test_suite/error/selector/pseudo_class/pseudo_class_function_relative_selector_list.css.snap +++ b/crates/biome_css_parser/tests/css_test_suite/error/selector/pseudo_class/pseudo_class_function_relative_selector_list.css.snap @@ -2,7 +2,6 @@ source: crates/biome_css_parser/tests/spec_test.rs expression: snapshot --- - ## Input ```css @@ -350,17 +349,21 @@ CssRoot { CssRelativeSelectorList [ CssRelativeSelector { combinator: missing (optional), - selector: CssCompoundSelector { - nesting_selector_token: missing (optional), - simple_selector: missing (optional), - sub_selectors: CssSubSelectorList [ - CssClassSelector { - dot_token: DOT@147..148 "." [] [], - name: CssCustomIdentifier { - value_token: IDENT@148..151 "div" [] [], + selector: CssComplexSelector { + left: CssCompoundSelector { + nesting_selector_token: missing (optional), + simple_selector: missing (optional), + sub_selectors: CssSubSelectorList [ + CssClassSelector { + dot_token: DOT@147..148 "." [] [], + name: CssCustomIdentifier { + value_token: IDENT@148..151 "div" [] [], + }, }, - }, - ], + ], + }, + combinator: CSS_SPACE_LITERAL@151..152 "\n" [] [], + right: missing (required), }, }, ], @@ -375,7 +378,7 @@ CssRoot { }, }, ], - eof_token: EOF@151..152 "" [Newline("\n")] [], + eof_token: EOF@152..152 "" [] [], } ``` @@ -384,7 +387,7 @@ CssRoot { ``` 0: CSS_ROOT@0..152 0: (empty) - 1: CSS_RULE_LIST@0..151 + 1: CSS_RULE_LIST@0..152 0: CSS_QUALIFIED_RULE@0..8 0: CSS_SELECTOR_LIST@0..6 0: CSS_COMPOUND_SELECTOR@0..6 @@ -583,30 +586,33 @@ CssRoot { 0: L_CURLY@139..140 "{" [] [] 1: CSS_DECLARATION_OR_RULE_LIST@140..140 2: R_CURLY@140..141 "}" [] [] - 8: CSS_QUALIFIED_RULE@141..151 - 0: CSS_SELECTOR_LIST@141..151 - 0: CSS_COMPOUND_SELECTOR@141..151 + 8: CSS_QUALIFIED_RULE@141..152 + 0: CSS_SELECTOR_LIST@141..152 + 0: CSS_COMPOUND_SELECTOR@141..152 0: (empty) 1: (empty) - 2: CSS_SUB_SELECTOR_LIST@141..151 - 0: CSS_PSEUDO_CLASS_SELECTOR@141..151 + 2: CSS_SUB_SELECTOR_LIST@141..152 + 0: CSS_PSEUDO_CLASS_SELECTOR@141..152 0: COLON@141..143 ":" [Newline("\n")] [] - 1: CSS_BOGUS_PSEUDO_CLASS@143..151 + 1: CSS_BOGUS_PSEUDO_CLASS@143..152 0: HAS_KW@143..146 "has" [] [] 1: L_PAREN@146..147 "(" [] [] - 2: CSS_RELATIVE_SELECTOR_LIST@147..151 - 0: CSS_RELATIVE_SELECTOR@147..151 + 2: CSS_RELATIVE_SELECTOR_LIST@147..152 + 0: CSS_RELATIVE_SELECTOR@147..152 0: (empty) - 1: CSS_COMPOUND_SELECTOR@147..151 - 0: (empty) - 1: (empty) - 2: CSS_SUB_SELECTOR_LIST@147..151 - 0: CSS_CLASS_SELECTOR@147..151 - 0: DOT@147..148 "." [] [] - 1: CSS_CUSTOM_IDENTIFIER@148..151 - 0: IDENT@148..151 "div" [] [] - 1: CSS_BOGUS_BLOCK@151..151 - 2: EOF@151..152 "" [Newline("\n")] [] + 1: CSS_COMPLEX_SELECTOR@147..152 + 0: CSS_COMPOUND_SELECTOR@147..151 + 0: (empty) + 1: (empty) + 2: CSS_SUB_SELECTOR_LIST@147..151 + 0: CSS_CLASS_SELECTOR@147..151 + 0: DOT@147..148 "." [] [] + 1: CSS_CUSTOM_IDENTIFIER@148..151 + 0: IDENT@148..151 "div" [] [] + 1: CSS_SPACE_LITERAL@151..152 "\n" [] [] + 2: (empty) + 1: CSS_BOGUS_BLOCK@152..152 + 2: EOF@152..152 "" [] [] ``` @@ -763,14 +769,14 @@ pseudo_class_function_relative_selector_list.css:8:11 parse ━━━━━━ pseudo_class_function_relative_selector_list.css:10:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `)` but instead the file ends + × Expected a compound selector but instead found the end of the file. 8 │ :has(.div {} 9 │ :has(.div > 10 │ │ - i the file ends here + i Expected a compound selector here. 8 │ :has(.div {} 9 │ :has(.div @@ -778,5 +784,3 @@ pseudo_class_function_relative_selector_list.css:10:1 parse ━━━━━━ │ ``` - - diff --git a/crates/biome_css_parser/tests/css_test_suite/error/selector/pseudo_class/pseudo_class_function_selector/enabled/pseudo_class_function_selector_enabled.css.snap b/crates/biome_css_parser/tests/css_test_suite/error/selector/pseudo_class/pseudo_class_function_selector/enabled/pseudo_class_function_selector_enabled.css.snap index bfe77998421a..1c29f5ad992c 100644 --- a/crates/biome_css_parser/tests/css_test_suite/error/selector/pseudo_class/pseudo_class_function_selector/enabled/pseudo_class_function_selector_enabled.css.snap +++ b/crates/biome_css_parser/tests/css_test_suite/error/selector/pseudo_class/pseudo_class_function_selector/enabled/pseudo_class_function_selector_enabled.css.snap @@ -221,31 +221,35 @@ CssRoot { GLOBAL_KW@98..104 "global" [] [], L_PAREN@104..105 "(" [] [], CssComplexSelector { - left: CssCompoundSelector { - nesting_selector_token: missing (optional), - simple_selector: missing (optional), - sub_selectors: CssSubSelectorList [ - CssClassSelector { - dot_token: DOT@105..106 "." [] [], - name: CssCustomIdentifier { - value_token: IDENT@106..109 "div" [] [], + left: CssComplexSelector { + left: CssCompoundSelector { + nesting_selector_token: missing (optional), + simple_selector: missing (optional), + sub_selectors: CssSubSelectorList [ + CssClassSelector { + dot_token: DOT@105..106 "." [] [], + name: CssCustomIdentifier { + value_token: IDENT@106..109 "div" [] [], + }, }, - }, - ], - }, - combinator: CSS_SPACE_LITERAL@109..110 " " [] [], - right: CssCompoundSelector { - nesting_selector_token: missing (optional), - simple_selector: missing (optional), - sub_selectors: CssSubSelectorList [ - CssClassSelector { - dot_token: DOT@110..111 "." [] [], - name: CssCustomIdentifier { - value_token: IDENT@111..116 "class" [] [], + ], + }, + combinator: CSS_SPACE_LITERAL@109..110 " " [] [], + right: CssCompoundSelector { + nesting_selector_token: missing (optional), + simple_selector: missing (optional), + sub_selectors: CssSubSelectorList [ + CssClassSelector { + dot_token: DOT@110..111 "." [] [], + name: CssCustomIdentifier { + value_token: IDENT@111..116 "class" [] [], + }, }, - }, - ], + ], + }, }, + combinator: CSS_SPACE_LITERAL@116..117 "\n" [] [], + right: missing (required), }, ], }, @@ -258,7 +262,7 @@ CssRoot { }, }, ], - eof_token: EOF@116..117 "" [Newline("\n")] [], + eof_token: EOF@117..117 "" [] [], } ``` @@ -267,7 +271,7 @@ CssRoot { ``` 0: CSS_ROOT@0..117 0: (empty) - 1: CSS_RULE_LIST@0..116 + 1: CSS_RULE_LIST@0..117 0: CSS_QUALIFIED_RULE@0..11 0: CSS_SELECTOR_LIST@0..9 0: CSS_COMPOUND_SELECTOR@0..9 @@ -387,37 +391,40 @@ CssRoot { 0: L_CURLY@94..95 "{" [] [] 1: CSS_DECLARATION_OR_RULE_LIST@95..95 2: R_CURLY@95..96 "}" [] [] - 5: CSS_QUALIFIED_RULE@96..116 - 0: CSS_SELECTOR_LIST@96..116 - 0: CSS_COMPOUND_SELECTOR@96..116 + 5: CSS_QUALIFIED_RULE@96..117 + 0: CSS_SELECTOR_LIST@96..117 + 0: CSS_COMPOUND_SELECTOR@96..117 0: (empty) 1: (empty) - 2: CSS_SUB_SELECTOR_LIST@96..116 - 0: CSS_PSEUDO_CLASS_SELECTOR@96..116 + 2: CSS_SUB_SELECTOR_LIST@96..117 + 0: CSS_PSEUDO_CLASS_SELECTOR@96..117 0: COLON@96..98 ":" [Newline("\n")] [] - 1: CSS_BOGUS_PSEUDO_CLASS@98..116 + 1: CSS_BOGUS_PSEUDO_CLASS@98..117 0: GLOBAL_KW@98..104 "global" [] [] 1: L_PAREN@104..105 "(" [] [] - 2: CSS_COMPLEX_SELECTOR@105..116 - 0: CSS_COMPOUND_SELECTOR@105..109 - 0: (empty) - 1: (empty) - 2: CSS_SUB_SELECTOR_LIST@105..109 - 0: CSS_CLASS_SELECTOR@105..109 - 0: DOT@105..106 "." [] [] - 1: CSS_CUSTOM_IDENTIFIER@106..109 - 0: IDENT@106..109 "div" [] [] - 1: CSS_SPACE_LITERAL@109..110 " " [] [] - 2: CSS_COMPOUND_SELECTOR@110..116 - 0: (empty) - 1: (empty) - 2: CSS_SUB_SELECTOR_LIST@110..116 - 0: CSS_CLASS_SELECTOR@110..116 - 0: DOT@110..111 "." [] [] - 1: CSS_CUSTOM_IDENTIFIER@111..116 - 0: IDENT@111..116 "class" [] [] - 1: CSS_BOGUS_BLOCK@116..116 - 2: EOF@116..117 "" [Newline("\n")] [] + 2: CSS_COMPLEX_SELECTOR@105..117 + 0: CSS_COMPLEX_SELECTOR@105..116 + 0: CSS_COMPOUND_SELECTOR@105..109 + 0: (empty) + 1: (empty) + 2: CSS_SUB_SELECTOR_LIST@105..109 + 0: CSS_CLASS_SELECTOR@105..109 + 0: DOT@105..106 "." [] [] + 1: CSS_CUSTOM_IDENTIFIER@106..109 + 0: IDENT@106..109 "div" [] [] + 1: CSS_SPACE_LITERAL@109..110 " " [] [] + 2: CSS_COMPOUND_SELECTOR@110..116 + 0: (empty) + 1: (empty) + 2: CSS_SUB_SELECTOR_LIST@110..116 + 0: CSS_CLASS_SELECTOR@110..116 + 0: DOT@110..111 "." [] [] + 1: CSS_CUSTOM_IDENTIFIER@111..116 + 0: IDENT@111..116 "class" [] [] + 1: CSS_SPACE_LITERAL@116..117 "\n" [] [] + 2: (empty) + 1: CSS_BOGUS_BLOCK@117..117 + 2: EOF@117..117 "" [] [] ``` @@ -526,14 +533,14 @@ pseudo_class_function_selector_enabled.css:5:21 parse ━━━━━━━━ pseudo_class_function_selector_enabled.css:7:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `)` but instead the file ends + × Expected a compound selector but instead found the end of the file. 5 │ :global(.div .class {} 6 │ :global(.div .class > 7 │ │ - i the file ends here + i Expected a compound selector here. 5 │ :global(.div .class {} 6 │ :global(.div .class diff --git a/crates/biome_css_parser/tests/css_test_suite/error/selector/pseudo_class/pseudo_class_function_selector_list.css.snap b/crates/biome_css_parser/tests/css_test_suite/error/selector/pseudo_class/pseudo_class_function_selector_list.css.snap index 4c75d67a36e6..3ca158d37a94 100644 --- a/crates/biome_css_parser/tests/css_test_suite/error/selector/pseudo_class/pseudo_class_function_selector_list.css.snap +++ b/crates/biome_css_parser/tests/css_test_suite/error/selector/pseudo_class/pseudo_class_function_selector_list.css.snap @@ -2,7 +2,6 @@ source: crates/biome_css_parser/tests/spec_test.rs expression: snapshot --- - ## Input ```css @@ -339,17 +338,21 @@ CssRoot { WHERE_KW@159..164 "where" [] [], L_PAREN@164..165 "(" [] [], CssSelectorList [ - CssCompoundSelector { - nesting_selector_token: missing (optional), - simple_selector: missing (optional), - sub_selectors: CssSubSelectorList [ - CssClassSelector { - dot_token: DOT@165..166 "." [] [], - name: CssCustomIdentifier { - value_token: IDENT@166..169 "div" [] [], + CssComplexSelector { + left: CssCompoundSelector { + nesting_selector_token: missing (optional), + simple_selector: missing (optional), + sub_selectors: CssSubSelectorList [ + CssClassSelector { + dot_token: DOT@165..166 "." [] [], + name: CssCustomIdentifier { + value_token: IDENT@166..169 "div" [] [], + }, }, - }, - ], + ], + }, + combinator: CSS_SPACE_LITERAL@169..170 "\n" [] [], + right: missing (required), }, ], ], @@ -363,7 +366,7 @@ CssRoot { }, }, ], - eof_token: EOF@169..170 "" [Newline("\n")] [], + eof_token: EOF@170..170 "" [] [], } ``` @@ -372,7 +375,7 @@ CssRoot { ``` 0: CSS_ROOT@0..170 0: (empty) - 1: CSS_RULE_LIST@0..169 + 1: CSS_RULE_LIST@0..170 0: CSS_QUALIFIED_RULE@0..10 0: CSS_SELECTOR_LIST@0..8 0: CSS_COMPOUND_SELECTOR@0..8 @@ -565,28 +568,31 @@ CssRoot { 0: L_CURLY@155..156 "{" [] [] 1: CSS_DECLARATION_OR_RULE_LIST@156..156 2: R_CURLY@156..157 "}" [] [] - 8: CSS_QUALIFIED_RULE@157..169 - 0: CSS_SELECTOR_LIST@157..169 - 0: CSS_COMPOUND_SELECTOR@157..169 + 8: CSS_QUALIFIED_RULE@157..170 + 0: CSS_SELECTOR_LIST@157..170 + 0: CSS_COMPOUND_SELECTOR@157..170 0: (empty) 1: (empty) - 2: CSS_SUB_SELECTOR_LIST@157..169 - 0: CSS_PSEUDO_CLASS_SELECTOR@157..169 + 2: CSS_SUB_SELECTOR_LIST@157..170 + 0: CSS_PSEUDO_CLASS_SELECTOR@157..170 0: COLON@157..159 ":" [Newline("\n")] [] - 1: CSS_BOGUS_PSEUDO_CLASS@159..169 + 1: CSS_BOGUS_PSEUDO_CLASS@159..170 0: WHERE_KW@159..164 "where" [] [] 1: L_PAREN@164..165 "(" [] [] - 2: CSS_SELECTOR_LIST@165..169 - 0: CSS_COMPOUND_SELECTOR@165..169 - 0: (empty) - 1: (empty) - 2: CSS_SUB_SELECTOR_LIST@165..169 - 0: CSS_CLASS_SELECTOR@165..169 - 0: DOT@165..166 "." [] [] - 1: CSS_CUSTOM_IDENTIFIER@166..169 - 0: IDENT@166..169 "div" [] [] - 1: CSS_BOGUS_BLOCK@169..169 - 2: EOF@169..170 "" [Newline("\n")] [] + 2: CSS_SELECTOR_LIST@165..170 + 0: CSS_COMPLEX_SELECTOR@165..170 + 0: CSS_COMPOUND_SELECTOR@165..169 + 0: (empty) + 1: (empty) + 2: CSS_SUB_SELECTOR_LIST@165..169 + 0: CSS_CLASS_SELECTOR@165..169 + 0: DOT@165..166 "." [] [] + 1: CSS_CUSTOM_IDENTIFIER@166..169 + 0: IDENT@166..169 "div" [] [] + 1: CSS_SPACE_LITERAL@169..170 "\n" [] [] + 2: (empty) + 1: CSS_BOGUS_BLOCK@170..170 + 2: EOF@170..170 "" [] [] ``` @@ -768,14 +774,14 @@ pseudo_class_function_selector_list.css:8:13 parse ━━━━━━━━━ pseudo_class_function_selector_list.css:10:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - × expected `)` but instead the file ends + × Expected a compound selector but instead found the end of the file. 8 │ :where(.div {} 9 │ :where(.div > 10 │ │ - i the file ends here + i Expected a compound selector here. 8 │ :where(.div {} 9 │ :where(.div @@ -783,5 +789,3 @@ pseudo_class_function_selector_list.css:10:1 parse ━━━━━━━━━ │ ``` - - diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/selector/nesting/nesting.css.snap b/crates/biome_css_parser/tests/css_test_suite/ok/selector/nesting/nesting.css.snap index 58e24c4b3d5e..850bf493b042 100644 --- a/crates/biome_css_parser/tests/css_test_suite/ok/selector/nesting/nesting.css.snap +++ b/crates/biome_css_parser/tests/css_test_suite/ok/selector/nesting/nesting.css.snap @@ -218,15 +218,23 @@ CssRoot { prelude: CssRelativeSelectorList [ CssRelativeSelector { combinator: missing (optional), - selector: CssCompoundSelector { - nesting_selector_token: AMP@18..22 "&" [Newline("\n"), Whitespace("\t")] [Whitespace(" ")], - simple_selector: CssTypeSelector { - namespace: missing (optional), - ident: CssIdentifier { - value_token: IDENT@22..25 "td" [] [Whitespace(" ")], + selector: CssComplexSelector { + left: CssCompoundSelector { + nesting_selector_token: AMP@18..21 "&" [Newline("\n"), Whitespace("\t")] [], + simple_selector: missing (optional), + sub_selectors: CssSubSelectorList [], + }, + combinator: CSS_SPACE_LITERAL@21..22 " " [] [], + right: CssCompoundSelector { + nesting_selector_token: missing (optional), + simple_selector: CssTypeSelector { + namespace: missing (optional), + ident: CssIdentifier { + value_token: IDENT@22..25 "td" [] [Whitespace(" ")], + }, }, + sub_selectors: CssSubSelectorList [], }, - sub_selectors: CssSubSelectorList [], }, }, ], @@ -382,15 +390,23 @@ CssRoot { prelude: CssRelativeSelectorList [ CssRelativeSelector { combinator: missing (optional), - selector: CssCompoundSelector { - nesting_selector_token: AMP@149..154 "&" [Newline("\n"), Newline("\n"), Whitespace("\t")] [Whitespace(" ")], - simple_selector: CssTypeSelector { - namespace: missing (optional), - ident: CssIdentifier { - value_token: IDENT@154..157 "th" [] [Whitespace(" ")], + selector: CssComplexSelector { + left: CssCompoundSelector { + nesting_selector_token: AMP@149..153 "&" [Newline("\n"), Newline("\n"), Whitespace("\t")] [], + simple_selector: missing (optional), + sub_selectors: CssSubSelectorList [], + }, + combinator: CSS_SPACE_LITERAL@153..154 " " [] [], + right: CssCompoundSelector { + nesting_selector_token: missing (optional), + simple_selector: CssTypeSelector { + namespace: missing (optional), + ident: CssIdentifier { + value_token: IDENT@154..157 "th" [] [Whitespace(" ")], + }, }, + sub_selectors: CssSubSelectorList [], }, - sub_selectors: CssSubSelectorList [], }, }, ], @@ -785,35 +801,59 @@ CssRoot { combinator: missing (optional), selector: CssComplexSelector { left: CssComplexSelector { - left: CssCompoundSelector { - nesting_selector_token: AMP@401..405 "&" [Newline("\n"), Whitespace("\t")] [Whitespace(" ")], - simple_selector: missing (optional), - sub_selectors: CssSubSelectorList [ - CssClassSelector { - dot_token: DOT@405..406 "." [] [], - name: CssCustomIdentifier { - value_token: IDENT@406..409 "bar" [] [], + left: CssComplexSelector { + left: CssComplexSelector { + left: CssComplexSelector { + left: CssCompoundSelector { + nesting_selector_token: AMP@401..404 "&" [Newline("\n"), Whitespace("\t")] [], + simple_selector: missing (optional), + sub_selectors: CssSubSelectorList [], + }, + combinator: CSS_SPACE_LITERAL@404..405 " " [] [], + right: CssCompoundSelector { + nesting_selector_token: missing (optional), + simple_selector: missing (optional), + sub_selectors: CssSubSelectorList [ + CssClassSelector { + dot_token: DOT@405..406 "." [] [], + name: CssCustomIdentifier { + value_token: IDENT@406..409 "bar" [] [], + }, + }, + ], }, }, - ], + combinator: CSS_SPACE_LITERAL@409..410 " " [] [], + right: CssCompoundSelector { + nesting_selector_token: AMP@410..411 "&" [] [], + simple_selector: missing (optional), + sub_selectors: CssSubSelectorList [], + }, + }, + combinator: CSS_SPACE_LITERAL@411..412 " " [] [], + right: CssCompoundSelector { + nesting_selector_token: missing (optional), + simple_selector: missing (optional), + sub_selectors: CssSubSelectorList [ + CssClassSelector { + dot_token: DOT@412..413 "." [] [], + name: CssCustomIdentifier { + value_token: IDENT@413..416 "baz" [] [], + }, + }, + ], + }, }, - combinator: CSS_SPACE_LITERAL@409..410 " " [] [], + combinator: CSS_SPACE_LITERAL@416..417 " " [] [], right: CssCompoundSelector { - nesting_selector_token: AMP@410..412 "&" [] [Whitespace(" ")], + nesting_selector_token: AMP@417..418 "&" [] [], simple_selector: missing (optional), - sub_selectors: CssSubSelectorList [ - CssClassSelector { - dot_token: DOT@412..413 "." [] [], - name: CssCustomIdentifier { - value_token: IDENT@413..416 "baz" [] [], - }, - }, - ], + sub_selectors: CssSubSelectorList [], }, }, - combinator: CSS_SPACE_LITERAL@416..417 " " [] [], + combinator: CSS_SPACE_LITERAL@418..419 " " [] [], right: CssCompoundSelector { - nesting_selector_token: AMP@417..419 "&" [] [Whitespace(" ")], + nesting_selector_token: missing (optional), simple_selector: missing (optional), sub_selectors: CssSubSelectorList [ CssClassSelector { @@ -1694,15 +1734,23 @@ CssRoot { prelude: CssRelativeSelectorList [ CssRelativeSelector { combinator: missing (optional), - selector: CssCompoundSelector { - nesting_selector_token: AMP@1030..1035 "&" [Newline("\n"), Newline("\n"), Whitespace("\t")] [Whitespace(" ")], - simple_selector: CssTypeSelector { - namespace: missing (optional), - ident: CssIdentifier { - value_token: IDENT@1035..1041 "input" [] [Whitespace(" ")], + selector: CssComplexSelector { + left: CssCompoundSelector { + nesting_selector_token: AMP@1030..1034 "&" [Newline("\n"), Newline("\n"), Whitespace("\t")] [], + simple_selector: missing (optional), + sub_selectors: CssSubSelectorList [], + }, + combinator: CSS_SPACE_LITERAL@1034..1035 " " [] [], + right: CssCompoundSelector { + nesting_selector_token: missing (optional), + simple_selector: CssTypeSelector { + namespace: missing (optional), + ident: CssIdentifier { + value_token: IDENT@1035..1041 "input" [] [Whitespace(" ")], + }, }, + sub_selectors: CssSubSelectorList [], }, - sub_selectors: CssSubSelectorList [], }, }, ], @@ -1943,35 +1991,59 @@ CssRoot { combinator: missing (optional), selector: CssComplexSelector { left: CssComplexSelector { - left: CssCompoundSelector { - nesting_selector_token: AMP@1297..1301 "&" [Newline("\n"), Whitespace("\t")] [Whitespace(" ")], - simple_selector: missing (optional), - sub_selectors: CssSubSelectorList [ - CssClassSelector { - dot_token: DOT@1301..1302 "." [] [], - name: CssCustomIdentifier { - value_token: IDENT@1302..1305 "bar" [] [], + left: CssComplexSelector { + left: CssComplexSelector { + left: CssComplexSelector { + left: CssCompoundSelector { + nesting_selector_token: AMP@1297..1300 "&" [Newline("\n"), Whitespace("\t")] [], + simple_selector: missing (optional), + sub_selectors: CssSubSelectorList [], + }, + combinator: CSS_SPACE_LITERAL@1300..1301 " " [] [], + right: CssCompoundSelector { + nesting_selector_token: missing (optional), + simple_selector: missing (optional), + sub_selectors: CssSubSelectorList [ + CssClassSelector { + dot_token: DOT@1301..1302 "." [] [], + name: CssCustomIdentifier { + value_token: IDENT@1302..1305 "bar" [] [], + }, + }, + ], }, }, - ], + combinator: CSS_SPACE_LITERAL@1305..1306 " " [] [], + right: CssCompoundSelector { + nesting_selector_token: AMP@1306..1307 "&" [] [], + simple_selector: missing (optional), + sub_selectors: CssSubSelectorList [], + }, + }, + combinator: CSS_SPACE_LITERAL@1307..1308 " " [] [], + right: CssCompoundSelector { + nesting_selector_token: missing (optional), + simple_selector: missing (optional), + sub_selectors: CssSubSelectorList [ + CssClassSelector { + dot_token: DOT@1308..1309 "." [] [], + name: CssCustomIdentifier { + value_token: IDENT@1309..1312 "baz" [] [], + }, + }, + ], + }, }, - combinator: CSS_SPACE_LITERAL@1305..1306 " " [] [], + combinator: CSS_SPACE_LITERAL@1312..1313 " " [] [], right: CssCompoundSelector { - nesting_selector_token: AMP@1306..1308 "&" [] [Whitespace(" ")], + nesting_selector_token: AMP@1313..1314 "&" [] [], simple_selector: missing (optional), - sub_selectors: CssSubSelectorList [ - CssClassSelector { - dot_token: DOT@1308..1309 "." [] [], - name: CssCustomIdentifier { - value_token: IDENT@1309..1312 "baz" [] [], - }, - }, - ], + sub_selectors: CssSubSelectorList [], }, }, - combinator: CSS_SPACE_LITERAL@1312..1313 " " [] [], + combinator: CSS_SPACE_LITERAL@1314..1315 " " [] [], right: CssCompoundSelector { - nesting_selector_token: AMP@1313..1315 "&" [] [Whitespace(" ")], + nesting_selector_token: missing (optional), simple_selector: missing (optional), sub_selectors: CssSubSelectorList [ CssClassSelector { @@ -2390,46 +2462,54 @@ CssRoot { prelude: CssRelativeSelectorList [ CssRelativeSelector { combinator: missing (optional), - selector: CssCompoundSelector { - nesting_selector_token: AMP@1557..1561 "&" [Newline("\n"), Whitespace("\t")] [Whitespace(" ")], - simple_selector: missing (optional), - sub_selectors: CssSubSelectorList [ - CssPseudoClassSelector { - colon_token: COLON@1561..1562 ":" [] [], - class: CssPseudoClassFunctionSelectorList { - name: IS_KW@1562..1564 "is" [] [], - l_paren_token: L_PAREN@1564..1565 "(" [] [], - selectors: CssSelectorList [ - CssCompoundSelector { - nesting_selector_token: missing (optional), - simple_selector: missing (optional), - sub_selectors: CssSubSelectorList [ - CssClassSelector { - dot_token: DOT@1565..1566 "." [] [], - name: CssCustomIdentifier { - value_token: IDENT@1566..1569 "bar" [] [], + selector: CssComplexSelector { + left: CssCompoundSelector { + nesting_selector_token: AMP@1557..1560 "&" [Newline("\n"), Whitespace("\t")] [], + simple_selector: missing (optional), + sub_selectors: CssSubSelectorList [], + }, + combinator: CSS_SPACE_LITERAL@1560..1561 " " [] [], + right: CssCompoundSelector { + nesting_selector_token: missing (optional), + simple_selector: missing (optional), + sub_selectors: CssSubSelectorList [ + CssPseudoClassSelector { + colon_token: COLON@1561..1562 ":" [] [], + class: CssPseudoClassFunctionSelectorList { + name: IS_KW@1562..1564 "is" [] [], + l_paren_token: L_PAREN@1564..1565 "(" [] [], + selectors: CssSelectorList [ + CssCompoundSelector { + nesting_selector_token: missing (optional), + simple_selector: missing (optional), + sub_selectors: CssSubSelectorList [ + CssClassSelector { + dot_token: DOT@1565..1566 "." [] [], + name: CssCustomIdentifier { + value_token: IDENT@1566..1569 "bar" [] [], + }, }, - }, - ], - }, - COMMA@1569..1571 "," [] [Whitespace(" ")], - CssCompoundSelector { - nesting_selector_token: AMP@1571..1572 "&" [] [], - simple_selector: missing (optional), - sub_selectors: CssSubSelectorList [ - CssClassSelector { - dot_token: DOT@1572..1573 "." [] [], - name: CssCustomIdentifier { - value_token: IDENT@1573..1576 "baz" [] [], + ], + }, + COMMA@1569..1571 "," [] [Whitespace(" ")], + CssCompoundSelector { + nesting_selector_token: AMP@1571..1572 "&" [] [], + simple_selector: missing (optional), + sub_selectors: CssSubSelectorList [ + CssClassSelector { + dot_token: DOT@1572..1573 "." [] [], + name: CssCustomIdentifier { + value_token: IDENT@1573..1576 "baz" [] [], + }, }, - }, - ], - }, - ], - r_paren_token: R_PAREN@1576..1578 ")" [] [Whitespace(" ")], + ], + }, + ], + r_paren_token: R_PAREN@1576..1578 ")" [] [Whitespace(" ")], + }, }, - }, - ], + ], + }, }, }, ], @@ -2514,15 +2594,23 @@ CssRoot { prelude: CssRelativeSelectorList [ CssRelativeSelector { combinator: missing (optional), - selector: CssCompoundSelector { - nesting_selector_token: AMP@1638..1644 "&" [Newline("\n"), Newline("\n"), Whitespace("\t\t")] [Whitespace(" ")], - simple_selector: CssTypeSelector { - namespace: missing (optional), - ident: CssIdentifier { - value_token: IDENT@1644..1649 "body" [] [Whitespace(" ")], + selector: CssComplexSelector { + left: CssCompoundSelector { + nesting_selector_token: AMP@1638..1643 "&" [Newline("\n"), Newline("\n"), Whitespace("\t\t")] [], + simple_selector: missing (optional), + sub_selectors: CssSubSelectorList [], + }, + combinator: CSS_SPACE_LITERAL@1643..1644 " " [] [], + right: CssCompoundSelector { + nesting_selector_token: missing (optional), + simple_selector: CssTypeSelector { + namespace: missing (optional), + ident: CssIdentifier { + value_token: IDENT@1644..1649 "body" [] [Whitespace(" ")], + }, }, + sub_selectors: CssSubSelectorList [], }, - sub_selectors: CssSubSelectorList [], }, }, ], @@ -2631,15 +2719,23 @@ CssRoot { rules: CssRuleList [ CssQualifiedRule { prelude: CssSelectorList [ - CssCompoundSelector { - nesting_selector_token: AMP@1752..1758 "&" [Newline("\n"), Whitespace("\t\t\t")] [Whitespace(" ")], - simple_selector: CssTypeSelector { - namespace: missing (optional), - ident: CssIdentifier { - value_token: IDENT@1758..1763 "body" [] [Whitespace(" ")], + CssComplexSelector { + left: CssCompoundSelector { + nesting_selector_token: AMP@1752..1757 "&" [Newline("\n"), Whitespace("\t\t\t")] [], + simple_selector: missing (optional), + sub_selectors: CssSubSelectorList [], + }, + combinator: CSS_SPACE_LITERAL@1757..1758 " " [] [], + right: CssCompoundSelector { + nesting_selector_token: missing (optional), + simple_selector: CssTypeSelector { + namespace: missing (optional), + ident: CssIdentifier { + value_token: IDENT@1758..1763 "body" [] [Whitespace(" ")], + }, }, + sub_selectors: CssSubSelectorList [], }, - sub_selectors: CssSubSelectorList [], }, ], block: CssDeclarationOrRuleBlock { @@ -2834,26 +2930,42 @@ CssRoot { rules: CssRuleList [ CssQualifiedRule { prelude: CssSelectorList [ - CssCompoundSelector { - nesting_selector_token: AMP@1915..1920 "&" [Newline("\n"), Whitespace("\t\t")] [Whitespace(" ")], - simple_selector: CssTypeSelector { - namespace: missing (optional), - ident: CssIdentifier { - value_token: IDENT@1920..1922 "h1" [] [], + CssComplexSelector { + left: CssCompoundSelector { + nesting_selector_token: AMP@1915..1919 "&" [Newline("\n"), Whitespace("\t\t")] [], + simple_selector: missing (optional), + sub_selectors: CssSubSelectorList [], + }, + combinator: CSS_SPACE_LITERAL@1919..1920 " " [] [], + right: CssCompoundSelector { + nesting_selector_token: missing (optional), + simple_selector: CssTypeSelector { + namespace: missing (optional), + ident: CssIdentifier { + value_token: IDENT@1920..1922 "h1" [] [], + }, }, + sub_selectors: CssSubSelectorList [], }, - sub_selectors: CssSubSelectorList [], }, COMMA@1922..1924 "," [] [Whitespace(" ")], - CssCompoundSelector { - nesting_selector_token: AMP@1924..1926 "&" [] [Whitespace(" ")], - simple_selector: CssTypeSelector { - namespace: missing (optional), - ident: CssIdentifier { - value_token: IDENT@1926..1929 "h2" [] [Whitespace(" ")], + CssComplexSelector { + left: CssCompoundSelector { + nesting_selector_token: AMP@1924..1925 "&" [] [], + simple_selector: missing (optional), + sub_selectors: CssSubSelectorList [], + }, + combinator: CSS_SPACE_LITERAL@1925..1926 " " [] [], + right: CssCompoundSelector { + nesting_selector_token: missing (optional), + simple_selector: CssTypeSelector { + namespace: missing (optional), + ident: CssIdentifier { + value_token: IDENT@1926..1929 "h2" [] [Whitespace(" ")], + }, }, + sub_selectors: CssSubSelectorList [], }, - sub_selectors: CssSubSelectorList [], }, ], block: CssDeclarationOrRuleBlock { @@ -2920,13 +3032,19 @@ CssRoot { 0: CSS_RELATIVE_SELECTOR_LIST@18..25 0: CSS_RELATIVE_SELECTOR@18..25 0: (empty) - 1: CSS_COMPOUND_SELECTOR@18..25 - 0: AMP@18..22 "&" [Newline("\n"), Whitespace("\t")] [Whitespace(" ")] - 1: CSS_TYPE_SELECTOR@22..25 + 1: CSS_COMPLEX_SELECTOR@18..25 + 0: CSS_COMPOUND_SELECTOR@18..21 + 0: AMP@18..21 "&" [Newline("\n"), Whitespace("\t")] [] + 1: (empty) + 2: CSS_SUB_SELECTOR_LIST@21..21 + 1: CSS_SPACE_LITERAL@21..22 " " [] [] + 2: CSS_COMPOUND_SELECTOR@22..25 0: (empty) - 1: CSS_IDENTIFIER@22..25 - 0: IDENT@22..25 "td" [] [Whitespace(" ")] - 2: CSS_SUB_SELECTOR_LIST@25..25 + 1: CSS_TYPE_SELECTOR@22..25 + 0: (empty) + 1: CSS_IDENTIFIER@22..25 + 0: IDENT@22..25 "td" [] [Whitespace(" ")] + 2: CSS_SUB_SELECTOR_LIST@25..25 1: CSS_DECLARATION_OR_RULE_BLOCK@25..149 0: L_CURLY@25..26 "{" [] [] 1: CSS_DECLARATION_OR_RULE_LIST@26..146 @@ -3027,13 +3145,19 @@ CssRoot { 0: CSS_RELATIVE_SELECTOR_LIST@149..157 0: CSS_RELATIVE_SELECTOR@149..157 0: (empty) - 1: CSS_COMPOUND_SELECTOR@149..157 - 0: AMP@149..154 "&" [Newline("\n"), Newline("\n"), Whitespace("\t")] [Whitespace(" ")] - 1: CSS_TYPE_SELECTOR@154..157 + 1: CSS_COMPLEX_SELECTOR@149..157 + 0: CSS_COMPOUND_SELECTOR@149..153 + 0: AMP@149..153 "&" [Newline("\n"), Newline("\n"), Whitespace("\t")] [] + 1: (empty) + 2: CSS_SUB_SELECTOR_LIST@153..153 + 1: CSS_SPACE_LITERAL@153..154 " " [] [] + 2: CSS_COMPOUND_SELECTOR@154..157 0: (empty) - 1: CSS_IDENTIFIER@154..157 - 0: IDENT@154..157 "th" [] [Whitespace(" ")] - 2: CSS_SUB_SELECTOR_LIST@157..157 + 1: CSS_TYPE_SELECTOR@154..157 + 0: (empty) + 1: CSS_IDENTIFIER@154..157 + 0: IDENT@154..157 "th" [] [Whitespace(" ")] + 2: CSS_SUB_SELECTOR_LIST@157..157 1: CSS_DECLARATION_OR_RULE_BLOCK@157..217 0: L_CURLY@157..158 "{" [] [] 1: CSS_DECLARATION_OR_RULE_LIST@158..214 @@ -3289,27 +3413,45 @@ CssRoot { 0: CSS_RELATIVE_SELECTOR@401..424 0: (empty) 1: CSS_COMPLEX_SELECTOR@401..424 - 0: CSS_COMPLEX_SELECTOR@401..416 - 0: CSS_COMPOUND_SELECTOR@401..409 - 0: AMP@401..405 "&" [Newline("\n"), Whitespace("\t")] [Whitespace(" ")] - 1: (empty) - 2: CSS_SUB_SELECTOR_LIST@405..409 - 0: CSS_CLASS_SELECTOR@405..409 - 0: DOT@405..406 "." [] [] - 1: CSS_CUSTOM_IDENTIFIER@406..409 - 0: IDENT@406..409 "bar" [] [] - 1: CSS_SPACE_LITERAL@409..410 " " [] [] - 2: CSS_COMPOUND_SELECTOR@410..416 - 0: AMP@410..412 "&" [] [Whitespace(" ")] + 0: CSS_COMPLEX_SELECTOR@401..418 + 0: CSS_COMPLEX_SELECTOR@401..416 + 0: CSS_COMPLEX_SELECTOR@401..411 + 0: CSS_COMPLEX_SELECTOR@401..409 + 0: CSS_COMPOUND_SELECTOR@401..404 + 0: AMP@401..404 "&" [Newline("\n"), Whitespace("\t")] [] + 1: (empty) + 2: CSS_SUB_SELECTOR_LIST@404..404 + 1: CSS_SPACE_LITERAL@404..405 " " [] [] + 2: CSS_COMPOUND_SELECTOR@405..409 + 0: (empty) + 1: (empty) + 2: CSS_SUB_SELECTOR_LIST@405..409 + 0: CSS_CLASS_SELECTOR@405..409 + 0: DOT@405..406 "." [] [] + 1: CSS_CUSTOM_IDENTIFIER@406..409 + 0: IDENT@406..409 "bar" [] [] + 1: CSS_SPACE_LITERAL@409..410 " " [] [] + 2: CSS_COMPOUND_SELECTOR@410..411 + 0: AMP@410..411 "&" [] [] + 1: (empty) + 2: CSS_SUB_SELECTOR_LIST@411..411 + 1: CSS_SPACE_LITERAL@411..412 " " [] [] + 2: CSS_COMPOUND_SELECTOR@412..416 + 0: (empty) + 1: (empty) + 2: CSS_SUB_SELECTOR_LIST@412..416 + 0: CSS_CLASS_SELECTOR@412..416 + 0: DOT@412..413 "." [] [] + 1: CSS_CUSTOM_IDENTIFIER@413..416 + 0: IDENT@413..416 "baz" [] [] + 1: CSS_SPACE_LITERAL@416..417 " " [] [] + 2: CSS_COMPOUND_SELECTOR@417..418 + 0: AMP@417..418 "&" [] [] 1: (empty) - 2: CSS_SUB_SELECTOR_LIST@412..416 - 0: CSS_CLASS_SELECTOR@412..416 - 0: DOT@412..413 "." [] [] - 1: CSS_CUSTOM_IDENTIFIER@413..416 - 0: IDENT@413..416 "baz" [] [] - 1: CSS_SPACE_LITERAL@416..417 " " [] [] - 2: CSS_COMPOUND_SELECTOR@417..424 - 0: AMP@417..419 "&" [] [Whitespace(" ")] + 2: CSS_SUB_SELECTOR_LIST@418..418 + 1: CSS_SPACE_LITERAL@418..419 " " [] [] + 2: CSS_COMPOUND_SELECTOR@419..424 + 0: (empty) 1: (empty) 2: CSS_SUB_SELECTOR_LIST@419..424 0: CSS_CLASS_SELECTOR@419..424 @@ -3881,13 +4023,19 @@ CssRoot { 0: CSS_RELATIVE_SELECTOR_LIST@1030..1041 0: CSS_RELATIVE_SELECTOR@1030..1041 0: (empty) - 1: CSS_COMPOUND_SELECTOR@1030..1041 - 0: AMP@1030..1035 "&" [Newline("\n"), Newline("\n"), Whitespace("\t")] [Whitespace(" ")] - 1: CSS_TYPE_SELECTOR@1035..1041 + 1: CSS_COMPLEX_SELECTOR@1030..1041 + 0: CSS_COMPOUND_SELECTOR@1030..1034 + 0: AMP@1030..1034 "&" [Newline("\n"), Newline("\n"), Whitespace("\t")] [] + 1: (empty) + 2: CSS_SUB_SELECTOR_LIST@1034..1034 + 1: CSS_SPACE_LITERAL@1034..1035 " " [] [] + 2: CSS_COMPOUND_SELECTOR@1035..1041 0: (empty) - 1: CSS_IDENTIFIER@1035..1041 - 0: IDENT@1035..1041 "input" [] [Whitespace(" ")] - 2: CSS_SUB_SELECTOR_LIST@1041..1041 + 1: CSS_TYPE_SELECTOR@1035..1041 + 0: (empty) + 1: CSS_IDENTIFIER@1035..1041 + 0: IDENT@1035..1041 "input" [] [Whitespace(" ")] + 2: CSS_SUB_SELECTOR_LIST@1041..1041 1: CSS_DECLARATION_OR_RULE_BLOCK@1041..1057 0: L_CURLY@1041..1043 "{" [] [Whitespace(" ")] 1: CSS_DECLARATION_OR_RULE_LIST@1043..1056 @@ -4044,27 +4192,45 @@ CssRoot { 0: CSS_RELATIVE_SELECTOR@1297..1320 0: (empty) 1: CSS_COMPLEX_SELECTOR@1297..1320 - 0: CSS_COMPLEX_SELECTOR@1297..1312 - 0: CSS_COMPOUND_SELECTOR@1297..1305 - 0: AMP@1297..1301 "&" [Newline("\n"), Whitespace("\t")] [Whitespace(" ")] - 1: (empty) - 2: CSS_SUB_SELECTOR_LIST@1301..1305 - 0: CSS_CLASS_SELECTOR@1301..1305 - 0: DOT@1301..1302 "." [] [] - 1: CSS_CUSTOM_IDENTIFIER@1302..1305 - 0: IDENT@1302..1305 "bar" [] [] - 1: CSS_SPACE_LITERAL@1305..1306 " " [] [] - 2: CSS_COMPOUND_SELECTOR@1306..1312 - 0: AMP@1306..1308 "&" [] [Whitespace(" ")] + 0: CSS_COMPLEX_SELECTOR@1297..1314 + 0: CSS_COMPLEX_SELECTOR@1297..1312 + 0: CSS_COMPLEX_SELECTOR@1297..1307 + 0: CSS_COMPLEX_SELECTOR@1297..1305 + 0: CSS_COMPOUND_SELECTOR@1297..1300 + 0: AMP@1297..1300 "&" [Newline("\n"), Whitespace("\t")] [] + 1: (empty) + 2: CSS_SUB_SELECTOR_LIST@1300..1300 + 1: CSS_SPACE_LITERAL@1300..1301 " " [] [] + 2: CSS_COMPOUND_SELECTOR@1301..1305 + 0: (empty) + 1: (empty) + 2: CSS_SUB_SELECTOR_LIST@1301..1305 + 0: CSS_CLASS_SELECTOR@1301..1305 + 0: DOT@1301..1302 "." [] [] + 1: CSS_CUSTOM_IDENTIFIER@1302..1305 + 0: IDENT@1302..1305 "bar" [] [] + 1: CSS_SPACE_LITERAL@1305..1306 " " [] [] + 2: CSS_COMPOUND_SELECTOR@1306..1307 + 0: AMP@1306..1307 "&" [] [] + 1: (empty) + 2: CSS_SUB_SELECTOR_LIST@1307..1307 + 1: CSS_SPACE_LITERAL@1307..1308 " " [] [] + 2: CSS_COMPOUND_SELECTOR@1308..1312 + 0: (empty) + 1: (empty) + 2: CSS_SUB_SELECTOR_LIST@1308..1312 + 0: CSS_CLASS_SELECTOR@1308..1312 + 0: DOT@1308..1309 "." [] [] + 1: CSS_CUSTOM_IDENTIFIER@1309..1312 + 0: IDENT@1309..1312 "baz" [] [] + 1: CSS_SPACE_LITERAL@1312..1313 " " [] [] + 2: CSS_COMPOUND_SELECTOR@1313..1314 + 0: AMP@1313..1314 "&" [] [] 1: (empty) - 2: CSS_SUB_SELECTOR_LIST@1308..1312 - 0: CSS_CLASS_SELECTOR@1308..1312 - 0: DOT@1308..1309 "." [] [] - 1: CSS_CUSTOM_IDENTIFIER@1309..1312 - 0: IDENT@1309..1312 "baz" [] [] - 1: CSS_SPACE_LITERAL@1312..1313 " " [] [] - 2: CSS_COMPOUND_SELECTOR@1313..1320 - 0: AMP@1313..1315 "&" [] [Whitespace(" ")] + 2: CSS_SUB_SELECTOR_LIST@1314..1314 + 1: CSS_SPACE_LITERAL@1314..1315 " " [] [] + 2: CSS_COMPOUND_SELECTOR@1315..1320 + 0: (empty) 1: (empty) 2: CSS_SUB_SELECTOR_LIST@1315..1320 0: CSS_CLASS_SELECTOR@1315..1320 @@ -4336,34 +4502,40 @@ CssRoot { 0: CSS_RELATIVE_SELECTOR_LIST@1557..1578 0: CSS_RELATIVE_SELECTOR@1557..1578 0: (empty) - 1: CSS_COMPOUND_SELECTOR@1557..1578 - 0: AMP@1557..1561 "&" [Newline("\n"), Whitespace("\t")] [Whitespace(" ")] - 1: (empty) - 2: CSS_SUB_SELECTOR_LIST@1561..1578 - 0: CSS_PSEUDO_CLASS_SELECTOR@1561..1578 - 0: COLON@1561..1562 ":" [] [] - 1: CSS_PSEUDO_CLASS_FUNCTION_SELECTOR_LIST@1562..1578 - 0: IS_KW@1562..1564 "is" [] [] - 1: L_PAREN@1564..1565 "(" [] [] - 2: CSS_SELECTOR_LIST@1565..1576 - 0: CSS_COMPOUND_SELECTOR@1565..1569 - 0: (empty) - 1: (empty) - 2: CSS_SUB_SELECTOR_LIST@1565..1569 - 0: CSS_CLASS_SELECTOR@1565..1569 - 0: DOT@1565..1566 "." [] [] - 1: CSS_CUSTOM_IDENTIFIER@1566..1569 - 0: IDENT@1566..1569 "bar" [] [] - 1: COMMA@1569..1571 "," [] [Whitespace(" ")] - 2: CSS_COMPOUND_SELECTOR@1571..1576 - 0: AMP@1571..1572 "&" [] [] - 1: (empty) - 2: CSS_SUB_SELECTOR_LIST@1572..1576 - 0: CSS_CLASS_SELECTOR@1572..1576 - 0: DOT@1572..1573 "." [] [] - 1: CSS_CUSTOM_IDENTIFIER@1573..1576 - 0: IDENT@1573..1576 "baz" [] [] - 3: R_PAREN@1576..1578 ")" [] [Whitespace(" ")] + 1: CSS_COMPLEX_SELECTOR@1557..1578 + 0: CSS_COMPOUND_SELECTOR@1557..1560 + 0: AMP@1557..1560 "&" [Newline("\n"), Whitespace("\t")] [] + 1: (empty) + 2: CSS_SUB_SELECTOR_LIST@1560..1560 + 1: CSS_SPACE_LITERAL@1560..1561 " " [] [] + 2: CSS_COMPOUND_SELECTOR@1561..1578 + 0: (empty) + 1: (empty) + 2: CSS_SUB_SELECTOR_LIST@1561..1578 + 0: CSS_PSEUDO_CLASS_SELECTOR@1561..1578 + 0: COLON@1561..1562 ":" [] [] + 1: CSS_PSEUDO_CLASS_FUNCTION_SELECTOR_LIST@1562..1578 + 0: IS_KW@1562..1564 "is" [] [] + 1: L_PAREN@1564..1565 "(" [] [] + 2: CSS_SELECTOR_LIST@1565..1576 + 0: CSS_COMPOUND_SELECTOR@1565..1569 + 0: (empty) + 1: (empty) + 2: CSS_SUB_SELECTOR_LIST@1565..1569 + 0: CSS_CLASS_SELECTOR@1565..1569 + 0: DOT@1565..1566 "." [] [] + 1: CSS_CUSTOM_IDENTIFIER@1566..1569 + 0: IDENT@1566..1569 "bar" [] [] + 1: COMMA@1569..1571 "," [] [Whitespace(" ")] + 2: CSS_COMPOUND_SELECTOR@1571..1576 + 0: AMP@1571..1572 "&" [] [] + 1: (empty) + 2: CSS_SUB_SELECTOR_LIST@1572..1576 + 0: CSS_CLASS_SELECTOR@1572..1576 + 0: DOT@1572..1573 "." [] [] + 1: CSS_CUSTOM_IDENTIFIER@1573..1576 + 0: IDENT@1573..1576 "baz" [] [] + 3: R_PAREN@1576..1578 ")" [] [Whitespace(" ")] 1: CSS_DECLARATION_OR_RULE_BLOCK@1578..1593 0: L_CURLY@1578..1580 "{" [] [Whitespace(" ")] 1: CSS_DECLARATION_OR_RULE_LIST@1580..1592 @@ -4420,13 +4592,19 @@ CssRoot { 0: CSS_RELATIVE_SELECTOR_LIST@1638..1649 0: CSS_RELATIVE_SELECTOR@1638..1649 0: (empty) - 1: CSS_COMPOUND_SELECTOR@1638..1649 - 0: AMP@1638..1644 "&" [Newline("\n"), Newline("\n"), Whitespace("\t\t")] [Whitespace(" ")] - 1: CSS_TYPE_SELECTOR@1644..1649 + 1: CSS_COMPLEX_SELECTOR@1638..1649 + 0: CSS_COMPOUND_SELECTOR@1638..1643 + 0: AMP@1638..1643 "&" [Newline("\n"), Newline("\n"), Whitespace("\t\t")] [] + 1: (empty) + 2: CSS_SUB_SELECTOR_LIST@1643..1643 + 1: CSS_SPACE_LITERAL@1643..1644 " " [] [] + 2: CSS_COMPOUND_SELECTOR@1644..1649 0: (empty) - 1: CSS_IDENTIFIER@1644..1649 - 0: IDENT@1644..1649 "body" [] [Whitespace(" ")] - 2: CSS_SUB_SELECTOR_LIST@1649..1649 + 1: CSS_TYPE_SELECTOR@1644..1649 + 0: (empty) + 1: CSS_IDENTIFIER@1644..1649 + 0: IDENT@1644..1649 "body" [] [Whitespace(" ")] + 2: CSS_SUB_SELECTOR_LIST@1649..1649 1: CSS_DECLARATION_OR_RULE_BLOCK@1649..1679 0: L_CURLY@1649..1650 "{" [] [] 1: CSS_DECLARATION_OR_RULE_LIST@1650..1675 @@ -4498,13 +4676,19 @@ CssRoot { 1: CSS_RULE_LIST@1752..1795 0: CSS_QUALIFIED_RULE@1752..1795 0: CSS_SELECTOR_LIST@1752..1763 - 0: CSS_COMPOUND_SELECTOR@1752..1763 - 0: AMP@1752..1758 "&" [Newline("\n"), Whitespace("\t\t\t")] [Whitespace(" ")] - 1: CSS_TYPE_SELECTOR@1758..1763 + 0: CSS_COMPLEX_SELECTOR@1752..1763 + 0: CSS_COMPOUND_SELECTOR@1752..1757 + 0: AMP@1752..1757 "&" [Newline("\n"), Whitespace("\t\t\t")] [] + 1: (empty) + 2: CSS_SUB_SELECTOR_LIST@1757..1757 + 1: CSS_SPACE_LITERAL@1757..1758 " " [] [] + 2: CSS_COMPOUND_SELECTOR@1758..1763 0: (empty) - 1: CSS_IDENTIFIER@1758..1763 - 0: IDENT@1758..1763 "body" [] [Whitespace(" ")] - 2: CSS_SUB_SELECTOR_LIST@1763..1763 + 1: CSS_TYPE_SELECTOR@1758..1763 + 0: (empty) + 1: CSS_IDENTIFIER@1758..1763 + 0: IDENT@1758..1763 "body" [] [Whitespace(" ")] + 2: CSS_SUB_SELECTOR_LIST@1763..1763 1: CSS_DECLARATION_OR_RULE_BLOCK@1763..1795 0: L_CURLY@1763..1764 "{" [] [] 1: CSS_DECLARATION_OR_RULE_LIST@1764..1790 @@ -4627,21 +4811,33 @@ CssRoot { 1: CSS_RULE_LIST@1915..1950 0: CSS_QUALIFIED_RULE@1915..1950 0: CSS_SELECTOR_LIST@1915..1929 - 0: CSS_COMPOUND_SELECTOR@1915..1922 - 0: AMP@1915..1920 "&" [Newline("\n"), Whitespace("\t\t")] [Whitespace(" ")] - 1: CSS_TYPE_SELECTOR@1920..1922 + 0: CSS_COMPLEX_SELECTOR@1915..1922 + 0: CSS_COMPOUND_SELECTOR@1915..1919 + 0: AMP@1915..1919 "&" [Newline("\n"), Whitespace("\t\t")] [] + 1: (empty) + 2: CSS_SUB_SELECTOR_LIST@1919..1919 + 1: CSS_SPACE_LITERAL@1919..1920 " " [] [] + 2: CSS_COMPOUND_SELECTOR@1920..1922 0: (empty) - 1: CSS_IDENTIFIER@1920..1922 - 0: IDENT@1920..1922 "h1" [] [] - 2: CSS_SUB_SELECTOR_LIST@1922..1922 + 1: CSS_TYPE_SELECTOR@1920..1922 + 0: (empty) + 1: CSS_IDENTIFIER@1920..1922 + 0: IDENT@1920..1922 "h1" [] [] + 2: CSS_SUB_SELECTOR_LIST@1922..1922 1: COMMA@1922..1924 "," [] [Whitespace(" ")] - 2: CSS_COMPOUND_SELECTOR@1924..1929 - 0: AMP@1924..1926 "&" [] [Whitespace(" ")] - 1: CSS_TYPE_SELECTOR@1926..1929 + 2: CSS_COMPLEX_SELECTOR@1924..1929 + 0: CSS_COMPOUND_SELECTOR@1924..1925 + 0: AMP@1924..1925 "&" [] [] + 1: (empty) + 2: CSS_SUB_SELECTOR_LIST@1925..1925 + 1: CSS_SPACE_LITERAL@1925..1926 " " [] [] + 2: CSS_COMPOUND_SELECTOR@1926..1929 0: (empty) - 1: CSS_IDENTIFIER@1926..1929 - 0: IDENT@1926..1929 "h2" [] [Whitespace(" ")] - 2: CSS_SUB_SELECTOR_LIST@1929..1929 + 1: CSS_TYPE_SELECTOR@1926..1929 + 0: (empty) + 1: CSS_IDENTIFIER@1926..1929 + 0: IDENT@1926..1929 "h2" [] [Whitespace(" ")] + 2: CSS_SUB_SELECTOR_LIST@1929..1929 1: CSS_DECLARATION_OR_RULE_BLOCK@1929..1950 0: L_CURLY@1929..1930 "{" [] [] 1: CSS_DECLARATION_OR_RULE_LIST@1930..1946 diff --git a/crates/biome_css_parser/tests/spec_test.rs b/crates/biome_css_parser/tests/spec_test.rs index b23746e221b1..bd9be212e6eb 100644 --- a/crates/biome_css_parser/tests/spec_test.rs +++ b/crates/biome_css_parser/tests/spec_test.rs @@ -174,16 +174,10 @@ pub fn run(test_case: &str, _snapshot_name: &str, test_directory: &str, outcome_ #[test] pub fn quick_test() { let code = r#" -.a { - composes: myClass; -} - -.otherClassName { - composes: className from "./style.css"; -} - -.otherClassName { - composes: globalClassName from global; +.div { + & .class { + color: red + } } "#; diff --git a/crates/biome_rowan/src/syntax/token.rs b/crates/biome_rowan/src/syntax/token.rs index a2235fa682d5..5746dfb95db5 100644 --- a/crates/biome_rowan/src/syntax/token.rs +++ b/crates/biome_rowan/src/syntax/token.rs @@ -499,6 +499,13 @@ impl SyntaxToken { .any(|piece| piece.is_comments()) } + /// Checks if the token has any trailing trivia that is a whitespace + pub fn has_trailing_whitespace(&self) -> bool { + self.trailing_trivia() + .pieces() + .any(|piece| piece.is_whitespace()) + } + /// Checks if the current token has leading comments pub fn has_leading_comments(&self) -> bool { self.leading_trivia() @@ -506,8 +513,8 @@ impl SyntaxToken { .any(|piece| piece.is_comments()) } - /// Checks if the token has any leading trivia that isn't a whitespace nor a line break - pub fn has_leading_non_whitespace_trivia(&self) -> bool { + /// Checks if the token has any leading trivia that is a whitespace or a line break + pub fn has_leading_whitespace_or_newline(&self) -> bool { self.leading_trivia() .pieces() .any(|piece| piece.is_whitespace() || piece.is_newline())