---
source: crates/biome_formatter_test/src/snapshot_builder.rs
info: css/atrule/debug.css
---

# Input

```css
@debug 10em + 12em;
@debug 10em+12em;
@debug  10em  +  12em  ;
@debug 10em
    +
    12em
    ;
@debug
10em
+
12em
;
@debug

10em

+

12em

;
@debug $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var;

```


# Prettier differences

```diff
--- Prettier
+++ Biome
@@ -1,8 +1,36 @@
-@debug 10em + 12em;
-@debug 10em+12em;
-@debug 10em + 12em;
-@debug 10em + 12em;
-@debug 10em + 12em;
-@debug 10em + 12em;
-@debug $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var +
-  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var;
+@
+debug 10em + 12em
+;
+@
+debug 10em+12em
+;
+@
+debug  10em  +  12em 
+;
+@
+debug 10em
+    +
+    12em
+ 
+;
+@
+debug
+10em
++
+12em
+;
+@
+debug
+
+10em
+
++
+
+12em
+
+;
+@
+debug
+  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
+  + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var 
+;
```

# Output

```css
@
debug 10em + 12em
;
@
debug 10em+12em
;
@
debug  10em  +  12em 
;
@
debug 10em
    +
    12em
 
;
@
debug
10em
+
12em
;
@
debug

10em

+

12em

;
@
debug
  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
  + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var 
;
```

