fix(css_parser): accept more emoji

biomejs · Oct 4, 2024 · 4d53371 · 4d53371
1 parent 5b6e55b
commit 4d53371
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 142 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -29,6 +29,24 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b
 
 ### Linter
 
+#### Bug Fixes
+
+- The CSS parser now accepts more emoji in identifiers ([#3627](https://github.com/biomejs/biome/issues/3627#issuecomment-2392388022)).
+
+  Browsers accept more emoji than the standard allows.
+  Biome now accepts these additional emoji.
+
+  The following code is now correctly parsed:
+
+  ```css
+  p {
+    --✨-color: red;
+    color: var(--✨-color);
+  }
+  ```
+
+  Contributed by @Conaclos
+
 ### Parser
 
 ## v1.9.3 (2024-10-01)

diff --git a/crates/biome_css_analyze/tests/specs/nursery/noIrregularWhitespace/invalid.css.snap b/crates/biome_css_analyze/tests/specs/nursery/noIrregularWhitespace/invalid.css.snap
@@ -394,14 +394,14 @@ invalid.css:85:11 lint/nursery/noIrregularWhitespace ━━━━━━━━━
 ```
 
 ```
-invalid.css:95:11 lint/nursery/noIrregularWhitespace ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.css:95:2 lint/nursery/noIrregularWhitespace ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! Irregular whitespace found.
   
     93 │ }
     94 │ /* \u{3000} */
   > 95 │ @container␠(width < 15rem) {
-       │           ^
+       │  ^^^^^^^^^^
     96 │ 	color: blue;
     97 │ }
   

diff --git a/...ome_css_formatter/tests/specs/prettier/css/character-escaping/character_escaping.css.snap b/...ome_css_formatter/tests/specs/prettier/css/character-escaping/character_escaping.css.snap
@@ -72,29 +72,24 @@ info: css/character-escaping/character_escaping.css
 ```diff
 --- Prettier
 +++ Biome
-@@ -1,15 +1,9 @@
--#♥ {
--}
+@@ -1,13 +1,10 @@
+ #♥ {
+ }
 -#© {
 -}
 -#“‘’” {
 -}
--#☺☃ {
--}
--#⌘⌥ {
--}
--#𝄞♪♩♫♬ {
--}
-+#♥ {}
 +#© {}
 +#“‘’” {}
-+#☺☃ {}
+ #☺☃ {
+ }
+-#⌘⌥ {
+-}
 +#⌘⌥ {}
-+#𝄞♪♩♫♬ {}
- #💩 {
+ #𝄞♪♩♫♬ {
  }
- #\? {
-@@ -50,7 +44,7 @@
+ #💩 {
+@@ -50,7 +47,7 @@
  }
  #\3A hover {
  }
@@ -108,12 +103,15 @@ info: css/character-escaping/character_escaping.css
 # Output
 
 ```css
-#♥ {}
+#♥ {
+}
 #© {}
 #“‘’” {}
-#☺☃ {}
+#☺☃ {
+}
 #⌘⌥ {}
-#𝄞♪♩♫♬ {}
+#𝄞♪♩♫♬ {
+}
 #💩 {
 }
 #\? {
@@ -204,15 +202,6 @@ info: css/character-escaping/character_escaping.css
 
 # Errors
 ```
-character_escaping.css:1:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × unexpected character `♥`
-  
-  > 1 │ #♥ {}
-      │  ^
-    2 │ #© {}
-    3 │ #“‘’” {}
-  
 character_escaping.css:2:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   × unexpected character `©`
@@ -267,39 +256,6 @@ character_escaping.css:3:5 parse ━━━━━━━━━━━━━━━
     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 `⌥`
@@ -311,54 +267,10 @@ character_escaping.css:5:3 parse ━━━━━━━━━━━━━━━
     6 │ #𝄞♪♩♫♬ {}
     7 │ #💩 {}
   
-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 │ #\? {}
-  
 
 ```
 
 # Lines exceeding max width of 80 characters
 ```
-   27: #\+\+\+\+\+\+\+\+\+\+\[\>\+\+\+\+\+\+\+\>\+\+\+\+\+\+\+\+\+\+\>\+\+\+\>\+\<\<\<\<\-\]\>\+\+\.\>\+\.\+\+\+\+\+\+\+\.\.\+\+\+\.\>\+\+\.\<\<\+\+\+\+\+\+\+\+\+\+\+\+\+\+\+\.\>\.\+\+\+\.\-\-\-\-\-\-\.\-\-\-\-\-\-\-\-\.\>\+\.\>\. {
+   30: #\+\+\+\+\+\+\+\+\+\+\[\>\+\+\+\+\+\+\+\>\+\+\+\+\+\+\+\+\+\+\>\+\+\+\>\+\<\<\<\<\-\]\>\+\+\.\>\+\.\+\+\+\+\+\+\+\.\.\+\+\+\.\>\+\+\.\<\<\+\+\+\+\+\+\+\+\+\+\+\+\+\+\+\.\>\.\+\+\+\.\-\-\-\-\-\-\.\-\-\-\-\-\-\-\-\.\>\+\.\>\. {
 ```
diff --git a/crates/biome_css_parser/tests/css_test_suite/ok/property/property-with-emoji.css b/crates/biome_css_parser/tests/css_test_suite/ok/property/property-with-emoji.css
@@ -1,4 +1,6 @@
 p {
   --🥔-color: red;
+  --☂-color: red;
+  --✨-color: red;
   color: var(--🥔-color);
 }