---
source: crates/biome_formatter_test/src/snapshot_builder.rs
info: css/comments/declaration.css
---

# Input

```css
a {
    /* comment 1 */
    /* comment 2 */ padding /* comment 3 */ : /* comment 4 */ 10px /* comment 5 */ 10px /* comment 6 */; /* comment 7 */
    /* comment 8 */
    transform: translate(/* comment 9 */ 10px /* comment 10 */);
    color: /* comment 11 */ red /* comment 12 */ !important /* comment 13 */ ; /* comment 14 */
    /* comment 15 */
}

@font-face {
    font-family: "Prettier";
    src: /* comment 16 */ local(/* comment 17 */ "Prettier" /* comment 18 */), /* comment 19 */
        /* comment 20 */ url("http://prettier.com/font.woff") /* comment 21 */ ; /* comment 22 */
}

.foo {/* comment 23 */color/* comment 24 */:/* comment 25 */blue/* comment 26 */;/* comment 27 */transform/* comment 28 */:/* comment 29 */translate(/* comment 30 */10px/* comment 31 */)/* comment 32 */;/* comment 33 */}
.foo { /* comment 34 */ color /* comment 35 */ : /* comment 36 */ blue /* comment 37 */ ; /* comment 38 */ transform /* comment 39 */ : /* comment 40 */ translate( /* comment 41 */ 10px /* comment 42 */ ) /* comment 43 */ ; /* comment 44 */ }
.foo {
    /* comment 45 */
    /* comment 46 */ color  /* comment 47 */
    /* comment 48 */
    /* comment 49 */ :  /* comment 50 */
    /* comment 51 */
    /* comment 52 */ blue  /* comment 53 */
    /* comment 54 */
    /* comment 55 */ ;  /* comment 56 */
    /* comment 57 */
    /* comment 58 */ transform  /* comment 59 */
    /* comment 60 */
    /* comment 61 */ : /* comment 62 */
    /* comment 63 */
    /* comment 64 */ translate(  /* comment 65 */
        /* comment 66 */
        /* comment 67 */ 10px  /* comment 68 */
        /* comment 69 */
    /* comment 70 */ ) /* comment 71 */
    /* comment 72 */
    /* comment 73 */ ;  /* comment 74 */
    /* comment 75 */
}

body {/* comment 76 */}
body { /* comment 77 */ }
body
{
    /* comment 78 */
}
body
{
    /* comment 79 */
}
body
{

    /* comment 80 */

}

.tab-bar {
    .tab {} /* comment 81 */
}

.selector {
    /* comment 82 */
    position: absolute;

    /* comment 83 */
    display: inline-block;

    /* comment 84 */
    background: #000;
}

```


# Prettier differences

```diff
--- Prettier
+++ Biome
@@ -1,58 +1,54 @@
 a {
   /* comment 1 */
-  /* comment 2 */
-  padding/* comment 3 */ : /* comment 4 */ 10px /* comment 5 */ 10px
-    /* comment 6 */; /* comment 7 */
+  /* comment 2 */ /* comment 3 */ /* comment 4 */ padding: 10px /* comment 5 */
+    10px /* comment 6 */; /* comment 7 */
   /* comment 8 */
   transform: translate(/* comment 9 */ 10px /* comment 10 */);
-  color: /* comment 11 */ red /* comment 12 */ !important /* comment 13 */ ; /* comment 14 */
+  /* comment 11 */ color: red /* comment 12 */ !important /* comment 13 */; /* comment 14 */
   /* comment 15 */
 }
 
 @font-face {
   font-family: "Prettier";
-  src: /* comment 16 */
-    local(/* comment 17 */ "Prettier" /* comment 18 */),
-    /* comment 19 */ /* comment 20 */ url("http://prettier.com/font.woff")
-      /* comment 21 */; /* comment 22 */
+  /* comment 16 */ src: local(/* comment 17 */ "Prettier" /* comment 18 */)
+    , /* comment 19 */ /* comment 20 */ url("http://prettier.com/font.woff") /* comment 21 */; /* comment 22 */
 }
 
 .foo {
-  /* comment 23 */
-  color/* comment 24 */:/* comment 25 */ blue /* comment 26 */; /* comment 27 */
-  transform/* comment 28 */:/* comment 29 */ translate(
+  /* comment 23 */ /* comment 24 */ /* comment 25 */ color: blue /* comment 26 */; /* comment 27 */
+  /* comment 28 */ /* comment 29 */ transform: translate(
       /* comment 30 */ 10px /* comment 31 */
-    )
-    /* comment 32 */; /* comment 33 */
+    ) /* comment 32 */; /* comment 33 */
 }
 .foo {
-  /* comment 34 */
-  color/* comment 35 */ : /* comment 36 */ blue /* comment 37 */; /* comment 38 */
-  transform/* comment 39 */ : /* comment 40 */ translate(
+  /* comment 34 */ /* comment 35 */ /* comment 36 */ color: blue /* comment 37 */; /* comment 38 */
+  /* comment 39 */ /* comment 40 */ transform: translate(
       /* comment 41 */ 10px /* comment 42 */
-    )
-    /* comment 43 */; /* comment 44 */
+    ) /* comment 43 */; /* comment 44 */
 }
 .foo {
   /* comment 45 */
-  /* comment 46 */
-  color/* comment 47 */
-    /* comment 48 */
-    /* comment 49 */ :  /* comment 50 */
-    /* comment 51 */
-    /* comment 52 */ blue
-    /* comment 53 */ /* comment 54 */ /* comment 55 */; /* comment 56 */
+  /* comment 46 */ /* comment 47 */
+  /* comment 48 */
+  /* comment 49 */ /* comment 50 */
+  /* comment 51 */
+  /* comment 52 */ color: blue /* comment 53 */; /* comment 56 */
+  /* comment 54 */
+  /* comment 55 */
   /* comment 57 */
-  /* comment 58 */
-  transform/* comment 59 */
-    /* comment 60 */
-    /* comment 61 */ : /* comment 62 */
-    /* comment 63 */
-    /* comment 64 */ translate(
-      /* comment 65 */ /* comment 66 */ /* comment 67 */ 10px /* comment 68 */
-        /* comment 69 */ /* comment 70 */
-    )
-    /* comment 71 */ /* comment 72 */ /* comment 73 */; /* comment 74 */
+  /* comment 58 */ /* comment 59 */
+  /* comment 60 */
+  /* comment 61 */ /* comment 62 */
+  /* comment 63 */
+  /* comment 64 */ transform: translate(
+      /* comment 65 */
+      /* comment 66 */
+      /* comment 67 */ 10px /* comment 68 */
+      /* comment 69 */
+      /* comment 70 */
+    ) /* comment 71 */; /* comment 74 */
+  /* comment 72 */
+  /* comment 73 */
   /* comment 75 */
 }
 
```

