biome_css_formatter 0.5.7

Biome's CSS formatter
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280

---
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 */
```