--- source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/url/url.css --- # Input ```css div { background: url(/images/bg.png); background: -fb-url(/images/bg.png); } @font-face { src: url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf); src: url(foo.ttf?query=foo,bar,); src: url(foo.woff2?foo=rgb\(255,255,0\)); } a { content: url(https://example.com/\)\).jpg); content: url(https://example.com/\(\(.jpg); content: url(https://example.com/\ \ .jpg); content: url( https://example.com/\)\).jpg ); content: url( https://example.com/\(\(.jpg ); content: url( https://example.com/\ \ .jpg ); background: no-repeat url(https://example.com/\)\).jpg), no-repeat url(https://example.com/\(\(.jpg), no-repeat url(https://example.com/\ \ .jpg), no-repeat url( https://example.com/\)\).jpg ), no-repeat url( https://example.com/\(\(.jpg ), no-repeat url( https://example.com/\ \ .jpg ), no-repeat url(foo.ttf?query=foo,bar,), no-repeat url(foo.woff2?foo=rgb\(255,255,0\)) no-repeat url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf); ; } ``` # Prettier differences ```diff --- Prettier +++ Biome @@ -13,17 +13,17 @@ content: url(https://example.com/\)\).jpg); content: url(https://example.com/\(\(.jpg); content: url(https://example.com/\ \ .jpg); - content: url( https://example.com/\)\).jpg ); - content: url( https://example.com/\(\(.jpg ); - content: url(https://example.com/\ \ .jpg); + content: url(https://example.com/\)\).jpg ); + content: url(https://example.com/\(\(.jpg ); + content: url(https://example.com/\ \ .jpg ); - background: no-repeat url(https://example.com/\)\).jpg), - no-repeat url(https://example.com/\(\(.jpg), - no-repeat url(https://example.com/\ \ .jpg), - no-repeat url( https://example.com/\)\).jpg ), - no-repeat url( https://example.com/\(\(.jpg ), - no-repeat url( https://example.com/\ \ .jpg ), - no-repeat url(foo.ttf?query=foo,bar,), - no-repeat url(foo.woff2?foo=rgb\(255,255,0\)) - no-repeat url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf); + background: no-repeat url(https://example.com/\)\).jpg) , no-repeat + url(https://example.com/\(\(.jpg) , no-repeat + url(https://example.com/\ \ .jpg) , no-repeat + url(https://example.com/\)\).jpg ) , no-repeat + url(https://example.com/\(\(.jpg ) , no-repeat + url(https://example.com/\ \ .jpg ) , no-repeat url(foo.ttf?query=foo,bar,) + , no-repeat url(foo.woff2?foo=rgb\(255,255,0\)) no-repeat + url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf); + ; } ``` # Output ```css div { background: url(/images/bg.png); background: -fb-url(/images/bg.png); } @font-face { src: url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf); src: url(foo.ttf?query=foo,bar,); src: url(foo.woff2?foo=rgb\(255,255,0\)); } a { content: url(https://example.com/\)\).jpg); content: url(https://example.com/\(\(.jpg); content: url(https://example.com/\ \ .jpg); content: url(https://example.com/\)\).jpg ); content: url(https://example.com/\(\(.jpg ); content: url(https://example.com/\ \ .jpg ); background: no-repeat url(https://example.com/\)\).jpg) , no-repeat url(https://example.com/\(\(.jpg) , no-repeat url(https://example.com/\ \ .jpg) , no-repeat url(https://example.com/\)\).jpg ) , no-repeat url(https://example.com/\(\(.jpg ) , no-repeat url(https://example.com/\ \ .jpg ) , no-repeat url(foo.ttf?query=foo,bar,) , no-repeat url(foo.woff2?foo=rgb\(255,255,0\)) no-repeat url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf); ; } ``` # Errors ``` url.css:3:23 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Expected a declaration item but instead found '/'. 1 │ div { 2 │ background: url(/images/bg.png); > 3 │ background: -fb-url(/images/bg.png); │ ^ 4 │ } 5 │ i Expected a declaration item here. 1 │ div { 2 │ background: url(/images/bg.png); > 3 │ background: -fb-url(/images/bg.png); │ ^ 4 │ } 5 │ url.css:3:24 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × expected `,` but instead found `images` 1 │ div { 2 │ background: url(/images/bg.png); > 3 │ background: -fb-url(/images/bg.png); │ ^^^^^^ 4 │ } 5 │ i Remove images url.css:3:33 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. 1 │ div { 2 │ background: url(/images/bg.png); > 3 │ background: -fb-url(/images/bg.png); │ ^^^^ 4 │ } 5 │ i Expected one of: - identifier - string - number - dimension - ratio - custom property - function url.css:30:3 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Expected a declaration, or an at rule but instead found ';'. 28 │ no-repeat url(foo.woff2?foo=rgb\(255,255,0\)) 29 │ no-repeat url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf); > 30 │ ; │ ^ 31 │ } 32 │ i Expected a declaration, or an at rule here. 28 │ no-repeat url(foo.woff2?foo=rgb\(255,255,0\)) 29 │ no-repeat url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf); > 30 │ ; │ ^ 31 │ } 32 │ ``` # Lines exceeding max width of 80 characters ``` 7: src: url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf); 27: url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf); ```