feat(css/parser): Improve error recovery (#6336)

crates/swc_css_modules/tests/fixture/url/url.compiled.css

@@ -72,6 +72,7 @@ b {
 }
 @keyframes __local__anim {
   background: green url('./img.png') xyz;
+
 }
 .__local__a {
   background-image: -webkit-image-set(url('./img1x.png') 1x, url('./img2x.png') 2x);

crates/swc_css_parser/src/parser/syntax/mod.rs

@@ -14,6 +14,8 @@ where
     I: ParserInput,
 {
     fn parse(&mut self) -> PResult<Stylesheet> {
+        // Create a new stylesheet, with its location set to location (or null, if
+        // location was not passed).
         let start = self.input.cur_span();
 
         // Consume a list of rules from input, with the top-level flag set, and set the
@@ -46,10 +48,9 @@ where
 
         // Repeatedly consume the next input token:
         loop {
-            // TODO: remove `}`
             // <EOF-token>
             // Return the list of rules.
-            if is_one_of!(self, EOF, "}") {
+            if is!(self, EOF) {
                 return Ok(rules);
             }
 
@@ -92,28 +93,21 @@ where
                             self.input.reset(&state);
 
                             let span = self.input.cur_span();
-                            let mut children = vec![];
+                            let mut list_of_component_values = ListOfComponentValues {
+                                span: Default::default(),
+                                children: vec![],
+                            };
 
-                            while !is_one_of!(self, EOF, "}") {
-                                if let Some(token_and_span) = self.input.bump() {
-                                    children.push(ComponentValue::PreservedToken(token_and_span));
-                                }
+                            while !is_one_of!(self, EOF) {
+                                let component_value = self.parse_as::<ComponentValue>()?;
 
-                                if is!(self, ";") {
-                                    if let Some(token_and_span) = self.input.bump() {
-                                        children
-                                            .push(ComponentValue::PreservedToken(token_and_span));
-                                    }
-
-                                    break;
-                                }
+                                list_of_component_values.children.push(component_value);
                             }
 
+                            list_of_component_values.span = span!(self, span.lo);
+
                             rules.push(Rule::ListOfComponentValues(Box::new(
-                                ListOfComponentValues {
-                                    span: span!(self, span.lo),
-                                    children,
-                                },
+                                list_of_component_values,
                             )));
                         }
                     };

crates/swc_css_parser/tests/recovery/at-rule/media/invalid-nesting/output.json

@@ -121,7 +121,7 @@
             "type": "ListOfComponentValues",
             "span": {
               "start": 33,
-              "end": 57,
+              "end": 58,
               "ctxt": 0
             },
             "children": [
@@ -186,6 +186,19 @@
                   "ctxt": 0
                 },
                 "token": "Semi"
+              },
+              {
+                "type": "PreservedToken",
+                "span": {
+                  "start": 57,
+                  "end": 58,
+                  "ctxt": 0
+                },
+                "token": {
+                  "WhiteSpace": {
+                    "value": "\n"
+                  }
+                }
               }
             ]
           }

crates/swc_css_parser/tests/recovery/at-rule/media/invalid-nesting/span.rust-debug

@@ -132,13 +132,15 @@
   x ComponentValue
    ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:2:5]
  2 | max-inline-size: 1024px;
-   : ^^^^^^^^^^^^^^^^^^^^^^^^
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^
+ 3 | }
    `----
 
   x Rule
    ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:2:5]
  2 | max-inline-size: 1024px;
-   : ^^^^^^^^^^^^^^^^^^^^^^^^
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^
+ 3 | }
    `----
 
   x ComponentValue
@@ -200,3 +202,18 @@
  2 | max-inline-size: 1024px;
    :                        ^
    `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:2:5]
+ 2 | max-inline-size: 1024px;
+   :                         ^
+ 3 | }
+   `----
+
+  x WhiteSpace { value: Atom('
+  | ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:2:5]
+ 2 | max-inline-size: 1024px;
+   :                         ^
+ 3 | }
+   `----

crates/swc_css_parser/tests/recovery/rules/at-rule-in-middle/input.css

@@ -0,0 +1,5 @@
+a { color: red }
+
+@media {};
+
+a { color: blue }