# Errors
```
debug.css:1:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Unexpected value or character.
  
  > 1 │ @debug 10em + 12em;
      │  ^^^^^
    2 │ @debug 10em+12em;
    3 │ @debug  10em  +  12em  ;
  
  i Expected one of:
  
  - charset
  - color-profile
  - container
  - counter-style
  - document
  - font-face
  - font-feature-values
  - font-palette-values
  - import
  - keyframes
  - layer
  - media
  - namespace
  - page
  - property
  - supports
  - viewport
  - scope
  
debug.css:1:8 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Expected a compound selector but instead found '10'.
  
  > 1 │ @debug 10em + 12em;
      │        ^^
    2 │ @debug 10em+12em;
    3 │ @debug  10em  +  12em  ;
  
  i Expected a compound selector here.
  
  > 1 │ @debug 10em + 12em;
      │        ^^
    2 │ @debug 10em+12em;
    3 │ @debug  10em  +  12em  ;
  
debug.css:1:10 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × expected `,` but instead found `em`
  
  > 1 │ @debug 10em + 12em;
      │          ^^
    2 │ @debug 10em+12em;
    3 │ @debug  10em  +  12em  ;
  
  i Remove em
  
debug.css:1:15 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Expected a compound selector but instead found '12'.
  
  > 1 │ @debug 10em + 12em;
      │               ^^
    2 │ @debug 10em+12em;
    3 │ @debug  10em  +  12em  ;
  
  i Expected a compound selector here.
  
  > 1 │ @debug 10em + 12em;
      │               ^^
    2 │ @debug 10em+12em;
    3 │ @debug  10em  +  12em  ;
  
debug.css:1:17 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × expected `,` but instead found `em`
  
  > 1 │ @debug 10em + 12em;
      │                 ^^
    2 │ @debug 10em+12em;
    3 │ @debug  10em  +  12em  ;
  
  i Remove em
  
debug.css:1:19 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × expected `,` but instead found `;`
  
  > 1 │ @debug 10em + 12em;
      │                   ^
    2 │ @debug 10em+12em;
    3 │ @debug  10em  +  12em  ;
  
  i Remove ;
  
debug.css:2:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Unexpected value or character.
  
    1 │ @debug 10em + 12em;
  > 2 │ @debug 10em+12em;
      │  ^^^^^
    3 │ @debug  10em  +  12em  ;
    4 │ @debug 10em
  
  i Expected one of:
  
  - charset
  - color-profile
  - container
  - counter-style
  - document
  - font-face
  - font-feature-values
  - font-palette-values
  - import
  - keyframes
  - layer
  - media
  - namespace
  - page
  - property
  - supports
  - viewport
  - scope
  
debug.css:2:8 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Expected a compound selector but instead found '10'.
  
    1 │ @debug 10em + 12em;
  > 2 │ @debug 10em+12em;
      │        ^^
    3 │ @debug  10em  +  12em  ;
    4 │ @debug 10em
  
  i Expected a compound selector here.
  
    1 │ @debug 10em + 12em;
  > 2 │ @debug 10em+12em;
      │        ^^
    3 │ @debug  10em  +  12em  ;
    4 │ @debug 10em
  
debug.css:2:10 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × expected `,` but instead found `em`
  
    1 │ @debug 10em + 12em;
  > 2 │ @debug 10em+12em;
      │          ^^
    3 │ @debug  10em  +  12em  ;
    4 │ @debug 10em
  
  i Remove em
  
debug.css:2:12 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × expected `,` but instead found `+12`
  
    1 │ @debug 10em + 12em;
  > 2 │ @debug 10em+12em;
      │            ^^^
    3 │ @debug  10em  +  12em  ;
    4 │ @debug 10em
  
  i Remove +12
  
debug.css:2:15 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × expected `,` but instead found `em`
  
    1 │ @debug 10em + 12em;
  > 2 │ @debug 10em+12em;
      │               ^^
    3 │ @debug  10em  +  12em  ;
    4 │ @debug 10em
  
  i Remove em
  
debug.css:2:17 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × expected `,` but instead found `;`
  
    1 │ @debug 10em + 12em;
  > 2 │ @debug 10em+12em;
      │                 ^
    3 │ @debug  10em  +  12em  ;
    4 │ @debug 10em
  
  i Remove ;
  
debug.css:3:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Unexpected value or character.
  
    1 │ @debug 10em + 12em;
    2 │ @debug 10em+12em;
  > 3 │ @debug  10em  +  12em  ;
      │  ^^^^^
    4 │ @debug 10em
    5 │     +
  
  i Expected one of:
  
  - charset
  - color-profile
  - container
  - counter-style
  - document
  - font-face
  - font-feature-values
  - font-palette-values
  - import
  - keyframes
  - layer
  - media
  - namespace
  - page
  - property
  - supports
  - viewport
  - scope
  
debug.css:3:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Expected a compound selector but instead found '10'.
  
    1 │ @debug 10em + 12em;
    2 │ @debug 10em+12em;
  > 3 │ @debug  10em  +  12em  ;
      │         ^^
    4 │ @debug 10em
    5 │     +
  
  i Expected a compound selector here.
  
    1 │ @debug 10em + 12em;
    2 │ @debug 10em+12em;
  > 3 │ @debug  10em  +  12em  ;
      │         ^^
    4 │ @debug 10em
    5 │     +
  
debug.css:3:11 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × expected `,` but instead found `em`
  
    1 │ @debug 10em + 12em;
    2 │ @debug 10em+12em;
  > 3 │ @debug  10em  +  12em  ;
      │           ^^
    4 │ @debug 10em
    5 │     +
  
  i Remove em
  
debug.css:3:18 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Expected a compound selector but instead found '12'.
  
    1 │ @debug 10em + 12em;
    2 │ @debug 10em+12em;
  > 3 │ @debug  10em  +  12em  ;
      │                  ^^
    4 │ @debug 10em
    5 │     +
  
  i Expected a compound selector here.
  
    1 │ @debug 10em + 12em;
    2 │ @debug 10em+12em;
  > 3 │ @debug  10em  +  12em  ;
      │                  ^^
    4 │ @debug 10em
    5 │     +
  
debug.css:3:20 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × expected `,` but instead found `em`
  
    1 │ @debug 10em + 12em;
    2 │ @debug 10em+12em;
  > 3 │ @debug  10em  +  12em  ;
      │                    ^^
    4 │ @debug 10em
    5 │     +
  
  i Remove em
  
debug.css:3:24 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Expected a compound selector but instead found ';'.
  
    1 │ @debug 10em + 12em;
    2 │ @debug 10em+12em;
  > 3 │ @debug  10em  +  12em  ;
      │                        ^
    4 │ @debug 10em
    5 │     +
  
  i Expected a compound selector here.
  
    1 │ @debug 10em + 12em;
    2 │ @debug 10em+12em;
  > 3 │ @debug  10em  +  12em  ;
      │                        ^
    4 │ @debug 10em
    5 │     +
  
debug.css:4:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Unexpected value or character.
  
    2 │ @debug 10em+12em;
    3 │ @debug  10em  +  12em  ;
  > 4 │ @debug 10em
      │  ^^^^^
    5 │     +
    6 │     12em
  
  i Expected one of:
  
  - charset
  - color-profile
  - container
  - counter-style
  - document
  - font-face
  - font-feature-values
  - font-palette-values
  - import
  - keyframes
  - layer
  - media
  - namespace
  - page
  - property
  - supports
  - viewport
  - scope
  
debug.css:4:8 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Expected a compound selector but instead found '10'.
  
    2 │ @debug 10em+12em;
    3 │ @debug  10em  +  12em  ;
  > 4 │ @debug 10em
      │        ^^
    5 │     +
    6 │     12em
  
  i Expected a compound selector here.
  
    2 │ @debug 10em+12em;
    3 │ @debug  10em  +  12em  ;
  > 4 │ @debug 10em
      │        ^^
    5 │     +
    6 │     12em
  
debug.css:4:10 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × expected `,` but instead found `em`
  
    2 │ @debug 10em+12em;
    3 │ @debug  10em  +  12em  ;
  > 4 │ @debug 10em
      │          ^^
    5 │     +
    6 │     12em
  
  i Remove em
  
debug.css:6:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Expected a compound selector but instead found '12'.
  
    4 │ @debug 10em
    5 │     +
  > 6 │     12em
      │     ^^
    7 │     ;
    8 │ @debug
  
  i Expected a compound selector here.
  
    4 │ @debug 10em
    5 │     +
  > 6 │     12em
      │     ^^
    7 │     ;
    8 │ @debug
  
debug.css:6:7 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × expected `,` but instead found `em`
  
    4 │ @debug 10em
    5 │     +
  > 6 │     12em
      │       ^^
    7 │     ;
    8 │ @debug
  
  i Remove em
  
debug.css:7:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Expected a compound selector but instead found ';'.
  
    5 │     +
    6 │     12em
  > 7 │     ;
      │     ^
    8 │ @debug
    9 │ 10em
  
  i Expected a compound selector here.
  
    5 │     +
    6 │     12em
  > 7 │     ;
      │     ^
    8 │ @debug
    9 │ 10em
  
debug.css:8:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Unexpected value or character.
  
     6 │     12em
     7 │     ;
   > 8 │ @debug
       │  ^^^^^
     9 │ 10em
    10 │ +
  
  i Expected one of:
  
  - charset
  - color-profile
  - container
  - counter-style
  - document
  - font-face
  - font-feature-values
  - font-palette-values
  - import
  - keyframes
  - layer
  - media
  - namespace
  - page
  - property
  - supports
  - viewport
  - scope
  
debug.css:9:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × expected `,` but instead found `10`
  
     7 │     ;
     8 │ @debug
   > 9 │ 10em
       │ ^^
    10 │ +
    11 │ 12em
  
  i Remove 10
  
debug.css:9:3 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × expected `,` but instead found `em`
  
     7 │     ;
     8 │ @debug
   > 9 │ 10em
       │   ^^
    10 │ +
    11 │ 12em
  
  i Remove em
  
debug.css:11:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Expected a compound selector but instead found '12'.
  
     9 │ 10em
    10 │ +
  > 11 │ 12em
       │ ^^
    12 │ ;
    13 │ @debug
  
  i Expected a compound selector here.
  
     9 │ 10em
    10 │ +
  > 11 │ 12em
       │ ^^
    12 │ ;
    13 │ @debug
  
debug.css:11:3 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × expected `,` but instead found `em`
  
     9 │ 10em
    10 │ +
  > 11 │ 12em
       │   ^^
    12 │ ;
    13 │ @debug
  
  i Remove em
  
debug.css:12:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × expected `,` but instead found `;`
  
    10 │ +
    11 │ 12em
  > 12 │ ;
       │ ^
    13 │ @debug
    14 │ 
  
  i Remove ;
  
debug.css:13:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Unexpected value or character.
  
    11 │ 12em
    12 │ ;
  > 13 │ @debug
       │  ^^^^^
    14 │ 
    15 │ 10em
  
  i Expected one of:
  
  - charset
  - color-profile
  - container
  - counter-style
  - document
  - font-face
  - font-feature-values
  - font-palette-values
  - import
  - keyframes
  - layer
  - media
  - namespace
  - page
  - property
  - supports
  - viewport
  - scope
  
debug.css:15:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × expected `,` but instead found `10`
  
    13 │ @debug
    14 │ 
  > 15 │ 10em
       │ ^^
    16 │ 
    17 │ +
  
  i Remove 10
  
debug.css:15:3 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × expected `,` but instead found `em`
  
    13 │ @debug
    14 │ 
  > 15 │ 10em
       │   ^^
    16 │ 
    17 │ +
  
  i Remove em
  
debug.css:19:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Expected a compound selector but instead found '12'.
  
    17 │ +
    18 │ 
  > 19 │ 12em
       │ ^^
    20 │ 
    21 │ ;
  
  i Expected a compound selector here.
  
    17 │ +
    18 │ 
  > 19 │ 12em
       │ ^^
    20 │ 
    21 │ ;
  
debug.css:19:3 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × expected `,` but instead found `em`
  
    17 │ +
    18 │ 
  > 19 │ 12em
       │   ^^
    20 │ 
    21 │ ;
  
  i Remove em
  
debug.css:21:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × expected `,` but instead found `;`
  
    19 │ 12em
    20 │ 
  > 21 │ ;
       │ ^
    22 │ @debug $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var;
    23 │ 
  
  i Remove ;
  
debug.css:22:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Unexpected value or character.
  
    21 │ ;
  > 22 │ @debug $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var;
       │  ^^^^^
    23 │ 
  
  i Expected one of:
  
  - charset
  - color-profile
  - container
  - counter-style
  - document
  - font-face
  - font-feature-values
  - font-palette-values
  - import
  - keyframes
  - layer
  - media
  - namespace
  - page
  - property
  - supports
  - viewport
  - scope
  
debug.css:22:179 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × expected `,` but instead found `;`
  
    21 │ ;
  > 22 │ @debug $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var;
       │                                                                                                                                                                                   ^
    23 │ 
  
  i Remove ;
  

```

# Lines exceeding max width of 80 characters
```
   34:   $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
   35:   + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var 
```