biome_css_formatter 0.5.7

---
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);
```