fix(css_parser): fix the CSS parser doesn't support nested selectors …

…with pseudo-classes #3287 (#3318)
biomejs · Jul 7, 2024 · 40727ca · 40727ca
1 parent 3c23f59
commit 40727ca
Show file tree

Hide file tree

Showing 11 changed files with 767 additions and 274 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -95,6 +95,10 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b
 
 ### Parser
 
+#### Bug fixes
+
+- Fix [#3287](https://github.com/biomejs/biome/issues/3287) nested selectors with pseudo-classes. Contributed by @denbezrukov
+
 ## v1.8.3 (2024-06-27)
 
 ### CLI

diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/comments/custom-properties.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/comments/custom-properties.css.snap
@@ -2,7 +2,6 @@
 source: crates/biome_formatter_test/src/snapshot_builder.rs
 info: css/comments/custom-properties.css
 ---
-
 # Input
 
 ```css
@@ -33,20 +32,16 @@ font-size: 12px;
  :root {
    /* comment 2 */
 -  --prop: {
--    /* comment 3 */
++  --prop : {
+     /* comment 3 */
 -    color/* comment 4 */: /* comment 5 */ #fff /* comment 6 */; /* comment 7 */
--    /* comment 8 */
--    font-size: 12px;
--    /* comment 9 */
++    /* comment 4 */ /* comment 5 */ color: #fff /* comment 6 */; /* comment 7 */
+     /* comment 8 */
+     font-size: 12px;
+     /* comment 9 */
 -  };
-+  --prop : {
-+  /* comment 3 */
-+color/* comment 4 */: /* comment 5 */#fff /* comment 6 */; /* comment 7 */
-+  /* comment 8 */
-+  font-size: 12px;
-+  /* comment 9 */
-+}
-+;
++  }
++  ;
    /* comment 10 */
  }
  /* comment 11 */
@@ -59,13 +54,13 @@ font-size: 12px;
 :root {
   /* comment 2 */
   --prop : {
-  /* comment 3 */
-color/* comment 4 */: /* comment 5 */#fff /* comment 6 */; /* comment 7 */
-  /* comment 8 */
-  font-size: 12px;
-  /* comment 9 */
-}
-;
+    /* comment 3 */
+    /* comment 4 */ /* comment 5 */ color: #fff /* comment 6 */; /* comment 7 */
+    /* comment 8 */
+    font-size: 12px;
+    /* comment 9 */
+  }
+  ;
   /* comment 10 */
 }
 /* comment 11 */
@@ -81,51 +76,76 @@ custom-properties.css:4:12 parse ━━━━━━━━━━━━━━━
     3 │   /* comment 2 */
   > 4 │   --prop : {
       │            ^
-  > 5 │   /* comment 3 */
-  > 6 │ color/* comment 4 */: /* comment 5 */#fff/* comment 6 */;/* comment 7 */
-      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-    7 │   /* comment 8 */
-    8 │ font-size: 12px;
+    5 │   /* comment 3 */
+    6 │ color/* comment 4 */: /* comment 5 */#fff/* comment 6 */;/* comment 7 */
   
   i Expected one of:
   
-  - identifier
-  - string
-  - number
-  - dimension
-  - ratio
-  - custom property
-  - function
+  - hover
+  - focus
+  - active
+  - first-child
+  - last-child
+  - nth-child
+  - nth-last-child
+  - first-of-type
+  - last-of-type
+  - nth-of-type
+  - nth-last-of-type
+  - only-child
+  - only-of-type
+  - checked
+  - disabled
+  - enabled
+  - required
+  - optional
+  - valid
+  - invalid
+  - in-range
+  - out-of-range
+  - read-only
+  - read-write
+  - placeholder-shown
+  - default
+  - checked
+  - indeterminate
+  - blank
+  - empty
+  - root
+  - target
+  - lang
+  - not
+  - is
+  - where
+  - fullscreen
+  - link
+  - visited
+  - any-link
+  - local-link
+  - scope
+  - current
+  - past
+  - future
   
 custom-properties.css:10:4 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-  × Expected a qualified rule, or an at rule but instead found ';
-      /* comment 10 */
-    }'.
+  × Expected a declaration, or an at rule but instead found ';'.
   
      8 │ font-size: 12px;
      9 │   /* comment 9 */
   > 10 │   };
        │    ^
-  > 11 │   /* comment 10 */
-  > 12 │ }
-       │ ^
-    13 │      /* comment 11 */
-    14 │ 
+    11 │   /* comment 10 */
+    12 │ }
   
-  i Expected a qualified rule, or an at rule here.
+  i Expected a declaration, or an at rule here.
   
      8 │ font-size: 12px;
      9 │   /* comment 9 */
   > 10 │   };
        │    ^
-  > 11 │   /* comment 10 */
-  > 12 │ }
-       │ ^
-    13 │      /* comment 11 */
-    14 │ 
+    11 │   /* comment 10 */
+    12 │ }
   
 
 ```
-
-
diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/comments/selectors.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/comments/selectors.css.snap
@@ -476,16 +476,13 @@ input:not(/* comment 125 */[/* comment 126 */disabled/* comment 127 */]/* commen
  :root {
 -  /* comments 192 */
 -  --centered/* comments 193 */ : /* comments 194 */ {
--    display: flex;
--    align-items: center;
--    justify-content: center;
--  };
 +  /* comments 192 */ --centered /* comments 193 */ : /* comments 194 */ {
-+        display: flex;
-+  align-items: center;
-+  justify-content: center;
-+}
-+;
+     display: flex;
+     align-items: center;
+     justify-content: center;
+-  };
++  }
++  ;
  }
 ```
 
@@ -708,11 +705,11 @@ input:not(
 /* custom properties set & @apply rule */
 :root {
   /* comments 192 */ --centered /* comments 193 */ : /* comments 194 */ {
-        display: flex;
-  align-items: center;
-  justify-content: center;
-}
-;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  ;
 }
 ```
 
