---
source: crates/biome_formatter_test/src/snapshot_builder.rs
info: css/character-escaping/character_escaping.css
---

# Input

```css
#♥ {}
#© {}
#“‘’” {}
#☺☃ {}
#⌘⌥ {}
#𝄞♪♩♫♬ {}
#💩 {}
#\? {}
#\@ {}
#\. {}
#\3A \) {}
#\3A \`\( {}
#\31 23 {}
#\31 a2b3c {}
#\<p\> {}
#\<\>\<\<\<\>\>\<\> {}
#\+\+\+\+\+\+\+\+\+\+\[\>\+\+\+\+\+\+\+\>\+\+\+\+\+\+\+\+\+\+\>\+\+\+\>\+\<\<\<\<\-\]\>\+\+\.\>\+\.\+\+\+\+\+\+\+\.\.\+\+\+\.\>\+\+\.\<\<\+\+\+\+\+\+\+\+\+\+\+\+\+\+\+\.\>\.\+\+\+\.\-\-\-\-\-\-\.\-\-\-\-\-\-\-\-\.\>\+\.\>\. {}
#\# {}
#\#\# {}
#\#\.\#\.\# {}
#\#fake-id {} /* matches the element with id="#fake-id" */
#\_ {}
#\{\} {}
#\.fake\-class {}
#foo\.bar {}
#\3A hover {}
#\3A hover\3A focus\3A active {}
#\[attr\=value\] {}
#f\/o\/o {}
#f\\o\\o {}
#f\*o\*o {}
#f\!o\!o {}
#f\'o\'o {}
#f\~o\~o {}
#f\+o\+o {}
#-a-b-c- {}
#a\\b {}

@keyframes \@mymove {
    from {top: 0px;}
    to {top: 200px;}
}

.foo {
    animation-name: \@mymove;
    content: "\21D3";
}

/* Ignore escape "\" in CSS classes */
.bar\/baz {
    animation-name: \@mymove;
    content: "\21D3";
}

.grid {
  grid-template-rows:
    [row-1-00\:00] auto;
}

```


# Prettier differences

```diff
--- Prettier
+++ Biome
@@ -1,17 +1,10 @@
-#♥ {
-}
-#© {
-}
-#“‘’” {
-}
-#☺☃ {
-}
-#⌘⌥ {
-}
-#𝄞♪♩♫♬ {
-}
-#💩 {
-}
+#♥ {}
+#© {}
+#“‘’” {}
+#☺☃ {}
+#⌘⌥ {}
+#𝄞♪♩♫♬ {}
+#💩 {}
 #\? {
 }
 #\@ {
@@ -50,7 +43,7 @@
 }
 #\3A hover {
 }
-#\3A hover\3a focus\3a active {
+#\3A hover\3A focus\3A active {
 }
 #\[attr\=value\] {
 }
@@ -94,5 +87,6 @@
 }
 
 .grid {
-  grid-template-rows: [row-1-00\:00] auto;
+  grid-template-rows:
+    [row-1-00\:00] auto;
 }
```

# Output

```css
#♥ {}
#© {}
#“‘’” {}
#☺☃ {}
#⌘⌥ {}
#𝄞♪♩♫♬ {}
#💩 {}
#\? {
}
#\@ {
}
#\. {
}
#\3A \) {
}
#\3A \`\( {
}
#\31 23 {
}
#\31 a2b3c {
}
#\<p\> {
}
#\<\>\<\<\<\>\>\<\> {
}
#\+\+\+\+\+\+\+\+\+\+\[\>\+\+\+\+\+\+\+\>\+\+\+\+\+\+\+\+\+\+\>\+\+\+\>\+\<\<\<\<\-\]\>\+\+\.\>\+\.\+\+\+\+\+\+\+\.\.\+\+\+\.\>\+\+\.\<\<\+\+\+\+\+\+\+\+\+\+\+\+\+\+\+\.\>\.\+\+\+\.\-\-\-\-\-\-\.\-\-\-\-\-\-\-\-\.\>\+\.\>\. {
}
#\# {
}
#\#\# {
}
#\#\.\#\.\# {
}
#\#fake-id {
} /* matches the element with id="#fake-id" */
#\_ {
}
#\{\} {
}
#\.fake\-class {
}
#foo\.bar {
}
#\3A hover {
}
#\3A hover\3A focus\3A active {
}
#\[attr\=value\] {
}
#f\/o\/o {
}
#f\\o\\o {
}
#f\*o\*o {
}
#f\!o\!o {
}
#f\'o\'o {
}
#f\~o\~o {
}
#f\+o\+o {
}
#-a-b-c- {
}
#a\\b {
}

@keyframes \@mymove {
  from {
    top: 0px;
  }
  to {
    top: 200px;
  }
}

.foo {
  animation-name: \@mymove;
  content: "\21D3";
}

/* Ignore escape "\" in CSS classes */
.bar\/baz {
  animation-name: \@mymove;
  content: "\21D3";
}

.grid {
  grid-template-rows:
    [row-1-00\:00] auto;
}
```

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

  × unexpected character `♥`
  
  > 1 │ #♥ {}
      │  ^
    2 │ #© {}
    3 │ #“‘’” {}
  