# Output

```css
a {
  /* comment 1 */
  /* comment 2 */ /* comment 3 */ /* comment 4 */ padding: 10px /* comment 5 */
    10px /* comment 6 */; /* comment 7 */
  /* comment 8 */
  transform: translate(/* comment 9 */ 10px /* comment 10 */);
  /* comment 11 */ color: red /* comment 12 */ !important /* comment 13 */; /* comment 14 */
  /* comment 15 */
}

@font-face {
  font-family: "Prettier";
  /* comment 16 */ src: local(/* comment 17 */ "Prettier" /* comment 18 */)
    , /* comment 19 */ /* comment 20 */ url("http://prettier.com/font.woff") /* comment 21 */; /* comment 22 */
}

.foo {
  /* comment 23 */ /* comment 24 */ /* comment 25 */ color: blue /* comment 26 */; /* comment 27 */
  /* comment 28 */ /* comment 29 */ transform: translate(
      /* comment 30 */ 10px /* comment 31 */
    ) /* comment 32 */; /* comment 33 */
}
.foo {
  /* comment 34 */ /* comment 35 */ /* comment 36 */ color: blue /* comment 37 */; /* comment 38 */
  /* comment 39 */ /* comment 40 */ transform: translate(
      /* comment 41 */ 10px /* comment 42 */
    ) /* comment 43 */; /* comment 44 */
}
.foo {
  /* comment 45 */
  /* comment 46 */ /* comment 47 */
  /* comment 48 */
  /* comment 49 */ /* comment 50 */
  /* comment 51 */
  /* comment 52 */ color: blue /* comment 53 */; /* comment 56 */
  /* comment 54 */
  /* comment 55 */
  /* comment 57 */
  /* comment 58 */ /* comment 59 */
  /* comment 60 */
  /* comment 61 */ /* comment 62 */
  /* comment 63 */
  /* comment 64 */ transform: translate(
      /* comment 65 */
      /* comment 66 */
      /* comment 67 */ 10px /* comment 68 */
      /* comment 69 */
      /* comment 70 */
    ) /* comment 71 */; /* comment 74 */
  /* comment 72 */
  /* comment 73 */
  /* comment 75 */
}

body {
  /* comment 76 */
}
body {
  /* comment 77 */
}
body {
  /* comment 78 */
}
body {
  /* comment 79 */
}
body {
  /* comment 80 */
}

.tab-bar {
  .tab {
  } /* comment 81 */
}

.selector {
  /* comment 82 */
  position: absolute;

  /* comment 83 */
  display: inline-block;

  /* comment 84 */
  background: #000;
}
```

# Lines exceeding max width of 80 characters
```
    7:   /* comment 11 */ color: red /* comment 12 */ !important /* comment 13 */; /* comment 14 */
   14:     , /* comment 19 */ /* comment 20 */ url("http://prettier.com/font.woff") /* comment 21 */; /* comment 22 */
   18:   /* comment 23 */ /* comment 24 */ /* comment 25 */ color: blue /* comment 26 */; /* comment 27 */
   24:   /* comment 34 */ /* comment 35 */ /* comment 36 */ color: blue /* comment 37 */; /* comment 38 */
```