@@ -806,42 +803,75 @@ selectors.css:152:75 parse ━━━━━━━━━━━━━━━━━
     151 │ :root {
   > 152 │     /* comments 192 */ --centered /* comments 193 */ : /* comments 194 */ {
         │                                                                           ^
-  > 153 │         display: flex;
-        │         ^^^^^^^^^^^^^
+    153 │         display: flex;
     154 │         align-items: center;
-    155 │         justify-content: center;
   
   i Expected one of:
   
-  - identifier
-  - string
-  - number
-  - dimension
-  - ratio
-  - custom property
-  - function
+  - hover
+  - focus
+  - active
+  - first-child
+  - last-child
+  - nth-child
+  - nth-last-child
+  - first-of-type
+  - last-of-type
+  - nth-of-type
+  - nth-last-of-type
+  - only-child
+  - only-of-type
+  - checked
+  - disabled
+  - enabled
+  - required
+  - optional
+  - valid
+  - invalid
+  - in-range
+  - out-of-range
+  - read-only
+  - read-write
+  - placeholder-shown
+  - default
+  - checked
+  - indeterminate
+  - blank
+  - empty
+  - root
+  - target
+  - lang
+  - not
+  - is
+  - where
+  - fullscreen
+  - link
+  - visited
+  - any-link
+  - local-link
+  - scope
+  - current
+  - past
+  - future
   
 selectors.css:156:6 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-  × Expected a qualified rule, or an at rule but instead found ';
-    }'.
+  × Expected a declaration, or an at rule but instead found ';'.
   
     154 │         align-items: center;
     155 │         justify-content: center;
   > 156 │     };
         │      ^
-  > 157 │ }
-        │ ^
+    157 │ }
     158 │ 
   
-  i Expected a qualified rule, or an at rule here.
+  i Expected a declaration, or an at rule here.
   
     154 │         align-items: center;
     155 │         justify-content: center;
   > 156 │     };
         │      ^
-  > 157 │ }
-        │ ^
+    157 │ }
     158 │