character_escaping.css:2:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × unexpected character `©`
  
    1 │ #♥ {}
  > 2 │ #© {}
      │  ^
    3 │ #“‘’” {}
    4 │ #☺☃ {}
  
character_escaping.css:3:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × unexpected character `“`
  
    1 │ #♥ {}
    2 │ #© {}
  > 3 │ #“‘’” {}
      │  ^
    4 │ #☺☃ {}
    5 │ #⌘⌥ {}
  
character_escaping.css:3:3 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × unexpected character `‘`
  
    1 │ #♥ {}
    2 │ #© {}
  > 3 │ #“‘’” {}
      │   ^
    4 │ #☺☃ {}
    5 │ #⌘⌥ {}
  
character_escaping.css:3:4 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × unexpected character `’`
  
    1 │ #♥ {}
    2 │ #© {}
  > 3 │ #“‘’” {}
      │    ^
    4 │ #☺☃ {}
    5 │ #⌘⌥ {}
  
character_escaping.css:3:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × unexpected character `”`
  
    1 │ #♥ {}
    2 │ #© {}
  > 3 │ #“‘’” {}
      │     ^
    4 │ #☺☃ {}
    5 │ #⌘⌥ {}
  
character_escaping.css:4:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × unexpected character `☺`
  
    2 │ #© {}
    3 │ #“‘’” {}
  > 4 │ #☺☃ {}
      │  ^
    5 │ #⌘⌥ {}
    6 │ #𝄞♪♩♫♬ {}
  
character_escaping.css:4:3 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × unexpected character `☃`
  
    2 │ #© {}
    3 │ #“‘’” {}
  > 4 │ #☺☃ {}
      │   ^
    5 │ #⌘⌥ {}
    6 │ #𝄞♪♩♫♬ {}
  
character_escaping.css:5:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × unexpected character `⌘`
  
    3 │ #“‘’” {}
    4 │ #☺☃ {}
  > 5 │ #⌘⌥ {}
      │  ^
    6 │ #𝄞♪♩♫♬ {}
    7 │ #💩 {}
  
character_escaping.css:5:3 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × unexpected character `⌥`
  
    3 │ #“‘’” {}
    4 │ #☺☃ {}
  > 5 │ #⌘⌥ {}
      │   ^
    6 │ #𝄞♪♩♫♬ {}
    7 │ #💩 {}
  
character_escaping.css:6:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × unexpected character `𝄞`
  
    4 │ #☺☃ {}
    5 │ #⌘⌥ {}
  > 6 │ #𝄞♪♩♫♬ {}
      │  ^
    7 │ #💩 {}
    8 │ #\? {}
  
character_escaping.css:6:3 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × unexpected character `♪`
  
    4 │ #☺☃ {}
    5 │ #⌘⌥ {}
  > 6 │ #𝄞♪♩♫♬ {}
      │   ^
    7 │ #💩 {}
    8 │ #\? {}
  
character_escaping.css:6:4 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × unexpected character `♩`
  
    4 │ #☺☃ {}
    5 │ #⌘⌥ {}
  > 6 │ #𝄞♪♩♫♬ {}
      │    ^
    7 │ #💩 {}
    8 │ #\? {}
  
character_escaping.css:6:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × unexpected character `♫`
  
    4 │ #☺☃ {}
    5 │ #⌘⌥ {}
  > 6 │ #𝄞♪♩♫♬ {}
      │     ^
    7 │ #💩 {}
    8 │ #\? {}
  
character_escaping.css:6:6 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × unexpected character `♬`
  
    4 │ #☺☃ {}
    5 │ #⌘⌥ {}
  > 6 │ #𝄞♪♩♫♬ {}
      │      ^
    7 │ #💩 {}
    8 │ #\? {}
  
character_escaping.css:7:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × unexpected character `💩`
  
    5 │ #⌘⌥ {}
    6 │ #𝄞♪♩♫♬ {}
  > 7 │ #💩 {}
      │  ^^
    8 │ #\? {}
    9 │ #\@ {}
  
character_escaping.css:57:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Unexpected value or character.
  
    55 │ .grid {
    56 │   grid-template-rows:
  > 57 │     [row-1-00\:00] auto;
       │     ^^^^^^^^^^^^^^^^^^^
    58 │ }
    59 │ 
  
  i Expected one of:
  
  - identifier
  - string
  - number
  - dimension
  - ratio
  - custom property
  - function
  

```

# Lines exceeding max width of 80 characters
```
   26: #\+\+\+\+\+\+\+\+\+\+\[\>\+\+\+\+\+\+\+\>\+\+\+\+\+\+\+\+\+\+\>\+\+\+\>\+\<\<\<\<\-\]\>\+\+\.\>\+\.\+\+\+\+\+\+\+\.\.\+\+\+\.\>\+\+\.\<\<\+\+\+\+\+\+\+\+\+\+\+\+\+\+\+\.\>\.\+\+\+\.\-\-\-\-\-\-\.\-\-\-\-\-\-\-\-\.\>\+\.\>\. {
```