--- source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/inline-url/inline_url.css --- # Input ```css .stringContentIsNotModifiedEvenIfInvalid { background: url('@images'); background: url("$images"); background: url('/+0PX!/"\a?~^[]{} $%#'); background: url("/+0PX!/'\a?~^[]{} $%#"); background: url( "whitespace-around-string" ); } .validUnquotedUrls { background: url( whitespace-around-string ); background-image: url(/images/product/simple_product_manager/breadcrumb/chevron_right.png); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=); background-image: url(data:application/font-woff;charset=utf-8;base64,ThisIsNormalBut/+0ThisIsLowerCased); background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=) center center no-repeat; background: url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%229%22%20height=%229%22%3E%3Cpath%20d=%22M0%203h3%22%20stroke=%22red%22/%3E%3C/svg%3E); offset-path: url(#path); background: url(data/+0ThisShouldNotBeLowerCased); background: url(https://foo/A*3I8oSY6AKRMAAAAAAAAAAABkARQnAQ); background: url(https://example.com/some/quite,long,url,with,commas.jpg); background: url(http://123.example.com); } @import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap); .validUnqotedUrlsThatAreParsedByLess { background: url(@foo); } .validUnquotedUrlsThatAreParsedBySass { background: url($foo); background: url($foo+$bar); background: url($foo*3); background: url($foo/$bar); } .invalidUnquotedUrlsButWeParseThemAnyway { background: url(--var(foo-bar,#dadce0)); -fb-sprite: url(fbglyph:cross-outline, fig-white); } .number { background-image: url(http://123.com); background: url(path/to/123.jpg); background: url(#123.foo); background: no-repeat center/80% url(http://123.com); background: no-repeat center/80% url(path/to/123.jpg); background: no-repeat center/80% url(#123.foo); } ``` # Prettier differences ```diff --- Prettier +++ Biome @@ -7,7 +7,8 @@ } .validUnquotedUrls { - background: url(whitespace-around-string); + background: url(whitespace-around-string + ); background-image: url(/images/product/simple_product_manager/breadcrumb/chevron_right.png); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=); background-image: url(data:application/font-woff;charset=utf-8;base64,ThisIsNormalBut/+0ThisIsLowerCased); @@ -42,7 +43,7 @@ background-image: url(http://123.com); background: url(path/to/123.jpg); background: url(#123.foo); - background: no-repeat center/80% url(http://123.com); - background: no-repeat center/80% url(path/to/123.jpg); - background: no-repeat center/80% url(#123.foo); + background: no-repeat center / 80% url(http://123.com); + background: no-repeat center / 80% url(path/to/123.jpg); + background: no-repeat center / 80% url(#123.foo); } ``` # Output ```css .stringContentIsNotModifiedEvenIfInvalid { background: url("@images"); background: url("$images"); background: url('/+0PX!/"\a?~^[]{} $%#'); background: url("/+0PX!/'\a?~^[]{} $%#"); background: url("whitespace-around-string"); } .validUnquotedUrls { background: url(whitespace-around-string ); background-image: url(/images/product/simple_product_manager/breadcrumb/chevron_right.png); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=); background-image: url(data:application/font-woff;charset=utf-8;base64,ThisIsNormalBut/+0ThisIsLowerCased); background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=) center center no-repeat; background: url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%229%22%20height=%229%22%3E%3Cpath%20d=%22M0%203h3%22%20stroke=%22red%22/%3E%3C/svg%3E); offset-path: url(#path); background: url(data/+0ThisShouldNotBeLowerCased); background: url(https://foo/A*3I8oSY6AKRMAAAAAAAAAAABkARQnAQ); background: url(https://example.com/some/quite,long,url,with,commas.jpg); background: url(http://123.example.com); } @import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap); .validUnqotedUrlsThatAreParsedByLess { background: url(@foo); } .validUnquotedUrlsThatAreParsedBySass { background: url($foo); background: url($foo+$bar); background: url($foo*3); background: url($foo/$bar); } .invalidUnquotedUrlsButWeParseThemAnyway { background: url(--var(foo-bar, #dadce0)); -fb-sprite: url(fbglyph:cross-outline, fig-white); } .number { background-image: url(http://123.com); background: url(path/to/123.jpg); background: url(#123.foo); background: no-repeat center / 80% url(http://123.com); background: no-repeat center / 80% url(path/to/123.jpg); background: no-repeat center / 80% url(#123.foo); } ``` # Errors ``` inline_url.css:29:19 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ × Unexpected value or character. 28 │ .validUnqotedUrlsThatAreParsedByLess { > 29 │ background: url(@foo); │ ^ 30 │ } 31 │ i Expected one of: - function - identifier ``` # Lines exceeding max width of 80 characters ``` 12: background-image: url(/images/product/simple_product_manager/breadcrumb/chevron_right.png); 13: background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=); 14: background-image: url(data:application/font-woff;charset=utf-8;base64,ThisIsNormalBut/+0ThisIsLowerCased); 15: background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=) 17: background: url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%229%22%20height=%229%22%3E%3Cpath%20d=%22M0%203h3%22%20stroke=%22red%22/%3E%3C/svg%3E); 24: @import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap); ```