test(css/parser): Improve tests (#4963)

crates/swc_css_parser/tests/fixture.rs

@@ -7,20 +7,58 @@ use swc_css_ast::*;
 use swc_css_parser::{
     lexer::Lexer,
     parse_tokens,
-    parser::{input::ParserInput, Parser, ParserConfig},
+    parser::{input::ParserInput, PResult, Parser, ParserConfig},
 };
 use swc_css_visit::{Visit, VisitWith};
 use testing::NormalizedOutput;
 
-pub struct Invalid {
-    pub span: Span,
-}
+fn stylesheet_test(input: PathBuf, config: ParserConfig) {
+    let ref_json_path = input.parent().unwrap().join("output.json");
 
-#[testing::fixture("tests/fixture/**/input.css")]
-fn tokens_input(input: PathBuf) {
     testing::run_test2(false, |cm, handler| {
         let fm = cm.load_file(&input).unwrap();
+        let lexer = Lexer::new(SourceFileInput::from(&*fm), config);
+        let mut parser = Parser::new(lexer, config);
+        let stylesheet = parser.parse_all();
+        let errors = parser.take_errors();
 
+        for err in &errors {
+            err.to_diagnostics(&handler).emit();
+        }
+
+        if !errors.is_empty() {
+            return Err(());
+        }
+
+        match stylesheet {
+            Ok(stylesheet) => {
+                let actual_json = serde_json::to_string_pretty(&stylesheet)
+                    .map(NormalizedOutput::from)
+                    .expect("failed to serialize stylesheet");
+
+                actual_json.clone().compare_to_file(&ref_json_path).unwrap();
+
+                Ok(())
+            }
+            Err(err) => {
+                let mut d = err.to_diagnostics(&handler);
+
+                d.note(&format!("current token = {}", parser.dump_cur()));
+                d.emit();
+
+                Err(())
+            }
+        }
+    })
+    .unwrap();
+}
+
+fn stylesheet_test_tokens(input: PathBuf, config: ParserConfig) {
+    let ref_json_path = input.parent().unwrap().join("output.json");
+
+    testing::run_test2(false, |cm, handler| {
+        let fm = cm.load_file(&input).unwrap();
+        let mut errors = vec![];
         let tokens = {
             let mut lexer = Lexer::new(SourceFileInput::from(&*fm), Default::default());
             let mut tokens = vec![];
@@ -29,45 +67,24 @@ fn tokens_input(input: PathBuf) {
                 tokens.push(token_and_span);
             }
 
+            errors.extend(lexer.take_errors());
+
             Tokens {
                 span: Span::new(fm.start_pos, fm.end_pos, Default::default()),
                 tokens,
             }
         };
 
-        let mut errors = vec![];
-        let _ss: Stylesheet = parse_tokens(
-            &tokens,
-            ParserConfig {
-                ..Default::default()
-            },
-            &mut errors,
-        )
-        .expect("failed to parse tokens");
+        let stylesheet: PResult<Stylesheet> = parse_tokens(&tokens, config, &mut errors);
 
-        for err in errors {
+        for err in &errors {
             err.to_diagnostics(&handler).emit();
         }
 
-        if handler.has_errors() {
+        if !errors.is_empty() {
             return Err(());
         }
 
-        Ok(())
-    })
-    .unwrap();
-}
-
-fn test_pass(input: PathBuf, config: ParserConfig) {
-    testing::run_test2(false, |cm, handler| {
-        let ref_json_path = input.parent().unwrap().join("output.json");
-
-        let fm = cm.load_file(&input).unwrap();
-        let lexer = Lexer::new(SourceFileInput::from(&*fm), config);
-        let mut parser = Parser::new(lexer, config);
-
-        let stylesheet = parser.parse_all();
-
         match stylesheet {
             Ok(stylesheet) => {
                 let actual_json = serde_json::to_string_pretty(&stylesheet)
@@ -76,46 +93,10 @@ fn test_pass(input: PathBuf, config: ParserConfig) {
 
                 actual_json.clone().compare_to_file(&ref_json_path).unwrap();
 
-                if !config.allow_wrong_line_comments {
-                    let mut errors = vec![];
-
-                    let mut lexer = Lexer::new(SourceFileInput::from(&*fm), Default::default());
-                    let mut tokens = Tokens {
-                        span: Span::new(fm.start_pos, fm.end_pos, Default::default()),
-                        tokens: vec![],
-                    };
-
-                    for token_and_span in lexer.by_ref() {
-                        tokens.tokens.push(token_and_span);
-                    }
-
-                    errors.extend(lexer.take_errors());
-
-                    let ss_tok: Stylesheet = parse_tokens(
-                        &tokens,
-                        ParserConfig {
-                            ..Default::default()
-                        },
-                        &mut errors,
-                    )
-                    .expect("failed to parse token");
-
-                    for err in errors {
-                        err.to_diagnostics(&handler).emit();
-                    }
-
-                    let json_from_tokens = serde_json::to_string_pretty(&ss_tok)
-                        .map(NormalizedOutput::from)
-                        .expect("failed to serialize stylesheet from tokens");
-
-                    assert_eq!(actual_json, json_from_tokens);
-                }
-
                 Ok(())
             }
             Err(err) => {
                 let mut d = err.to_diagnostics(&handler);
-                d.note(&format!("current token = {}", parser.dump_cur()));
 
                 d.emit();
 
@@ -126,32 +107,11 @@ fn test_pass(input: PathBuf, config: ParserConfig) {
     .unwrap();
 }
 
-#[testing::fixture("tests/fixture/**/input.css")]
-fn pass(input: PathBuf) {
-    test_pass(
-        input,
-        ParserConfig {
-            ..Default::default()
-        },
-    )
-}
-
-#[testing::fixture("tests/line-comment/**/input.css")]
-fn line_comments(input: PathBuf) {
-    test_pass(
-        input,
-        ParserConfig {
-            allow_wrong_line_comments: true,
-            ..Default::default()
-        },
-    )
-}
-
-#[testing::fixture("tests/recovery/**/input.css")]
-fn recovery(input: PathBuf) {
+fn stylesheet_recovery_test(input: PathBuf, config: ParserConfig) {
     let stderr_path = input.parent().unwrap().join("output.swc-stderr");
+    let ref_json_path = input.parent().unwrap().join("output.json");
 
-    let mut errored = false;
+    let mut recovered = false;
 
     let stderr = testing::run_test2(false, |cm, handler| {
         if false {
@@ -159,16 +119,19 @@ fn recovery(input: PathBuf) {
             return Ok(());
         }
 
-        let ref_json_path = input.parent().unwrap().join("output.json");
-
-        let config = ParserConfig {
-            allow_wrong_line_comments: false,
-        };
         let fm = cm.load_file(&input).unwrap();
         let lexer = Lexer::new(SourceFileInput::from(&*fm), config);
         let mut parser = Parser::new(lexer, config);
-
         let stylesheet = parser.parse_all();
+        let errors = parser.take_errors();
+
+        for err in &errors {
+            err.to_diagnostics(&handler).emit();
+        }
+
+        if !errors.is_empty() {
+            recovered = true;
+        }
 
         match stylesheet {
             Ok(stylesheet) => {
@@ -178,59 +141,98 @@ fn recovery(input: PathBuf) {
 
                 actual_json.clone().compare_to_file(&ref_json_path).unwrap();
 
-                {
-                    let mut errors = vec![];
-
-                    let mut lexer = Lexer::new(SourceFileInput::from(&*fm), Default::default());
-                    let mut tokens = Tokens {
-                        span: Span::new(fm.start_pos, fm.end_pos, Default::default()),
-                        tokens: vec![],
-                    };
-
-                    for token_and_span in lexer.by_ref() {
-                        tokens.tokens.push(token_and_span);
-                    }
-
-                    errors.extend(lexer.take_errors());
-
-                    let ss_tok: Stylesheet = parse_tokens(
-                        &tokens,
-                        ParserConfig {
-                            ..Default::default()
-                        },
-                        &mut errors,
-                    )
-                    .expect("failed to parse token");
-
-                    for err in errors {
-                        err.to_diagnostics(&handler).emit();
-                    }
-
-                    let json_from_tokens = serde_json::to_string_pretty(&ss_tok)
-                        .map(NormalizedOutput::from)
-                        .expect("failed to serialize stylesheet from tokens");
-
-                    assert_eq!(actual_json, json_from_tokens);
-                }
-
                 Err(())
             }
             Err(err) => {
                 let mut d = err.to_diagnostics(&handler);
+
                 d.note(&format!("current token = {}", parser.dump_cur()));
-
                 d.emit();
 
-                errored = true;
-
                 Err(())
             }
         }
     })
     .unwrap_err();
 
-    if errored {
-        panic!("Parser should recover, but failed with {}", stderr);
+    if !recovered {
+        panic!(
+            "Parser should emit errors (recover mode), but parser parsed everything successfully \
+             {}",
+            stderr
+        );
+    }
+
+    stderr.compare_to_file(&stderr_path).unwrap();
+}
+
+fn stylesheet_recovery_test_tokens(input: PathBuf, config: ParserConfig) {
+    let stderr_path = input.parent().unwrap().join("output.swc-stderr");
+    let ref_json_path = input.parent().unwrap().join("output.json");
+
+    let mut recovered = false;
+
+    let stderr = testing::run_test2(false, |cm, handler| {
+        if false {
+            // For type inference
+            return Ok(());
+        }
+
+        let fm = cm.load_file(&input).unwrap();
+        let mut errors = vec![];
+        let tokens = {
+            let mut lexer = Lexer::new(SourceFileInput::from(&*fm), Default::default());
+            let mut tokens = vec![];
+
+            for token_and_span in lexer.by_ref() {
+                tokens.push(token_and_span);
+            }
+
+            errors.extend(lexer.take_errors());
+
+            Tokens {
+                span: Span::new(fm.start_pos, fm.end_pos, Default::default()),
+                tokens,
+            }
+        };
+
+        let stylesheet: PResult<Stylesheet> = parse_tokens(&tokens, config, &mut errors);
+
+        for err in &errors {
+            err.to_diagnostics(&handler).emit();
+        }
+
+        if !errors.is_empty() {
+            recovered = true;
+        }
+
+        match stylesheet {
+            Ok(stylesheet) => {
+                let actual_json = serde_json::to_string_pretty(&stylesheet)
+                    .map(NormalizedOutput::from)
+                    .expect("failed to serialize stylesheet");
+
+                actual_json.clone().compare_to_file(&ref_json_path).unwrap();
+
+                Err(())
+            }
+            Err(err) => {
+                let mut d = err.to_diagnostics(&handler);
+
+                d.emit();
+
+                Err(())
+            }
+        }
+    })
+    .unwrap_err();
+
+    if !recovered {
+        panic!(
+            "Parser should emit errors (recover mode), but parser parsed everything successfully \
+             {}",
+            stderr
+        );
     }
 
     stderr.compare_to_file(&stderr_path).unwrap();
@@ -478,8 +480,7 @@ impl Visit for SpanVisualizer<'_> {
     }
 }
 
-#[testing::fixture("tests/fixture/**/input.css")]
-fn span(input: PathBuf) {
+fn stylesheet_span_visualizer(input: PathBuf) {
     let dir = input.parent().unwrap().to_path_buf();
 
     let output = testing::run_test2(false, |cm, handler| {
@@ -520,3 +521,48 @@ fn span(input: PathBuf) {
         .compare_to_file(&dir.join("span.rust-debug"))
         .unwrap();
 }
+
+#[testing::fixture("tests/fixture/**/input.css")]
+fn pass(input: PathBuf) {
+    stylesheet_test(input.clone(), Default::default());
+    stylesheet_test_tokens(input, Default::default());
+}
+
+#[testing::fixture("tests/line-comment/**/input.css")]
+fn line_comments_pass(input: PathBuf) {
+    stylesheet_test(
+        input,
+        ParserConfig {
+            allow_wrong_line_comments: true,
+            ..Default::default()
+        },
+    )
+}
+
+// TODO fix exclude
+#[testing::fixture(
+    "tests/recovery/**/input.css",
+    exclude(
+        "at-rule/media/condition/input.css",
+        "at-rule/media/condition-1/input.css",
+        "at-rule/page/invalid-nesting/input.css",
+        "at-rule/page/without-page/input.css",
+        "at-rule/unknown/input.css",
+        "function/calc/division/input.css",
+        "function/calc/space/input.css",
+        "function/var/input.css",
+        "qualified-rule/only-block/input.css",
+        "whitespaces/input.css",
+    )
+)]
+fn recovery(input: PathBuf) {
+    stylesheet_recovery_test(input.clone(), Default::default());
+    stylesheet_recovery_test_tokens(input, Default::default());
+}
+
+#[testing::fixture("tests/fixture/**/input.css")]
+#[testing::fixture("tests/line-comment/**/input.css")]
+#[testing::fixture("tests/recovery/**/input.css")]
+fn span_visualizer(input: PathBuf) {
+    stylesheet_span_visualizer(input)
+}

crates/swc_css_parser/tests/line-comment/css-in-js/1/span.rust-debug

@@ -0,0 +1,135 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/line-comment/css-in-js/1/input.css:1:1]
+ 1 | ,-> // Line comment
+ 2 | |   foo {
+ 3 | |       color: red;
+ 4 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/line-comment/css-in-js/1/input.css:1:1]
+ 1 | ,-> // Line comment
+ 2 | |   foo {
+ 3 | |       color: red;
+ 4 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/line-comment/css-in-js/1/input.css:1:1]
+ 1 | ,-> // Line comment
+ 2 | |   foo {
+ 3 | |       color: red;
+ 4 | `-> }
+   `----
+
+  x Tokens
+   ,-[$DIR/tests/line-comment/css-in-js/1/input.css:1:1]
+ 1 | ,-> // Line comment
+ 2 | `-> foo {
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/1/input.css:1:1]
+ 1 | // Line comment
+   : ^
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/1/input.css:1:1]
+ 1 | // Line comment
+   :  ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/1/input.css:1:1]
+ 1 | // Line comment
+   :   ^
+   `----
+
+  x Ident { value: Atom('Line' type=inline), raw: Atom('Line' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/1/input.css:1:1]
+ 1 | // Line comment
+   :    ^^^^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/1/input.css:1:1]
+ 1 | // Line comment
+   :        ^
+   `----
+
+  x Ident { value: Atom('comment' type=inline), raw: Atom('comment' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/1/input.css:1:1]
+ 1 | // Line comment
+   :         ^^^^^^^
+   `----
+
+  x WhiteSpace { value: Atom('
+  | ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/1/input.css:1:1]
+ 1 | // Line comment
+   :                ^
+ 2 | foo {
+   `----
+
+  x Ident { value: Atom('foo' type=inline), raw: Atom('foo' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/1/input.css:2:1]
+ 2 | foo {
+   : ^^^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/1/input.css:2:1]
+ 2 | foo {
+   :    ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/line-comment/css-in-js/1/input.css:2:1]
+ 2 | ,-> foo {
+ 3 | |       color: red;
+ 4 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/line-comment/css-in-js/1/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/line-comment/css-in-js/1/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/line-comment/css-in-js/1/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/line-comment/css-in-js/1/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/line-comment/css-in-js/1/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/line-comment/css-in-js/1/input.css:3:5]
+ 3 | color: red;
+   :        ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/line-comment/css-in-js/1/input.css:3:5]
+ 3 | color: red;
+   :        ^^^
+   `----

crates/swc_css_parser/tests/line-comment/css-in-js/10/span.rust-debug

@@ -0,0 +1,84 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/line-comment/css-in-js/10/input.css:1:1]
+ 1 | // Only comment // test
+   : ^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/line-comment/css-in-js/10/input.css:1:1]
+ 1 | // Only comment // test
+   : ^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Tokens
+   ,-[$DIR/tests/line-comment/css-in-js/10/input.css:1:1]
+ 1 | // Only comment // test
+   : ^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/10/input.css:1:1]
+ 1 | // Only comment // test
+   : ^
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/10/input.css:1:1]
+ 1 | // Only comment // test
+   :  ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/10/input.css:1:1]
+ 1 | // Only comment // test
+   :   ^
+   `----
+
+  x Ident { value: Atom('Only' type=inline), raw: Atom('Only' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/10/input.css:1:1]
+ 1 | // Only comment // test
+   :    ^^^^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/10/input.css:1:1]
+ 1 | // Only comment // test
+   :        ^
+   `----
+
+  x Ident { value: Atom('comment' type=inline), raw: Atom('comment' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/10/input.css:1:1]
+ 1 | // Only comment // test
+   :         ^^^^^^^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/10/input.css:1:1]
+ 1 | // Only comment // test
+   :                ^
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/10/input.css:1:1]
+ 1 | // Only comment // test
+   :                 ^
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/10/input.css:1:1]
+ 1 | // Only comment // test
+   :                  ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/10/input.css:1:1]
+ 1 | // Only comment // test
+   :                   ^
+   `----
+
+  x Ident { value: Atom('test' type=inline), raw: Atom('test' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/10/input.css:1:1]
+ 1 | // Only comment // test
+   :                    ^^^^
+   `----

crates/swc_css_parser/tests/line-comment/css-in-js/2/span.rust-debug

@@ -0,0 +1,165 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:1:1]
+ 1 | ,-> foo {
+ 2 | |       // Line comment
+ 3 | |       color: red;
+ 4 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:1:1]
+ 1 | ,-> foo {
+ 2 | |       // Line comment
+ 3 | |       color: red;
+ 4 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:1:1]
+ 1 | ,-> foo {
+ 2 | |       // Line comment
+ 3 | |       color: red;
+ 4 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:1:1]
+ 1 | ,-> foo {
+ 2 | |       // Line comment
+ 3 | |       color: red;
+ 4 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:2:5]
+ 2 | ,-> // Line comment
+ 3 | `->     color: red;
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:2:5]
+ 2 | ,-> // Line comment
+ 3 | `->     color: red;
+   `----
+
+  x Tokens
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:2:5]
+ 2 | ,-> // Line comment
+ 3 | `->     color: red;
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:2:5]
+ 2 | // Line comment
+   : ^
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:2:5]
+ 2 | // Line comment
+   :  ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:2:5]
+ 2 | // Line comment
+   :   ^
+   `----
+
+  x Ident { value: Atom('Line' type=inline), raw: Atom('Line' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:2:5]
+ 2 | // Line comment
+   :    ^^^^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:2:5]
+ 2 | // Line comment
+   :        ^
+   `----
+
+  x Ident { value: Atom('comment' type=inline), raw: Atom('comment' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:2:5]
+ 2 | // Line comment
+   :         ^^^^^^^
+   `----
+
+  x WhiteSpace { value: Atom('
+  |     ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:2:5]
+ 2 | ,-> // Line comment
+ 3 | `->     color: red;
+   `----
+
+  x Ident { value: Atom('color' type=inline), raw: Atom('color' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^
+   `----
+
+  x Colon
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:3:5]
+ 3 | color: red;
+   :      ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:3:5]
+ 3 | color: red;
+   :       ^
+   `----
+
+  x Ident { value: Atom('red' type=inline), raw: Atom('red' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:3:5]
+ 3 | color: red;
+   :        ^^^
+   `----
+
+  x Semi
+   ,-[$DIR/tests/line-comment/css-in-js/2/input.css:3:5]
+ 3 | color: red;
+   :           ^
+   `----

crates/swc_css_parser/tests/line-comment/css-in-js/3/span.rust-debug

@@ -0,0 +1,181 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:1:1]
+ 1 | ,-> foo {
+ 2 | |       color: red;
+ 3 | |       // Line comment
+ 4 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:1:1]
+ 1 | ,-> foo {
+ 2 | |       color: red;
+ 3 | |       // Line comment
+ 4 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:1:1]
+ 1 | ,-> foo {
+ 2 | |       color: red;
+ 3 | |       // Line comment
+ 4 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:1:1]
+ 1 | ,-> foo {
+ 2 | |       color: red;
+ 3 | |       // Line comment
+ 4 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:2:5]
+ 2 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:2:5]
+ 2 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:2:5]
+ 2 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:2:5]
+ 2 | color: red;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:2:5]
+ 2 | color: red;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:2:5]
+ 2 | color: red;
+   :        ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:2:5]
+ 2 | color: red;
+   :        ^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:3:5]
+ 3 | // Line comment
+   : ^^^^^^^^^^^^^^^^
+ 4 | }
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:3:5]
+ 3 | // Line comment
+   : ^^^^^^^^^^^^^^^^
+ 4 | }
+   `----
+
+  x Tokens
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:3:5]
+ 3 | // Line comment
+   : ^^^^^^^^^^^^^^^^
+ 4 | }
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:3:5]
+ 3 | // Line comment
+   : ^
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:3:5]
+ 3 | // Line comment
+   :  ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:3:5]
+ 3 | // Line comment
+   :   ^
+   `----
+
+  x Ident { value: Atom('Line' type=inline), raw: Atom('Line' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:3:5]
+ 3 | // Line comment
+   :    ^^^^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:3:5]
+ 3 | // Line comment
+   :        ^
+   `----
+
+  x Ident { value: Atom('comment' type=inline), raw: Atom('comment' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:3:5]
+ 3 | // Line comment
+   :         ^^^^^^^
+   `----
+
+  x WhiteSpace { value: Atom('
+  | ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/3/input.css:3:5]
+ 3 | // Line comment
+   :                ^
+ 4 | }
+   `----

crates/swc_css_parser/tests/line-comment/css-in-js/4/span.rust-debug

@@ -0,0 +1,211 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:1:1]
+ 1 | ,-> foo {
+ 2 | |       color: red;
+ 3 | |       // Line comment
+ 4 | |       top: 0;
+ 5 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:1:1]
+ 1 | ,-> foo {
+ 2 | |       color: red;
+ 3 | |       // Line comment
+ 4 | |       top: 0;
+ 5 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:1:1]
+ 1 | ,-> foo {
+ 2 | |       color: red;
+ 3 | |       // Line comment
+ 4 | |       top: 0;
+ 5 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:1:1]
+ 1 | ,-> foo {
+ 2 | |       color: red;
+ 3 | |       // Line comment
+ 4 | |       top: 0;
+ 5 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:2:5]
+ 2 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:2:5]
+ 2 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:2:5]
+ 2 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:2:5]
+ 2 | color: red;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:2:5]
+ 2 | color: red;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:2:5]
+ 2 | color: red;
+   :        ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:2:5]
+ 2 | color: red;
+   :        ^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:3:5]
+ 3 | ,-> // Line comment
+ 4 | `->     top: 0;
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:3:5]
+ 3 | ,-> // Line comment
+ 4 | `->     top: 0;
+   `----
+
+  x Tokens
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:3:5]
+ 3 | ,-> // Line comment
+ 4 | `->     top: 0;
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:3:5]
+ 3 | // Line comment
+   : ^
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:3:5]
+ 3 | // Line comment
+   :  ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:3:5]
+ 3 | // Line comment
+   :   ^
+   `----
+
+  x Ident { value: Atom('Line' type=inline), raw: Atom('Line' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:3:5]
+ 3 | // Line comment
+   :    ^^^^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:3:5]
+ 3 | // Line comment
+   :        ^
+   `----
+
+  x Ident { value: Atom('comment' type=inline), raw: Atom('comment' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:3:5]
+ 3 | // Line comment
+   :         ^^^^^^^
+   `----
+
+  x WhiteSpace { value: Atom('
+  |     ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:3:5]
+ 3 | ,-> // Line comment
+ 4 | `->     top: 0;
+   `----
+
+  x Ident { value: Atom('top' type=inline), raw: Atom('top' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:4:5]
+ 4 | top: 0;
+   : ^^^
+   `----
+
+  x Colon
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:4:5]
+ 4 | top: 0;
+   :    ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:4:5]
+ 4 | top: 0;
+   :     ^
+   `----
+
+  x Number { value: 0.0, raw: Atom('0' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:4:5]
+ 4 | top: 0;
+   :      ^
+   `----
+
+  x Semi
+   ,-[$DIR/tests/line-comment/css-in-js/4/input.css:4:5]
+ 4 | top: 0;
+   :       ^
+   `----

crates/swc_css_parser/tests/line-comment/css-in-js/5/span.rust-debug

@@ -0,0 +1,183 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:1:1]
+ 1 | ,-> // Line comment
+ 2 | |   // Line comment
+ 3 | |   foo {
+ 4 | |       color: red;
+ 5 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:1:1]
+ 1 | ,-> // Line comment
+ 2 | |   // Line comment
+ 3 | |   foo {
+ 4 | |       color: red;
+ 5 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:1:1]
+ 1 | ,-> // Line comment
+ 2 | |   // Line comment
+ 3 | |   foo {
+ 4 | |       color: red;
+ 5 | `-> }
+   `----
+
+  x Tokens
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:1:1]
+ 1 | ,-> // Line comment
+ 2 | |   // Line comment
+ 3 | `-> foo {
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:1:1]
+ 1 | // Line comment
+   : ^
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:1:1]
+ 1 | // Line comment
+   :  ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:1:1]
+ 1 | // Line comment
+   :   ^
+   `----
+
+  x Ident { value: Atom('Line' type=inline), raw: Atom('Line' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:1:1]
+ 1 | // Line comment
+   :    ^^^^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:1:1]
+ 1 | // Line comment
+   :        ^
+   `----
+
+  x Ident { value: Atom('comment' type=inline), raw: Atom('comment' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:1:1]
+ 1 | // Line comment
+   :         ^^^^^^^
+   `----
+
+  x WhiteSpace { value: Atom('
+  | ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:1:1]
+ 1 | // Line comment
+   :                ^
+ 2 | // Line comment
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:2:1]
+ 2 | // Line comment
+   : ^
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:2:1]
+ 2 | // Line comment
+   :  ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:2:1]
+ 2 | // Line comment
+   :   ^
+   `----
+
+  x Ident { value: Atom('Line' type=inline), raw: Atom('Line' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:2:1]
+ 2 | // Line comment
+   :    ^^^^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:2:1]
+ 2 | // Line comment
+   :        ^
+   `----
+
+  x Ident { value: Atom('comment' type=inline), raw: Atom('comment' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:2:1]
+ 2 | // Line comment
+   :         ^^^^^^^
+   `----
+
+  x WhiteSpace { value: Atom('
+  | ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:2:1]
+ 2 | // Line comment
+   :                ^
+ 3 | foo {
+   `----
+
+  x Ident { value: Atom('foo' type=inline), raw: Atom('foo' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:3:1]
+ 3 | foo {
+   : ^^^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:3:1]
+ 3 | foo {
+   :    ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:3:1]
+ 3 | ,-> foo {
+ 4 | |       color: red;
+ 5 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:4:5]
+ 4 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:4:5]
+ 4 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:4:5]
+ 4 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:4:5]
+ 4 | color: red;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:4:5]
+ 4 | color: red;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:4:5]
+ 4 | color: red;
+   :        ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/line-comment/css-in-js/5/input.css:4:5]
+ 4 | color: red;
+   :        ^^^
+   `----

crates/swc_css_parser/tests/line-comment/css-in-js/6/span.rust-debug

@@ -0,0 +1,215 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:1:1]
+ 1 | ,-> foo {
+ 2 | |       // Line comment
+ 3 | |       // Line comment
+ 4 | |       color: red;
+ 5 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:1:1]
+ 1 | ,-> foo {
+ 2 | |       // Line comment
+ 3 | |       // Line comment
+ 4 | |       color: red;
+ 5 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:1:1]
+ 1 | ,-> foo {
+ 2 | |       // Line comment
+ 3 | |       // Line comment
+ 4 | |       color: red;
+ 5 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:1:1]
+ 1 | foo {
+   : ^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:1:1]
+ 1 | ,-> foo {
+ 2 | |       // Line comment
+ 3 | |       // Line comment
+ 4 | |       color: red;
+ 5 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:2:5]
+ 2 | ,-> // Line comment
+ 3 | |       // Line comment
+ 4 | `->     color: red;
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:2:5]
+ 2 | ,-> // Line comment
+ 3 | |       // Line comment
+ 4 | `->     color: red;
+   `----
+
+  x Tokens
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:2:5]
+ 2 | ,-> // Line comment
+ 3 | |       // Line comment
+ 4 | `->     color: red;
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:2:5]
+ 2 | // Line comment
+   : ^
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:2:5]
+ 2 | // Line comment
+   :  ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:2:5]
+ 2 | // Line comment
+   :   ^
+   `----
+
+  x Ident { value: Atom('Line' type=inline), raw: Atom('Line' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:2:5]
+ 2 | // Line comment
+   :    ^^^^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:2:5]
+ 2 | // Line comment
+   :        ^
+   `----
+
+  x Ident { value: Atom('comment' type=inline), raw: Atom('comment' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:2:5]
+ 2 | // Line comment
+   :         ^^^^^^^
+   `----
+
+  x WhiteSpace { value: Atom('
+  |     ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:2:5]
+ 2 | ,-> // Line comment
+ 3 | `->     // Line comment
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:3:5]
+ 3 | // Line comment
+   : ^
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:3:5]
+ 3 | // Line comment
+   :  ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:3:5]
+ 3 | // Line comment
+   :   ^
+   `----
+
+  x Ident { value: Atom('Line' type=inline), raw: Atom('Line' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:3:5]
+ 3 | // Line comment
+   :    ^^^^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:3:5]
+ 3 | // Line comment
+   :        ^
+   `----
+
+  x Ident { value: Atom('comment' type=inline), raw: Atom('comment' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:3:5]
+ 3 | // Line comment
+   :         ^^^^^^^
+   `----
+
+  x WhiteSpace { value: Atom('
+  |     ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:3:5]
+ 3 | ,-> // Line comment
+ 4 | `->     color: red;
+   `----
+
+  x Ident { value: Atom('color' type=inline), raw: Atom('color' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:4:5]
+ 4 | color: red;
+   : ^^^^^
+   `----
+
+  x Colon
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:4:5]
+ 4 | color: red;
+   :      ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:4:5]
+ 4 | color: red;
+   :       ^
+   `----
+
+  x Ident { value: Atom('red' type=inline), raw: Atom('red' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:4:5]
+ 4 | color: red;
+   :        ^^^
+   `----
+
+  x Semi
+   ,-[$DIR/tests/line-comment/css-in-js/6/input.css:4:5]
+ 4 | color: red;
+   :           ^
+   `----

crates/swc_css_parser/tests/line-comment/css-in-js/7/span.rust-debug

@@ -0,0 +1,30 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/line-comment/css-in-js/7/input.css:1:1]
+ 1 | //
+   : ^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/line-comment/css-in-js/7/input.css:1:1]
+ 1 | //
+   : ^^
+   `----
+
+  x Tokens
+   ,-[$DIR/tests/line-comment/css-in-js/7/input.css:1:1]
+ 1 | //
+   : ^^
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/7/input.css:1:1]
+ 1 | //
+   : ^
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/7/input.css:1:1]
+ 1 | //
+   :  ^
+   `----

crates/swc_css_parser/tests/line-comment/css-in-js/8/span.rust-debug

@@ -0,0 +1,30 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/line-comment/css-in-js/8/input.css:1:1]
+ 1 | //
+   : ^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/line-comment/css-in-js/8/input.css:1:1]
+ 1 | //
+   : ^^
+   `----
+
+  x Tokens
+   ,-[$DIR/tests/line-comment/css-in-js/8/input.css:1:1]
+ 1 | //
+   : ^^
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/8/input.css:1:1]
+ 1 | //
+   : ^
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/8/input.css:1:1]
+ 1 | //
+   :  ^
+   `----

crates/swc_css_parser/tests/line-comment/css-in-js/9/span.rust-debug

@@ -0,0 +1,54 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/line-comment/css-in-js/9/input.css:1:1]
+ 1 | // Only comment
+   : ^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/line-comment/css-in-js/9/input.css:1:1]
+ 1 | // Only comment
+   : ^^^^^^^^^^^^^^^
+   `----
+
+  x Tokens
+   ,-[$DIR/tests/line-comment/css-in-js/9/input.css:1:1]
+ 1 | // Only comment
+   : ^^^^^^^^^^^^^^^
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/9/input.css:1:1]
+ 1 | // Only comment
+   : ^
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/line-comment/css-in-js/9/input.css:1:1]
+ 1 | // Only comment
+   :  ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/9/input.css:1:1]
+ 1 | // Only comment
+   :   ^
+   `----
+
+  x Ident { value: Atom('Only' type=inline), raw: Atom('Only' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/9/input.css:1:1]
+ 1 | // Only comment
+   :    ^^^^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/9/input.css:1:1]
+ 1 | // Only comment
+   :        ^
+   `----
+
+  x Ident { value: Atom('comment' type=inline), raw: Atom('comment' type=inline) }
+   ,-[$DIR/tests/line-comment/css-in-js/9/input.css:1:1]
+ 1 | // Only comment
+   :         ^^^^^^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/extra-semi/span.rust-debug

@@ -0,0 +1,131 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/extra-semi/input.css:1:1]
+ 1 | ,-> @import "x.css";;
+ 2 | |   
+ 3 | |   .color {
+ 4 | `->     color: red;
+ 5 |     }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/extra-semi/input.css:1:1]
+ 1 | @import "x.css";;
+   : ^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/extra-semi/input.css:1:1]
+ 1 | @import "x.css";;
+   : ^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/extra-semi/input.css:1:1]
+ 1 | @import "x.css";;
+   :  ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/extra-semi/input.css:1:1]
+ 1 | @import "x.css";;
+   :  ^^^^^^
+   `----
+
+  x Str
+   ,-[$DIR/tests/recovery/at-rule/extra-semi/input.css:1:1]
+ 1 | @import "x.css";;
+   :         ^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/extra-semi/input.css:1:1]
+ 1 | ,-> @import "x.css";;
+ 2 | |   
+ 3 | |   .color {
+ 4 | `->     color: red;
+   `----
+
+  x Tokens
+   ,-[$DIR/tests/recovery/at-rule/extra-semi/input.css:1:1]
+ 1 | ,-> @import "x.css";;
+ 2 | |   
+ 3 | |   .color {
+ 4 | `->     color: red;
+   `----
+
+  x Semi
+   ,-[$DIR/tests/recovery/at-rule/extra-semi/input.css:1:1]
+ 1 | @import "x.css";;
+   :                 ^
+   `----
+
+  x WhiteSpace { value: Atom('
+  | 
+  | ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/extra-semi/input.css:1:1]
+ 1 | ,-> @import "x.css";;
+ 2 | `-> 
+ 3 |     .color {
+   `----
+
+  x Delim { value: '.' }
+   ,-[$DIR/tests/recovery/at-rule/extra-semi/input.css:3:1]
+ 3 | .color {
+   : ^
+   `----
+
+  x Ident { value: Atom('color' type=inline), raw: Atom('color' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/extra-semi/input.css:3:1]
+ 3 | .color {
+   :  ^^^^^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/extra-semi/input.css:3:1]
+ 3 | .color {
+   :       ^
+   `----
+
+  x LBrace
+   ,-[$DIR/tests/recovery/at-rule/extra-semi/input.css:3:1]
+ 3 | .color {
+   :        ^
+   `----
+
+  x WhiteSpace { value: Atom('
+  |     ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/extra-semi/input.css:3:1]
+ 3 | ,-> .color {
+ 4 | `->     color: red;
+   `----
+
+  x Ident { value: Atom('color' type=inline), raw: Atom('color' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/extra-semi/input.css:4:5]
+ 4 | color: red;
+   : ^^^^^
+   `----
+
+  x Colon
+   ,-[$DIR/tests/recovery/at-rule/extra-semi/input.css:4:5]
+ 4 | color: red;
+   :      ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/extra-semi/input.css:4:5]
+ 4 | color: red;
+   :       ^
+   `----
+
+  x Ident { value: Atom('red' type=inline), raw: Atom('red' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/extra-semi/input.css:4:5]
+ 4 | color: red;
+   :        ^^^
+   `----
+
+  x Semi
+   ,-[$DIR/tests/recovery/at-rule/extra-semi/input.css:4:5]
+ 4 | color: red;
+   :           ^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/font-face/span.rust-debug

@@ -0,0 +1,399 @@
+
+  x Stylesheet
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:1:1]
+  1 | ,-> @font-face {
+  2 | |       invalid
+  3 | |   }
+  4 | |   
+  5 | |   @font-face {
+  6 | |       invalid;
+  7 | |   }
+  8 | |   
+  9 | |   @font-face {
+ 10 | |       123
+ 11 | |   }
+ 12 | |   
+ 13 | |   @font-face {
+ 14 | |       123;
+ 15 | |   }
+ 16 | |   
+ 17 | |   @font-face foo {}
+ 18 | |   
+ 19 | |   @font-face foo;
+ 20 | |   
+ 21 | `-> @font-face ;
+    `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/font-face/input.css:1:1]
+ 1 | ,-> @font-face {
+ 2 | |       invalid
+ 3 | `-> }
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/font-face/input.css:1:1]
+ 1 | ,-> @font-face {
+ 2 | |       invalid
+ 3 | `-> }
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/font-face/input.css:1:1]
+ 1 | @font-face {
+   :  ^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/font-face/input.css:1:1]
+ 1 | @font-face {
+   :  ^^^^^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/font-face/input.css:1:1]
+ 1 | ,-> @font-face {
+ 2 | |       invalid
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/font-face/input.css:2:5]
+ 2 | invalid
+   : ^^^^^^^^
+ 3 | }
+   `----
+
+  x Tokens
+   ,-[$DIR/tests/recovery/at-rule/font-face/input.css:2:5]
+ 2 | invalid
+   : ^^^^^^^^
+ 3 | }
+   `----
+
+  x Ident { value: Atom('invalid' type=inline), raw: Atom('invalid' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/font-face/input.css:2:5]
+ 2 | invalid
+   : ^^^^^^^
+   `----
+
+  x WhiteSpace { value: Atom('
+  | ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/font-face/input.css:2:5]
+ 2 | invalid
+   :        ^
+ 3 | }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/font-face/input.css:5:1]
+ 5 | ,-> @font-face {
+ 6 | |       invalid;
+ 7 | `-> }
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/font-face/input.css:5:1]
+ 5 | ,-> @font-face {
+ 6 | |       invalid;
+ 7 | `-> }
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/font-face/input.css:5:1]
+ 5 | @font-face {
+   :  ^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/font-face/input.css:5:1]
+ 5 | @font-face {
+   :  ^^^^^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/font-face/input.css:5:1]
+ 5 | ,-> @font-face {
+ 6 | |       invalid;
+ 7 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/font-face/input.css:6:5]
+ 6 | invalid;
+   : ^^^^^^^^
+   `----
+
+  x Tokens
+   ,-[$DIR/tests/recovery/at-rule/font-face/input.css:6:5]
+ 6 | invalid;
+   : ^^^^^^^^
+   `----
+
+  x Ident { value: Atom('invalid' type=inline), raw: Atom('invalid' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/font-face/input.css:6:5]
+ 6 | invalid;
+   : ^^^^^^^
+   `----
+
+  x Semi
+   ,-[$DIR/tests/recovery/at-rule/font-face/input.css:6:5]
+ 6 | invalid;
+   :        ^
+   `----
+
+  x Rule
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:9:1]
+  9 | ,-> @font-face {
+ 10 | |       123
+ 11 | `-> }
+    `----
+
+  x AtRule
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:9:1]
+  9 | ,-> @font-face {
+ 10 | |       123
+ 11 | `-> }
+    `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/font-face/input.css:9:1]
+ 9 | @font-face {
+   :  ^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/font-face/input.css:9:1]
+ 9 | @font-face {
+   :  ^^^^^^^^^
+   `----
+
+  x SimpleBlock
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:9:1]
+  9 | ,-> @font-face {
+ 10 | |       123
+ 11 | `-> }
+    `----
+
+  x ComponentValue
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:10:5]
+ 10 | 123
+    : ^^^^
+ 11 | }
+    `----
+
+  x Tokens
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:10:5]
+ 10 | 123
+    : ^^^^
+ 11 | }
+    `----
+
+  x Number { value: 123.0, raw: Atom('123' type=inline), type_flag: Integer }
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:10:5]
+ 10 | 123
+    : ^^^
+    `----
+
+  x WhiteSpace { value: Atom('
+  | ' type=inline) }
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:10:5]
+ 10 | 123
+    :    ^
+ 11 | }
+    `----
+
+  x Rule
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:13:1]
+ 13 | ,-> @font-face {
+ 14 | |       123;
+ 15 | `-> }
+    `----
+
+  x AtRule
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:13:1]
+ 13 | ,-> @font-face {
+ 14 | |       123;
+ 15 | `-> }
+    `----
+
+  x AtRuleName
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:13:1]
+ 13 | @font-face {
+    :  ^^^^^^^^^
+    `----
+
+  x Ident
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:13:1]
+ 13 | @font-face {
+    :  ^^^^^^^^^
+    `----
+
+  x SimpleBlock
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:13:1]
+ 13 | ,-> @font-face {
+ 14 | |       123;
+ 15 | `-> }
+    `----
+
+  x ComponentValue
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:14:5]
+ 14 | 123;
+    : ^^^^
+    `----
+
+  x Tokens
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:14:5]
+ 14 | 123;
+    : ^^^^
+    `----
+
+  x Number { value: 123.0, raw: Atom('123' type=inline), type_flag: Integer }
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:14:5]
+ 14 | 123;
+    : ^^^
+    `----
+
+  x Semi
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:14:5]
+ 14 | 123;
+    :    ^
+    `----
+
+  x Rule
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:17:1]
+ 17 | @font-face foo {}
+    : ^^^^^^^^^^^^^^^^^
+    `----
+
+  x AtRule
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:17:1]
+ 17 | @font-face foo {}
+    : ^^^^^^^^^^^^^^^^^
+    `----
+
+  x AtRuleName
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:17:1]
+ 17 | @font-face foo {}
+    :  ^^^^^^^^^
+    `----
+
+  x Ident
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:17:1]
+ 17 | @font-face foo {}
+    :  ^^^^^^^^^
+    `----
+
+  x ComponentValue
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:17:1]
+ 17 | @font-face foo {}
+    :           ^
+    `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:17:1]
+ 17 | @font-face foo {}
+    :           ^
+    `----
+
+  x ComponentValue
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:17:1]
+ 17 | @font-face foo {}
+    :            ^^^
+    `----
+
+  x Ident { value: Atom('foo' type=inline), raw: Atom('foo' type=inline) }
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:17:1]
+ 17 | @font-face foo {}
+    :            ^^^
+    `----
+
+  x SimpleBlock
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:17:1]
+ 17 | @font-face foo {}
+    :                ^^
+    `----
+
+  x Rule
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:19:1]
+ 19 | @font-face foo;
+    : ^^^^^^^^^^^^^^^
+    `----
+
+  x AtRule
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:19:1]
+ 19 | @font-face foo;
+    : ^^^^^^^^^^^^^^^
+    `----
+
+  x AtRuleName
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:19:1]
+ 19 | @font-face foo;
+    :  ^^^^^^^^^
+    `----
+
+  x Ident
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:19:1]
+ 19 | @font-face foo;
+    :  ^^^^^^^^^
+    `----
+
+  x ComponentValue
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:19:1]
+ 19 | @font-face foo;
+    :           ^
+    `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:19:1]
+ 19 | @font-face foo;
+    :           ^
+    `----
+
+  x ComponentValue
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:19:1]
+ 19 | @font-face foo;
+    :            ^^^
+    `----
+
+  x Ident { value: Atom('foo' type=inline), raw: Atom('foo' type=inline) }
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:19:1]
+ 19 | @font-face foo;
+    :            ^^^
+    `----
+
+  x Rule
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:21:1]
+ 21 | @font-face ;
+    : ^^^^^^^^^^^^
+    `----
+
+  x AtRule
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:21:1]
+ 21 | @font-face ;
+    : ^^^^^^^^^^^^
+    `----
+
+  x AtRuleName
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:21:1]
+ 21 | @font-face ;
+    :  ^^^^^^^^^
+    `----
+
+  x Ident
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:21:1]
+ 21 | @font-face ;
+    :  ^^^^^^^^^
+    `----
+
+  x ComponentValue
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:21:1]
+ 21 | @font-face ;
+    :           ^
+    `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+    ,-[$DIR/tests/recovery/at-rule/font-face/input.css:21:1]
+ 21 | @font-face ;
+    :           ^
+    `----

crates/swc_css_parser/tests/recovery/at-rule/import/empty/span.rust-debug

@@ -0,0 +1,42 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/import/empty/input.css:1:1]
+ 1 | @import ;
+   : ^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/import/empty/input.css:1:1]
+ 1 | @import ;
+   : ^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/import/empty/input.css:1:1]
+ 1 | @import ;
+   : ^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/import/empty/input.css:1:1]
+ 1 | @import ;
+   :  ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/import/empty/input.css:1:1]
+ 1 | @import ;
+   :  ^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/import/empty/input.css:1:1]
+ 1 | @import ;
+   :        ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/import/empty/input.css:1:1]
+ 1 | @import ;
+   :        ^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/import/indent/span.rust-debug

@@ -0,0 +1,54 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/import/indent/input.css:1:1]
+ 1 | @import foo-bar;
+   : ^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/import/indent/input.css:1:1]
+ 1 | @import foo-bar;
+   : ^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/import/indent/input.css:1:1]
+ 1 | @import foo-bar;
+   : ^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/import/indent/input.css:1:1]
+ 1 | @import foo-bar;
+   :  ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/import/indent/input.css:1:1]
+ 1 | @import foo-bar;
+   :  ^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/import/indent/input.css:1:1]
+ 1 | @import foo-bar;
+   :        ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/import/indent/input.css:1:1]
+ 1 | @import foo-bar;
+   :        ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/import/indent/input.css:1:1]
+ 1 | @import foo-bar;
+   :         ^^^^^^^
+   `----
+
+  x Ident { value: Atom('foo-bar' type=inline), raw: Atom('foo-bar' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/import/indent/input.css:1:1]
+ 1 | @import foo-bar;
+   :         ^^^^^^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/import/no-semi/span.rust-debug

@@ -0,0 +1,126 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/import/no-semi/input.css:1:1]
+ 1 | @import url('http://') :root {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/import/no-semi/input.css:1:1]
+ 1 | @import url('http://') :root {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/import/no-semi/input.css:1:1]
+ 1 | @import url('http://') :root {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/import/no-semi/input.css:1:1]
+ 1 | @import url('http://') :root {}
+   :  ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/import/no-semi/input.css:1:1]
+ 1 | @import url('http://') :root {}
+   :  ^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/import/no-semi/input.css:1:1]
+ 1 | @import url('http://') :root {}
+   :        ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/import/no-semi/input.css:1:1]
+ 1 | @import url('http://') :root {}
+   :        ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/import/no-semi/input.css:1:1]
+ 1 | @import url('http://') :root {}
+   :         ^^^^^^^^^^^^^^
+   `----
+
+  x Function
+   ,-[$DIR/tests/recovery/at-rule/import/no-semi/input.css:1:1]
+ 1 | @import url('http://') :root {}
+   :         ^^^^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/import/no-semi/input.css:1:1]
+ 1 | @import url('http://') :root {}
+   :         ^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/import/no-semi/input.css:1:1]
+ 1 | @import url('http://') :root {}
+   :             ^^^^^^^^^
+   `----
+
+  x String { value: Atom('http://' type=inline), raw: Atom(''http://'' type=dynamic) }
+   ,-[$DIR/tests/recovery/at-rule/import/no-semi/input.css:1:1]
+ 1 | @import url('http://') :root {}
+   :             ^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/import/no-semi/input.css:1:1]
+ 1 | @import url('http://') :root {}
+   :                       ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/import/no-semi/input.css:1:1]
+ 1 | @import url('http://') :root {}
+   :                       ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/import/no-semi/input.css:1:1]
+ 1 | @import url('http://') :root {}
+   :                        ^
+   `----
+
+  x Colon
+   ,-[$DIR/tests/recovery/at-rule/import/no-semi/input.css:1:1]
+ 1 | @import url('http://') :root {}
+   :                        ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/import/no-semi/input.css:1:1]
+ 1 | @import url('http://') :root {}
+   :                         ^^^^
+   `----
+
+  x Ident { value: Atom('root' type=inline), raw: Atom('root' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/import/no-semi/input.css:1:1]
+ 1 | @import url('http://') :root {}
+   :                         ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/import/no-semi/input.css:1:1]
+ 1 | @import url('http://') :root {}
+   :                             ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/import/no-semi/input.css:1:1]
+ 1 | @import url('http://') :root {}
+   :                             ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/import/no-semi/input.css:1:1]
+ 1 | @import url('http://') :root {}
+   :                              ^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/import/no-url/span.rust-debug

@@ -0,0 +1,120 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/import/no-url/input.css:1:1]
+ 1 | ,-> @import nourl(test);
+ 2 | `-> @import 123;
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/import/no-url/input.css:1:1]
+ 1 | @import nourl(test);
+   : ^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/import/no-url/input.css:1:1]
+ 1 | @import nourl(test);
+   : ^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/import/no-url/input.css:1:1]
+ 1 | @import nourl(test);
+   :  ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/import/no-url/input.css:1:1]
+ 1 | @import nourl(test);
+   :  ^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/import/no-url/input.css:1:1]
+ 1 | @import nourl(test);
+   :        ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/import/no-url/input.css:1:1]
+ 1 | @import nourl(test);
+   :        ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/import/no-url/input.css:1:1]
+ 1 | @import nourl(test);
+   :         ^^^^^^^^^^^
+   `----
+
+  x Function
+   ,-[$DIR/tests/recovery/at-rule/import/no-url/input.css:1:1]
+ 1 | @import nourl(test);
+   :         ^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/import/no-url/input.css:1:1]
+ 1 | @import nourl(test);
+   :         ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/import/no-url/input.css:1:1]
+ 1 | @import nourl(test);
+   :               ^^^^
+   `----
+
+  x Ident { value: Atom('test' type=inline), raw: Atom('test' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/import/no-url/input.css:1:1]
+ 1 | @import nourl(test);
+   :               ^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/import/no-url/input.css:2:1]
+ 2 | @import 123;
+   : ^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/import/no-url/input.css:2:1]
+ 2 | @import 123;
+   : ^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/import/no-url/input.css:2:1]
+ 2 | @import 123;
+   :  ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/import/no-url/input.css:2:1]
+ 2 | @import 123;
+   :  ^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/import/no-url/input.css:2:1]
+ 2 | @import 123;
+   :        ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/import/no-url/input.css:2:1]
+ 2 | @import 123;
+   :        ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/import/no-url/input.css:2:1]
+ 2 | @import 123;
+   :         ^^^
+   `----
+
+  x Number { value: 123.0, raw: Atom('123' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/at-rule/import/no-url/input.css:2:1]
+ 2 | @import 123;
+   :         ^^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/keyframes/custom-ident-1/span.rust-debug

@@ -0,0 +1,72 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-1/input.css:1:1]
+ 1 | @keyframes None {}
+   : ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-1/input.css:1:1]
+ 1 | @keyframes None {}
+   : ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-1/input.css:1:1]
+ 1 | @keyframes None {}
+   : ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-1/input.css:1:1]
+ 1 | @keyframes None {}
+   :  ^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-1/input.css:1:1]
+ 1 | @keyframes None {}
+   :  ^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-1/input.css:1:1]
+ 1 | @keyframes None {}
+   :           ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-1/input.css:1:1]
+ 1 | @keyframes None {}
+   :           ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-1/input.css:1:1]
+ 1 | @keyframes None {}
+   :            ^^^^
+   `----
+
+  x Ident { value: Atom('None' type=inline), raw: Atom('None' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-1/input.css:1:1]
+ 1 | @keyframes None {}
+   :            ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-1/input.css:1:1]
+ 1 | @keyframes None {}
+   :                ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-1/input.css:1:1]
+ 1 | @keyframes None {}
+   :                ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-1/input.css:1:1]
+ 1 | @keyframes None {}
+   :                 ^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/keyframes/custom-ident-2/span.rust-debug

@@ -0,0 +1,72 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-2/input.css:1:1]
+ 1 | @keyframes inherit {}
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-2/input.css:1:1]
+ 1 | @keyframes inherit {}
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-2/input.css:1:1]
+ 1 | @keyframes inherit {}
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-2/input.css:1:1]
+ 1 | @keyframes inherit {}
+   :  ^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-2/input.css:1:1]
+ 1 | @keyframes inherit {}
+   :  ^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-2/input.css:1:1]
+ 1 | @keyframes inherit {}
+   :           ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-2/input.css:1:1]
+ 1 | @keyframes inherit {}
+   :           ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-2/input.css:1:1]
+ 1 | @keyframes inherit {}
+   :            ^^^^^^^
+   `----
+
+  x Ident { value: Atom('inherit' type=inline), raw: Atom('inherit' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-2/input.css:1:1]
+ 1 | @keyframes inherit {}
+   :            ^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-2/input.css:1:1]
+ 1 | @keyframes inherit {}
+   :                   ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-2/input.css:1:1]
+ 1 | @keyframes inherit {}
+   :                   ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-2/input.css:1:1]
+ 1 | @keyframes inherit {}
+   :                    ^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/keyframes/custom-ident-3/span.rust-debug

@@ -0,0 +1,72 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-3/input.css:1:1]
+ 1 | @keyframes unset {}
+   : ^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-3/input.css:1:1]
+ 1 | @keyframes unset {}
+   : ^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-3/input.css:1:1]
+ 1 | @keyframes unset {}
+   : ^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-3/input.css:1:1]
+ 1 | @keyframes unset {}
+   :  ^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-3/input.css:1:1]
+ 1 | @keyframes unset {}
+   :  ^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-3/input.css:1:1]
+ 1 | @keyframes unset {}
+   :           ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-3/input.css:1:1]
+ 1 | @keyframes unset {}
+   :           ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-3/input.css:1:1]
+ 1 | @keyframes unset {}
+   :            ^^^^^
+   `----
+
+  x Ident { value: Atom('unset' type=inline), raw: Atom('unset' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-3/input.css:1:1]
+ 1 | @keyframes unset {}
+   :            ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-3/input.css:1:1]
+ 1 | @keyframes unset {}
+   :                 ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-3/input.css:1:1]
+ 1 | @keyframes unset {}
+   :                 ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-3/input.css:1:1]
+ 1 | @keyframes unset {}
+   :                  ^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/keyframes/custom-ident-4/span.rust-debug

@@ -0,0 +1,72 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-4/input.css:1:1]
+ 1 | @keyframes default {}
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-4/input.css:1:1]
+ 1 | @keyframes default {}
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-4/input.css:1:1]
+ 1 | @keyframes default {}
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-4/input.css:1:1]
+ 1 | @keyframes default {}
+   :  ^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-4/input.css:1:1]
+ 1 | @keyframes default {}
+   :  ^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-4/input.css:1:1]
+ 1 | @keyframes default {}
+   :           ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-4/input.css:1:1]
+ 1 | @keyframes default {}
+   :           ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-4/input.css:1:1]
+ 1 | @keyframes default {}
+   :            ^^^^^^^
+   `----
+
+  x Ident { value: Atom('default' type=static), raw: Atom('default' type=static) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-4/input.css:1:1]
+ 1 | @keyframes default {}
+   :            ^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-4/input.css:1:1]
+ 1 | @keyframes default {}
+   :                   ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-4/input.css:1:1]
+ 1 | @keyframes default {}
+   :                   ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident-4/input.css:1:1]
+ 1 | @keyframes default {}
+   :                    ^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/keyframes/custom-ident/span.rust-debug

@@ -0,0 +1,72 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident/input.css:1:1]
+ 1 | @keyframes initial {}
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident/input.css:1:1]
+ 1 | @keyframes initial {}
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident/input.css:1:1]
+ 1 | @keyframes initial {}
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident/input.css:1:1]
+ 1 | @keyframes initial {}
+   :  ^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident/input.css:1:1]
+ 1 | @keyframes initial {}
+   :  ^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident/input.css:1:1]
+ 1 | @keyframes initial {}
+   :           ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident/input.css:1:1]
+ 1 | @keyframes initial {}
+   :           ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident/input.css:1:1]
+ 1 | @keyframes initial {}
+   :            ^^^^^^^
+   `----
+
+  x Ident { value: Atom('initial' type=inline), raw: Atom('initial' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident/input.css:1:1]
+ 1 | @keyframes initial {}
+   :            ^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident/input.css:1:1]
+ 1 | @keyframes initial {}
+   :                   ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident/input.css:1:1]
+ 1 | @keyframes initial {}
+   :                   ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/keyframes/custom-ident/input.css:1:1]
+ 1 | @keyframes initial {}
+   :                    ^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/keyframes/empty-name/span.rust-debug

@@ -0,0 +1,48 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/keyframes/empty-name/input.css:1:1]
+ 1 | @keyframes {}
+   : ^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/empty-name/input.css:1:1]
+ 1 | @keyframes {}
+   : ^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/empty-name/input.css:1:1]
+ 1 | @keyframes {}
+   : ^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/keyframes/empty-name/input.css:1:1]
+ 1 | @keyframes {}
+   :  ^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/keyframes/empty-name/input.css:1:1]
+ 1 | @keyframes {}
+   :  ^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/empty-name/input.css:1:1]
+ 1 | @keyframes {}
+   :           ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/empty-name/input.css:1:1]
+ 1 | @keyframes {}
+   :           ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/keyframes/empty-name/input.css:1:1]
+ 1 | @keyframes {}
+   :            ^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/span.rust-debug

@@ -0,0 +1,339 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:1:1]
+ 1 | ,-> @keyframes initial {}
+ 2 | |   @keyframes inherit {}
+ 3 | |   @keyframes unset {}
+ 4 | |   @keyframes none {}
+ 5 | `-> @keyframes iNiTiAl {}
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:1:1]
+ 1 | @keyframes initial {}
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:1:1]
+ 1 | @keyframes initial {}
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:1:1]
+ 1 | @keyframes initial {}
+   :  ^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:1:1]
+ 1 | @keyframes initial {}
+   :  ^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:1:1]
+ 1 | @keyframes initial {}
+   :           ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:1:1]
+ 1 | @keyframes initial {}
+   :           ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:1:1]
+ 1 | @keyframes initial {}
+   :            ^^^^^^^
+   `----
+
+  x Ident { value: Atom('initial' type=inline), raw: Atom('initial' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:1:1]
+ 1 | @keyframes initial {}
+   :            ^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:1:1]
+ 1 | @keyframes initial {}
+   :                   ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:1:1]
+ 1 | @keyframes initial {}
+   :                   ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:1:1]
+ 1 | @keyframes initial {}
+   :                    ^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:2:1]
+ 2 | @keyframes inherit {}
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:2:1]
+ 2 | @keyframes inherit {}
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:2:1]
+ 2 | @keyframes inherit {}
+   :  ^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:2:1]
+ 2 | @keyframes inherit {}
+   :  ^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:2:1]
+ 2 | @keyframes inherit {}
+   :           ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:2:1]
+ 2 | @keyframes inherit {}
+   :           ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:2:1]
+ 2 | @keyframes inherit {}
+   :            ^^^^^^^
+   `----
+
+  x Ident { value: Atom('inherit' type=inline), raw: Atom('inherit' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:2:1]
+ 2 | @keyframes inherit {}
+   :            ^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:2:1]
+ 2 | @keyframes inherit {}
+   :                   ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:2:1]
+ 2 | @keyframes inherit {}
+   :                   ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:2:1]
+ 2 | @keyframes inherit {}
+   :                    ^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:3:1]
+ 3 | @keyframes unset {}
+   : ^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:3:1]
+ 3 | @keyframes unset {}
+   : ^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:3:1]
+ 3 | @keyframes unset {}
+   :  ^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:3:1]
+ 3 | @keyframes unset {}
+   :  ^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:3:1]
+ 3 | @keyframes unset {}
+   :           ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:3:1]
+ 3 | @keyframes unset {}
+   :           ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:3:1]
+ 3 | @keyframes unset {}
+   :            ^^^^^
+   `----
+
+  x Ident { value: Atom('unset' type=inline), raw: Atom('unset' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:3:1]
+ 3 | @keyframes unset {}
+   :            ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:3:1]
+ 3 | @keyframes unset {}
+   :                 ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:3:1]
+ 3 | @keyframes unset {}
+   :                 ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:3:1]
+ 3 | @keyframes unset {}
+   :                  ^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:4:1]
+ 4 | @keyframes none {}
+   : ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:4:1]
+ 4 | @keyframes none {}
+   : ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:4:1]
+ 4 | @keyframes none {}
+   :  ^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:4:1]
+ 4 | @keyframes none {}
+   :  ^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:4:1]
+ 4 | @keyframes none {}
+   :           ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:4:1]
+ 4 | @keyframes none {}
+   :           ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:4:1]
+ 4 | @keyframes none {}
+   :            ^^^^
+   `----
+
+  x Ident { value: Atom('none' type=inline), raw: Atom('none' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:4:1]
+ 4 | @keyframes none {}
+   :            ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:4:1]
+ 4 | @keyframes none {}
+   :                ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:4:1]
+ 4 | @keyframes none {}
+   :                ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:4:1]
+ 4 | @keyframes none {}
+   :                 ^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:5:1]
+ 5 | @keyframes iNiTiAl {}
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:5:1]
+ 5 | @keyframes iNiTiAl {}
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:5:1]
+ 5 | @keyframes iNiTiAl {}
+   :  ^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:5:1]
+ 5 | @keyframes iNiTiAl {}
+   :  ^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:5:1]
+ 5 | @keyframes iNiTiAl {}
+   :           ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:5:1]
+ 5 | @keyframes iNiTiAl {}
+   :           ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:5:1]
+ 5 | @keyframes iNiTiAl {}
+   :            ^^^^^^^
+   `----
+
+  x Ident { value: Atom('iNiTiAl' type=inline), raw: Atom('iNiTiAl' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:5:1]
+ 5 | @keyframes iNiTiAl {}
+   :            ^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:5:1]
+ 5 | @keyframes iNiTiAl {}
+   :                   ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:5:1]
+ 5 | @keyframes iNiTiAl {}
+   :                   ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-css-wide-keywords/input.css:5:1]
+ 5 | @keyframes iNiTiAl {}
+   :                    ^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/keyframes/keyframe-keyword/span.rust-debug

@@ -0,0 +1,217 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:1:1]
+ 1 | ,-> @keyframes foo {
+ 2 | |   	form {}
+ 3 | |   }
+ 4 | |   
+ 5 | |   @keyframes foo {
+ 6 | |   	ot {}
+ 7 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:1:1]
+ 1 | ,-> @keyframes foo {
+ 2 | |   	form {}
+ 3 | `-> }
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:1:1]
+ 1 | ,-> @keyframes foo {
+ 2 | |   	form {}
+ 3 | `-> }
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:1:1]
+ 1 | @keyframes foo {
+   :  ^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:1:1]
+ 1 | @keyframes foo {
+   :  ^^^^^^^^^
+   `----
+
+  x CustomIdent
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:1:1]
+ 1 | @keyframes foo {
+   :            ^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:1:1]
+ 1 | ,-> @keyframes foo {
+ 2 | |   	form {}
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:1:1]
+ 1 | ,-> @keyframes foo {
+ 2 | `-> 	form {}
+   `----
+
+  x WhiteSpace { value: Atom('
+  | 	' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:1:1]
+ 1 | ,-> @keyframes foo {
+ 2 | `-> 	form {}
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:2:5]
+ 2 | form {}
+   : ^^^^
+   `----
+
+  x Ident { value: Atom('form' type=inline), raw: Atom('form' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:2:5]
+ 2 | form {}
+   : ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:2:5]
+ 2 | form {}
+   :     ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:2:5]
+ 2 | form {}
+   :     ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:2:5]
+ 2 | form {}
+   :      ^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:2:5]
+ 2 | form {}
+   :      ^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:2:5]
+ 2 | form {}
+   :        ^
+ 3 | }
+   `----
+
+  x WhiteSpace { value: Atom('
+  | ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:2:5]
+ 2 | form {}
+   :        ^
+ 3 | }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:5:1]
+ 5 | ,-> @keyframes foo {
+ 6 | |   	ot {}
+ 7 | `-> }
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:5:1]
+ 5 | ,-> @keyframes foo {
+ 6 | |   	ot {}
+ 7 | `-> }
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:5:1]
+ 5 | @keyframes foo {
+   :  ^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:5:1]
+ 5 | @keyframes foo {
+   :  ^^^^^^^^^
+   `----
+
+  x CustomIdent
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:5:1]
+ 5 | @keyframes foo {
+   :            ^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:5:1]
+ 5 | ,-> @keyframes foo {
+ 6 | |   	ot {}
+ 7 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:5:1]
+ 5 | ,-> @keyframes foo {
+ 6 | `-> 	ot {}
+   `----
+
+  x WhiteSpace { value: Atom('
+  | 	' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:5:1]
+ 5 | ,-> @keyframes foo {
+ 6 | `-> 	ot {}
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:6:5]
+ 6 | ot {}
+   : ^^
+   `----
+
+  x Ident { value: Atom('ot' type=inline), raw: Atom('ot' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:6:5]
+ 6 | ot {}
+   : ^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:6:5]
+ 6 | ot {}
+   :   ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:6:5]
+ 6 | ot {}
+   :   ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:6:5]
+ 6 | ot {}
+   :    ^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:6:5]
+ 6 | ot {}
+   :    ^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:6:5]
+ 6 | ot {}
+   :      ^
+ 7 | }
+   `----
+
+  x WhiteSpace { value: Atom('
+  | ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-keyword/input.css:6:5]
+ 6 | ot {}
+   :      ^
+ 7 | }
+   `----

crates/swc_css_parser/tests/recovery/at-rule/keyframes/keyframe-number/span.rust-debug

@@ -0,0 +1,136 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-number/input.css:1:1]
+ 1 | ,-> @keyframes foo {
+ 2 | |   	10 {
+ 3 | |   
+ 4 | |   	}
+ 5 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-number/input.css:1:1]
+ 1 | ,-> @keyframes foo {
+ 2 | |   	10 {
+ 3 | |   
+ 4 | |   	}
+ 5 | `-> }
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-number/input.css:1:1]
+ 1 | ,-> @keyframes foo {
+ 2 | |   	10 {
+ 3 | |   
+ 4 | |   	}
+ 5 | `-> }
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-number/input.css:1:1]
+ 1 | @keyframes foo {
+   :  ^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-number/input.css:1:1]
+ 1 | @keyframes foo {
+   :  ^^^^^^^^^
+   `----
+
+  x CustomIdent
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-number/input.css:1:1]
+ 1 | @keyframes foo {
+   :            ^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-number/input.css:1:1]
+ 1 | ,-> @keyframes foo {
+ 2 | |   	10 {
+ 3 | |   
+ 4 | |   	}
+ 5 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-number/input.css:1:1]
+ 1 | ,-> @keyframes foo {
+ 2 | `-> 	10 {
+   `----
+
+  x WhiteSpace { value: Atom('
+  | 	' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-number/input.css:1:1]
+ 1 | ,-> @keyframes foo {
+ 2 | `-> 	10 {
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-number/input.css:2:5]
+ 2 | 10 {
+   : ^^
+   `----
+
+  x Number { value: 10.0, raw: Atom('10' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-number/input.css:2:5]
+ 2 | 10 {
+   : ^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-number/input.css:2:5]
+ 2 | 10 {
+   :   ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-number/input.css:2:5]
+ 2 | 10 {
+   :   ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-number/input.css:2:5]
+ 2 | ,-> 10 {
+ 3 | |   
+ 4 | `-> 	}
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-number/input.css:2:5]
+ 2 | ,-> 10 {
+ 3 | |   
+ 4 | `-> 	}
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-number/input.css:2:5]
+ 2 | ,-> 10 {
+ 3 | |   
+ 4 | `-> 	}
+   `----
+
+  x WhiteSpace { value: Atom('
+  | 
+  | 	' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-number/input.css:2:5]
+ 2 | ,-> 10 {
+ 3 | |   
+ 4 | `-> 	}
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-number/input.css:4:5]
+ 4 | }
+   :  ^
+ 5 | }
+   `----
+
+  x WhiteSpace { value: Atom('
+  | ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/keyframes/keyframe-number/input.css:4:5]
+ 4 | }
+   :  ^
+ 5 | }
+   `----

crates/swc_css_parser/tests/recovery/at-rule/layer/block/span.rust-debug

@@ -0,0 +1,172 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:1:1]
+ 1 | ,-> @layer framework, override   ,    foo   {
+ 2 | |       .a {
+ 3 | |           color: red;
+ 4 | |       }
+ 5 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:1:1]
+ 1 | ,-> @layer framework, override   ,    foo   {
+ 2 | |       .a {
+ 3 | |           color: red;
+ 4 | |       }
+ 5 | `-> }
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:1:1]
+ 1 | ,-> @layer framework, override   ,    foo   {
+ 2 | |       .a {
+ 3 | |           color: red;
+ 4 | |       }
+ 5 | `-> }
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:1:1]
+ 1 | @layer framework, override   ,    foo   {
+   :  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:1:1]
+ 1 | @layer framework, override   ,    foo   {
+   :  ^^^^^
+   `----
+
+  x LayerPrelude
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:1:1]
+ 1 | @layer framework, override   ,    foo   {
+   :                                   ^^^
+   `----
+
+  x LayerName
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:1:1]
+ 1 | @layer framework, override   ,    foo   {
+   :                                   ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:1:1]
+ 1 | @layer framework, override   ,    foo   {
+   :                                   ^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:1:1]
+ 1 | ,-> @layer framework, override   ,    foo   {
+ 2 | |       .a {
+ 3 | |           color: red;
+ 4 | |       }
+ 5 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:2:5]
+ 2 | ,-> .a {
+ 3 | |           color: red;
+ 4 | `->     }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:2:5]
+ 2 | ,-> .a {
+ 3 | |           color: red;
+ 4 | `->     }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:2:5]
+ 2 | ,-> .a {
+ 3 | |           color: red;
+ 4 | `->     }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:2:5]
+ 2 | .a {
+   : ^^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:2:5]
+ 2 | .a {
+   : ^^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:2:5]
+ 2 | .a {
+   : ^^
+   `----
+
+  x SubclassSelector
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:2:5]
+ 2 | .a {
+   : ^^
+   `----
+
+  x ClassSelector
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:2:5]
+ 2 | .a {
+   : ^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:2:5]
+ 2 | .a {
+   :  ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:2:5]
+ 2 | ,-> .a {
+ 3 | |           color: red;
+ 4 | `->     }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:3:9]
+ 3 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:3:9]
+ 3 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:3:9]
+ 3 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:3:9]
+ 3 | color: red;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:3:9]
+ 3 | color: red;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:3:9]
+ 3 | color: red;
+   :        ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/layer/block/input.css:3:9]
+ 3 | color: red;
+   :        ^^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/layer/empty/span.rust-debug

@@ -0,0 +1,42 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/layer/empty/input.css:1:1]
+ 1 | @layer ;
+   : ^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/layer/empty/input.css:1:1]
+ 1 | @layer ;
+   : ^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/layer/empty/input.css:1:1]
+ 1 | @layer ;
+   : ^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/layer/empty/input.css:1:1]
+ 1 | @layer ;
+   :  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/layer/empty/input.css:1:1]
+ 1 | @layer ;
+   :  ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/layer/empty/input.css:1:1]
+ 1 | @layer ;
+   :       ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/layer/empty/input.css:1:1]
+ 1 | @layer ;
+   :       ^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/layer/string-name-block/span.rust-debug

@@ -0,0 +1,558 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:1:1]
+ 1 | ,-> @layer "framework" {
+ 2 | |       h1, h2 { color: maroon; background: white;}
+ 3 | |   
+ 4 | |       @media (prefers-color-scheme: dark) {
+ 5 | |           h1, h2 { color: red; background: black; }
+ 6 | |       }
+ 7 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:1:1]
+ 1 | ,-> @layer "framework" {
+ 2 | |       h1, h2 { color: maroon; background: white;}
+ 3 | |   
+ 4 | |       @media (prefers-color-scheme: dark) {
+ 5 | |           h1, h2 { color: red; background: black; }
+ 6 | |       }
+ 7 | `-> }
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:1:1]
+ 1 | ,-> @layer "framework" {
+ 2 | |       h1, h2 { color: maroon; background: white;}
+ 3 | |   
+ 4 | |       @media (prefers-color-scheme: dark) {
+ 5 | |           h1, h2 { color: red; background: black; }
+ 6 | |       }
+ 7 | `-> }
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:1:1]
+ 1 | @layer "framework" {
+   :  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:1:1]
+ 1 | @layer "framework" {
+   :  ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:1:1]
+ 1 | @layer "framework" {
+   :       ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:1:1]
+ 1 | @layer "framework" {
+   :       ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:1:1]
+ 1 | @layer "framework" {
+   :        ^^^^^^^^^^^
+   `----
+
+  x String { value: Atom('framework' type=dynamic), raw: Atom('"framework"' type=dynamic) }
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:1:1]
+ 1 | @layer "framework" {
+   :        ^^^^^^^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:1:1]
+ 1 | ,-> @layer "framework" {
+ 2 | |       h1, h2 { color: maroon; background: white;}
+ 3 | |   
+ 4 | |       @media (prefers-color-scheme: dark) {
+ 5 | |           h1, h2 { color: red; background: black; }
+ 6 | |       }
+ 7 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   : ^^^^^^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   : ^^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   : ^^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   : ^^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   : ^^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   : ^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   : ^^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   :     ^^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   :     ^^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   :     ^^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   :     ^^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   :     ^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   :     ^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   :        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   :          ^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   :          ^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   :          ^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   :          ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   :          ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   :                 ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   :                 ^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   :                         ^^^^^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   :                         ^^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   :                         ^^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   :                         ^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   :                         ^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   :                                     ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:2:5]
+ 2 | h1, h2 { color: maroon; background: white;}
+   :                                     ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:4:5]
+ 4 | ,-> @media (prefers-color-scheme: dark) {
+ 5 | |           h1, h2 { color: red; background: black; }
+ 6 | `->     }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:4:5]
+ 4 | ,-> @media (prefers-color-scheme: dark) {
+ 5 | |           h1, h2 { color: red; background: black; }
+ 6 | `->     }
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:4:5]
+ 4 | ,-> @media (prefers-color-scheme: dark) {
+ 5 | |           h1, h2 { color: red; background: black; }
+ 6 | `->     }
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:4:5]
+ 4 | @media (prefers-color-scheme: dark) {
+   :  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:4:5]
+ 4 | @media (prefers-color-scheme: dark) {
+   :  ^^^^^
+   `----
+
+  x MediaQueryList
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:4:5]
+ 4 | @media (prefers-color-scheme: dark) {
+   :        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x MediaQuery
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:4:5]
+ 4 | @media (prefers-color-scheme: dark) {
+   :        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x MediaCondition
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:4:5]
+ 4 | @media (prefers-color-scheme: dark) {
+   :        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x MediaConditionAllType
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:4:5]
+ 4 | @media (prefers-color-scheme: dark) {
+   :        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x MediaInParens
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:4:5]
+ 4 | @media (prefers-color-scheme: dark) {
+   :        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x MediaFeature
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:4:5]
+ 4 | @media (prefers-color-scheme: dark) {
+   :        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x MediaFeaturePlain
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:4:5]
+ 4 | @media (prefers-color-scheme: dark) {
+   :        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x MediaFeatureName
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:4:5]
+ 4 | @media (prefers-color-scheme: dark) {
+   :         ^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:4:5]
+ 4 | @media (prefers-color-scheme: dark) {
+   :         ^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x MediaFeatureValue
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:4:5]
+ 4 | @media (prefers-color-scheme: dark) {
+   :                               ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:4:5]
+ 4 | @media (prefers-color-scheme: dark) {
+   :                               ^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:4:5]
+ 4 | ,-> @media (prefers-color-scheme: dark) {
+ 5 | |           h1, h2 { color: red; background: black; }
+ 6 | `->     }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   : ^^^^^^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   : ^^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   : ^^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   : ^^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   : ^^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   : ^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   : ^^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   :     ^^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   :     ^^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   :     ^^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   :     ^^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   :     ^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   :     ^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   :        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   :          ^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   :          ^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   :          ^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   :          ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   :          ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   :                 ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   :                 ^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   :                      ^^^^^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   :                      ^^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   :                      ^^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   :                      ^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   :                      ^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   :                                  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-block/input.css:5:9]
+ 5 | h1, h2 { color: red; background: black; }
+   :                                  ^^^^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/layer/string-name-statement/span.rust-debug

@@ -0,0 +1,54 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-statement/input.css:1:1]
+ 1 | @layer "default";
+   : ^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-statement/input.css:1:1]
+ 1 | @layer "default";
+   : ^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-statement/input.css:1:1]
+ 1 | @layer "default";
+   : ^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-statement/input.css:1:1]
+ 1 | @layer "default";
+   :  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-statement/input.css:1:1]
+ 1 | @layer "default";
+   :  ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-statement/input.css:1:1]
+ 1 | @layer "default";
+   :       ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-statement/input.css:1:1]
+ 1 | @layer "default";
+   :       ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-statement/input.css:1:1]
+ 1 | @layer "default";
+   :        ^^^^^^^^^
+   `----
+
+  x String { value: Atom('default' type=static), raw: Atom('"default"' type=dynamic) }
+   ,-[$DIR/tests/recovery/at-rule/layer/string-name-statement/input.css:1:1]
+ 1 | @layer "default";
+   :        ^^^^^^^^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/media/condition-1/span.rust-debug

@@ -0,0 +1,102 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/media/condition-1/input.css:1:1]
+ 1 | @media (update: slow) and (hover: none) unknown (color: 1) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/media/condition-1/input.css:1:1]
+ 1 | @media (update: slow) and (hover: none) unknown (color: 1) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/media/condition-1/input.css:1:1]
+ 1 | @media (update: slow) and (hover: none) unknown (color: 1) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/media/condition-1/input.css:1:1]
+ 1 | @media (update: slow) and (hover: none) unknown (color: 1) {}
+   :  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/condition-1/input.css:1:1]
+ 1 | @media (update: slow) and (hover: none) unknown (color: 1) {}
+   :  ^^^^^
+   `----
+
+  x MediaQueryList
+   ,-[$DIR/tests/recovery/at-rule/media/condition-1/input.css:1:1]
+ 1 | @media (update: slow) and (hover: none) unknown (color: 1) {}
+   :                                                 ^^^^^^^^^^
+   `----
+
+  x MediaQuery
+   ,-[$DIR/tests/recovery/at-rule/media/condition-1/input.css:1:1]
+ 1 | @media (update: slow) and (hover: none) unknown (color: 1) {}
+   :                                                 ^^^^^^^^^^
+   `----
+
+  x MediaCondition
+   ,-[$DIR/tests/recovery/at-rule/media/condition-1/input.css:1:1]
+ 1 | @media (update: slow) and (hover: none) unknown (color: 1) {}
+   :                                                 ^^^^^^^^^^
+   `----
+
+  x MediaConditionAllType
+   ,-[$DIR/tests/recovery/at-rule/media/condition-1/input.css:1:1]
+ 1 | @media (update: slow) and (hover: none) unknown (color: 1) {}
+   :                                                 ^^^^^^^^^^
+   `----
+
+  x MediaInParens
+   ,-[$DIR/tests/recovery/at-rule/media/condition-1/input.css:1:1]
+ 1 | @media (update: slow) and (hover: none) unknown (color: 1) {}
+   :                                                 ^^^^^^^^^^
+   `----
+
+  x MediaFeature
+   ,-[$DIR/tests/recovery/at-rule/media/condition-1/input.css:1:1]
+ 1 | @media (update: slow) and (hover: none) unknown (color: 1) {}
+   :                                                 ^^^^^^^^^^
+   `----
+
+  x MediaFeaturePlain
+   ,-[$DIR/tests/recovery/at-rule/media/condition-1/input.css:1:1]
+ 1 | @media (update: slow) and (hover: none) unknown (color: 1) {}
+   :                                                 ^^^^^^^^^^
+   `----
+
+  x MediaFeatureName
+   ,-[$DIR/tests/recovery/at-rule/media/condition-1/input.css:1:1]
+ 1 | @media (update: slow) and (hover: none) unknown (color: 1) {}
+   :                                                  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/condition-1/input.css:1:1]
+ 1 | @media (update: slow) and (hover: none) unknown (color: 1) {}
+   :                                                  ^^^^^
+   `----
+
+  x MediaFeatureValue
+   ,-[$DIR/tests/recovery/at-rule/media/condition-1/input.css:1:1]
+ 1 | @media (update: slow) and (hover: none) unknown (color: 1) {}
+   :                                                         ^
+   `----
+
+  x Number
+   ,-[$DIR/tests/recovery/at-rule/media/condition-1/input.css:1:1]
+ 1 | @media (update: slow) and (hover: none) unknown (color: 1) {}
+   :                                                         ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/condition-1/input.css:1:1]
+ 1 | @media (update: slow) and (hover: none) unknown (color: 1) {}
+   :                                                            ^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/media/condition-and-or/span.rust-debug

@@ -0,0 +1,120 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/media/condition-and-or/input.css:1:1]
+ 1 | @media screen and (min-width: 900px) or (min-width: 1200px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/media/condition-and-or/input.css:1:1]
+ 1 | @media screen and (min-width: 900px) or (min-width: 1200px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/media/condition-and-or/input.css:1:1]
+ 1 | @media screen and (min-width: 900px) or (min-width: 1200px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/media/condition-and-or/input.css:1:1]
+ 1 | @media screen and (min-width: 900px) or (min-width: 1200px) {}
+   :  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/condition-and-or/input.css:1:1]
+ 1 | @media screen and (min-width: 900px) or (min-width: 1200px) {}
+   :  ^^^^^
+   `----
+
+  x MediaQueryList
+   ,-[$DIR/tests/recovery/at-rule/media/condition-and-or/input.css:1:1]
+ 1 | @media screen and (min-width: 900px) or (min-width: 1200px) {}
+   :                                         ^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x MediaQuery
+   ,-[$DIR/tests/recovery/at-rule/media/condition-and-or/input.css:1:1]
+ 1 | @media screen and (min-width: 900px) or (min-width: 1200px) {}
+   :                                         ^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x MediaCondition
+   ,-[$DIR/tests/recovery/at-rule/media/condition-and-or/input.css:1:1]
+ 1 | @media screen and (min-width: 900px) or (min-width: 1200px) {}
+   :                                         ^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x MediaConditionAllType
+   ,-[$DIR/tests/recovery/at-rule/media/condition-and-or/input.css:1:1]
+ 1 | @media screen and (min-width: 900px) or (min-width: 1200px) {}
+   :                                         ^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x MediaInParens
+   ,-[$DIR/tests/recovery/at-rule/media/condition-and-or/input.css:1:1]
+ 1 | @media screen and (min-width: 900px) or (min-width: 1200px) {}
+   :                                         ^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x MediaFeature
+   ,-[$DIR/tests/recovery/at-rule/media/condition-and-or/input.css:1:1]
+ 1 | @media screen and (min-width: 900px) or (min-width: 1200px) {}
+   :                                         ^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x MediaFeaturePlain
+   ,-[$DIR/tests/recovery/at-rule/media/condition-and-or/input.css:1:1]
+ 1 | @media screen and (min-width: 900px) or (min-width: 1200px) {}
+   :                                         ^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x MediaFeatureName
+   ,-[$DIR/tests/recovery/at-rule/media/condition-and-or/input.css:1:1]
+ 1 | @media screen and (min-width: 900px) or (min-width: 1200px) {}
+   :                                          ^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/condition-and-or/input.css:1:1]
+ 1 | @media screen and (min-width: 900px) or (min-width: 1200px) {}
+   :                                          ^^^^^^^^^
+   `----
+
+  x MediaFeatureValue
+   ,-[$DIR/tests/recovery/at-rule/media/condition-and-or/input.css:1:1]
+ 1 | @media screen and (min-width: 900px) or (min-width: 1200px) {}
+   :                                                     ^^^^^^
+   `----
+
+  x Dimension
+   ,-[$DIR/tests/recovery/at-rule/media/condition-and-or/input.css:1:1]
+ 1 | @media screen and (min-width: 900px) or (min-width: 1200px) {}
+   :                                                     ^^^^^^
+   `----
+
+  x Length
+   ,-[$DIR/tests/recovery/at-rule/media/condition-and-or/input.css:1:1]
+ 1 | @media screen and (min-width: 900px) or (min-width: 1200px) {}
+   :                                                     ^^^^^^
+   `----
+
+  x Number
+   ,-[$DIR/tests/recovery/at-rule/media/condition-and-or/input.css:1:1]
+ 1 | @media screen and (min-width: 900px) or (min-width: 1200px) {}
+   :                                                     ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/condition-and-or/input.css:1:1]
+ 1 | @media screen and (min-width: 900px) or (min-width: 1200px) {}
+   :                                                         ^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/condition-and-or/input.css:1:1]
+ 1 | @media screen and (min-width: 900px) or (min-width: 1200px) {}
+   :                                                             ^^
+   `----

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

@@ -0,0 +1,102 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/media/condition/input.css:1:1]
+ 1 | @media (update: slow) unknown (hover: none) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/media/condition/input.css:1:1]
+ 1 | @media (update: slow) unknown (hover: none) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/media/condition/input.css:1:1]
+ 1 | @media (update: slow) unknown (hover: none) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/media/condition/input.css:1:1]
+ 1 | @media (update: slow) unknown (hover: none) {}
+   :  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/condition/input.css:1:1]
+ 1 | @media (update: slow) unknown (hover: none) {}
+   :  ^^^^^
+   `----
+
+  x MediaQueryList
+   ,-[$DIR/tests/recovery/at-rule/media/condition/input.css:1:1]
+ 1 | @media (update: slow) unknown (hover: none) {}
+   :                               ^^^^^^^^^^^^^
+   `----
+
+  x MediaQuery
+   ,-[$DIR/tests/recovery/at-rule/media/condition/input.css:1:1]
+ 1 | @media (update: slow) unknown (hover: none) {}
+   :                               ^^^^^^^^^^^^^
+   `----
+
+  x MediaCondition
+   ,-[$DIR/tests/recovery/at-rule/media/condition/input.css:1:1]
+ 1 | @media (update: slow) unknown (hover: none) {}
+   :                               ^^^^^^^^^^^^^
+   `----
+
+  x MediaConditionAllType
+   ,-[$DIR/tests/recovery/at-rule/media/condition/input.css:1:1]
+ 1 | @media (update: slow) unknown (hover: none) {}
+   :                               ^^^^^^^^^^^^^
+   `----
+
+  x MediaInParens
+   ,-[$DIR/tests/recovery/at-rule/media/condition/input.css:1:1]
+ 1 | @media (update: slow) unknown (hover: none) {}
+   :                               ^^^^^^^^^^^^^
+   `----
+
+  x MediaFeature
+   ,-[$DIR/tests/recovery/at-rule/media/condition/input.css:1:1]
+ 1 | @media (update: slow) unknown (hover: none) {}
+   :                               ^^^^^^^^^^^^^
+   `----
+
+  x MediaFeaturePlain
+   ,-[$DIR/tests/recovery/at-rule/media/condition/input.css:1:1]
+ 1 | @media (update: slow) unknown (hover: none) {}
+   :                               ^^^^^^^^^^^^^
+   `----
+
+  x MediaFeatureName
+   ,-[$DIR/tests/recovery/at-rule/media/condition/input.css:1:1]
+ 1 | @media (update: slow) unknown (hover: none) {}
+   :                                ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/condition/input.css:1:1]
+ 1 | @media (update: slow) unknown (hover: none) {}
+   :                                ^^^^^
+   `----
+
+  x MediaFeatureValue
+   ,-[$DIR/tests/recovery/at-rule/media/condition/input.css:1:1]
+ 1 | @media (update: slow) unknown (hover: none) {}
+   :                                       ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/condition/input.css:1:1]
+ 1 | @media (update: slow) unknown (hover: none) {}
+   :                                       ^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/condition/input.css:1:1]
+ 1 | @media (update: slow) unknown (hover: none) {}
+   :                                             ^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/media/feature-name-1/span.rust-debug

@@ -0,0 +1,108 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-1/input.css:1:1]
+ 1 | @media (20px: 20px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-1/input.css:1:1]
+ 1 | @media (20px: 20px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-1/input.css:1:1]
+ 1 | @media (20px: 20px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-1/input.css:1:1]
+ 1 | @media (20px: 20px) {}
+   :  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-1/input.css:1:1]
+ 1 | @media (20px: 20px) {}
+   :  ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-1/input.css:1:1]
+ 1 | @media (20px: 20px) {}
+   :       ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-1/input.css:1:1]
+ 1 | @media (20px: 20px) {}
+   :       ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-1/input.css:1:1]
+ 1 | @media (20px: 20px) {}
+   :        ^^^^^^^^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-1/input.css:1:1]
+ 1 | @media (20px: 20px) {}
+   :        ^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-1/input.css:1:1]
+ 1 | @media (20px: 20px) {}
+   :         ^^^^
+   `----
+
+  x Dimension { value: 20.0, raw_value: Atom('20' type=inline), unit: Atom('px' type=inline), raw_unit: Atom('px' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-1/input.css:1:1]
+ 1 | @media (20px: 20px) {}
+   :         ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-1/input.css:1:1]
+ 1 | @media (20px: 20px) {}
+   :             ^
+   `----
+
+  x Colon
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-1/input.css:1:1]
+ 1 | @media (20px: 20px) {}
+   :             ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-1/input.css:1:1]
+ 1 | @media (20px: 20px) {}
+   :              ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-1/input.css:1:1]
+ 1 | @media (20px: 20px) {}
+   :              ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-1/input.css:1:1]
+ 1 | @media (20px: 20px) {}
+   :               ^^^^
+   `----
+
+  x Dimension { value: 20.0, raw_value: Atom('20' type=inline), unit: Atom('px' type=inline), raw_unit: Atom('px' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-1/input.css:1:1]
+ 1 | @media (20px: 20px) {}
+   :               ^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-1/input.css:1:1]
+ 1 | @media (20px: 20px) {}
+   :                     ^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/media/feature-name-2/span.rust-debug

@@ -0,0 +1,72 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-2/input.css:1:1]
+ 1 | @media ("string") {}
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-2/input.css:1:1]
+ 1 | @media ("string") {}
+   : ^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-2/input.css:1:1]
+ 1 | @media ("string") {}
+   : ^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-2/input.css:1:1]
+ 1 | @media ("string") {}
+   :  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-2/input.css:1:1]
+ 1 | @media ("string") {}
+   :  ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-2/input.css:1:1]
+ 1 | @media ("string") {}
+   :       ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-2/input.css:1:1]
+ 1 | @media ("string") {}
+   :       ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-2/input.css:1:1]
+ 1 | @media ("string") {}
+   :        ^^^^^^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-2/input.css:1:1]
+ 1 | @media ("string") {}
+   :        ^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-2/input.css:1:1]
+ 1 | @media ("string") {}
+   :         ^^^^^^^^
+   `----
+
+  x String { value: Atom('string' type=static), raw: Atom('"string"' type=dynamic) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-2/input.css:1:1]
+ 1 | @media ("string") {}
+   :         ^^^^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name-2/input.css:1:1]
+ 1 | @media ("string") {}
+   :                   ^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/media/feature-name/span.rust-debug

@@ -0,0 +1,108 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name/input.css:1:1]
+ 1 | @media ("min-width": 20px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name/input.css:1:1]
+ 1 | @media ("min-width": 20px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name/input.css:1:1]
+ 1 | @media ("min-width": 20px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name/input.css:1:1]
+ 1 | @media ("min-width": 20px) {}
+   :  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name/input.css:1:1]
+ 1 | @media ("min-width": 20px) {}
+   :  ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name/input.css:1:1]
+ 1 | @media ("min-width": 20px) {}
+   :       ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name/input.css:1:1]
+ 1 | @media ("min-width": 20px) {}
+   :       ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name/input.css:1:1]
+ 1 | @media ("min-width": 20px) {}
+   :        ^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name/input.css:1:1]
+ 1 | @media ("min-width": 20px) {}
+   :        ^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name/input.css:1:1]
+ 1 | @media ("min-width": 20px) {}
+   :         ^^^^^^^^^^^
+   `----
+
+  x String { value: Atom('min-width' type=dynamic), raw: Atom('"min-width"' type=dynamic) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name/input.css:1:1]
+ 1 | @media ("min-width": 20px) {}
+   :         ^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name/input.css:1:1]
+ 1 | @media ("min-width": 20px) {}
+   :                    ^
+   `----
+
+  x Colon
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name/input.css:1:1]
+ 1 | @media ("min-width": 20px) {}
+   :                    ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name/input.css:1:1]
+ 1 | @media ("min-width": 20px) {}
+   :                     ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name/input.css:1:1]
+ 1 | @media ("min-width": 20px) {}
+   :                     ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name/input.css:1:1]
+ 1 | @media ("min-width": 20px) {}
+   :                      ^^^^
+   `----
+
+  x Dimension { value: 20.0, raw_value: Atom('20' type=inline), unit: Atom('px' type=inline), raw_unit: Atom('px' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name/input.css:1:1]
+ 1 | @media ("min-width": 20px) {}
+   :                      ^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/feature-name/input.css:1:1]
+ 1 | @media ("min-width": 20px) {}
+   :                            ^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/media/feature-range-1/span.rust-debug

@@ -0,0 +1,132 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-1/input.css:1:1]
+ 1 | @media (height << 600px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-1/input.css:1:1]
+ 1 | @media (height << 600px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-1/input.css:1:1]
+ 1 | @media (height << 600px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-1/input.css:1:1]
+ 1 | @media (height << 600px) {}
+   :  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-1/input.css:1:1]
+ 1 | @media (height << 600px) {}
+   :  ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-1/input.css:1:1]
+ 1 | @media (height << 600px) {}
+   :       ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-1/input.css:1:1]
+ 1 | @media (height << 600px) {}
+   :       ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-1/input.css:1:1]
+ 1 | @media (height << 600px) {}
+   :        ^^^^^^^^^^^^^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-1/input.css:1:1]
+ 1 | @media (height << 600px) {}
+   :        ^^^^^^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-1/input.css:1:1]
+ 1 | @media (height << 600px) {}
+   :         ^^^^^^
+   `----
+
+  x Ident { value: Atom('height' type=inline), raw: Atom('height' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-1/input.css:1:1]
+ 1 | @media (height << 600px) {}
+   :         ^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-1/input.css:1:1]
+ 1 | @media (height << 600px) {}
+   :               ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-1/input.css:1:1]
+ 1 | @media (height << 600px) {}
+   :               ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-1/input.css:1:1]
+ 1 | @media (height << 600px) {}
+   :                ^
+   `----
+
+  x Delim { value: '<' }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-1/input.css:1:1]
+ 1 | @media (height << 600px) {}
+   :                ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-1/input.css:1:1]
+ 1 | @media (height << 600px) {}
+   :                 ^
+   `----
+
+  x Delim { value: '<' }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-1/input.css:1:1]
+ 1 | @media (height << 600px) {}
+   :                 ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-1/input.css:1:1]
+ 1 | @media (height << 600px) {}
+   :                  ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-1/input.css:1:1]
+ 1 | @media (height << 600px) {}
+   :                  ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-1/input.css:1:1]
+ 1 | @media (height << 600px) {}
+   :                   ^^^^^
+   `----
+
+  x Dimension { value: 600.0, raw_value: Atom('600' type=inline), unit: Atom('px' type=inline), raw_unit: Atom('px' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-1/input.css:1:1]
+ 1 | @media (height << 600px) {}
+   :                   ^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-1/input.css:1:1]
+ 1 | @media (height << 600px) {}
+   :                          ^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/media/feature-range-2/span.rust-debug

@@ -0,0 +1,168 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   :  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   :  ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   :       ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   :       ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   :        ^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   :        ^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   :         ^^^^^
+   `----
+
+  x Dimension { value: 400.0, raw_value: Atom('400' type=inline), unit: Atom('px' type=inline), raw_unit: Atom('px' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   :         ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   :              ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   :              ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   :               ^
+   `----
+
+  x Delim { value: '>' }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   :               ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   :                ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   :                ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   :                 ^^^^^^^
+   `----
+
+  x String { value: Atom('width' type=inline), raw: Atom('"width"' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   :                 ^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   :                        ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   :                        ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   :                         ^
+   `----
+
+  x Delim { value: '>' }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   :                         ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   :                          ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   :                          ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   :                           ^^^^^
+   `----
+
+  x Dimension { value: 700.0, raw_value: Atom('700' type=inline), unit: Atom('px' type=inline), raw_unit: Atom('px' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   :                           ^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-2/input.css:1:1]
+ 1 | @media (400px > "width" > 700px) {}
+   :                                  ^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/media/feature-range-3/span.rust-debug

@@ -0,0 +1,216 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :  ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :       ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :       ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :        ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :        ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :         ^^^^^
+   `----
+
+  x Dimension { value: 400.0, raw_value: Atom('400' type=inline), unit: Atom('px' type=inline), raw_unit: Atom('px' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :         ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :              ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :              ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :               ^
+   `----
+
+  x Delim { value: '>' }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :               ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :                ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :                ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :                 ^
+   `----
+
+  x Delim { value: '=' }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :                 ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :                  ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :                  ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :                   ^^^^^
+   `----
+
+  x Ident { value: Atom('width' type=inline), raw: Atom('width' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :                   ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :                        ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :                        ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :                         ^
+   `----
+
+  x Delim { value: '>' }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :                         ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :                          ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :                          ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :                           ^
+   `----
+
+  x Delim { value: '=' }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :                           ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :                            ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :                            ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :                             ^^^^^
+   `----
+
+  x Dimension { value: 700.0, raw_value: Atom('700' type=inline), unit: Atom('px' type=inline), raw_unit: Atom('px' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :                             ^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-3/input.css:1:1]
+ 1 | @media (400px > = width > = 700px) {}
+   :                                    ^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/media/feature-range-4/span.rust-debug

@@ -0,0 +1,180 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :  ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :       ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :       ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :        ^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :        ^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :         ^^^^^
+   `----
+
+  x Dimension { value: 400.0, raw_value: Atom('400' type=inline), unit: Atom('px' type=inline), raw_unit: Atom('px' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :         ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :              ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :              ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :               ^
+   `----
+
+  x Delim { value: '>' }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :               ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :                ^
+   `----
+
+  x Delim { value: '=' }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :                ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :                 ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :                 ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :                  ^^^^^
+   `----
+
+  x Ident { value: Atom('width' type=inline), raw: Atom('width' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :                  ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :                       ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :                       ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :                        ^
+   `----
+
+  x Delim { value: '!' }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :                        ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :                         ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :                         ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :                          ^^^^^
+   `----
+
+  x Dimension { value: 700.0, raw_value: Atom('700' type=inline), unit: Atom('px' type=inline), raw_unit: Atom('px' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :                          ^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-4/input.css:1:1]
+ 1 | @media (400px >= width ! 700px) {}
+   :                                 ^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/media/feature-range-5/span.rust-debug

@@ -0,0 +1,192 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :  ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :       ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :       ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :        ^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :        ^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :         ^^^^^
+   `----
+
+  x Dimension { value: 400.0, raw_value: Atom('400' type=inline), unit: Atom('px' type=inline), raw_unit: Atom('px' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :         ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :              ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :              ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :               ^
+   `----
+
+  x Delim { value: '<' }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :               ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :                ^
+   `----
+
+  x Delim { value: '=' }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :                ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :                 ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :                 ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :                  ^^^^^
+   `----
+
+  x Ident { value: Atom('width' type=inline), raw: Atom('width' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :                  ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :                       ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :                       ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :                        ^
+   `----
+
+  x Delim { value: '>' }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :                        ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :                         ^
+   `----
+
+  x Delim { value: '=' }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :                         ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :                          ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :                          ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :                           ^^^^^
+   `----
+
+  x Dimension { value: 700.0, raw_value: Atom('700' type=inline), unit: Atom('px' type=inline), raw_unit: Atom('px' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :                           ^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-5/input.css:1:1]
+ 1 | @media (400px <= width >= 700px) {}
+   :                                  ^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/media/feature-range-6/span.rust-debug

@@ -0,0 +1,192 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :  ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :       ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :       ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :        ^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :        ^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :         ^^^^^
+   `----
+
+  x Dimension { value: 400.0, raw_value: Atom('400' type=inline), unit: Atom('px' type=inline), raw_unit: Atom('px' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :         ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :              ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :              ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :               ^
+   `----
+
+  x Delim { value: '>' }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :               ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :                ^
+   `----
+
+  x Delim { value: '=' }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :                ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :                 ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :                 ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :                  ^^^^^
+   `----
+
+  x Ident { value: Atom('width' type=inline), raw: Atom('width' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :                  ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :                       ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :                       ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :                        ^
+   `----
+
+  x Delim { value: '<' }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :                        ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :                         ^
+   `----
+
+  x Delim { value: '=' }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :                         ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :                          ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :                          ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :                           ^^^^^
+   `----
+
+  x Dimension { value: 700.0, raw_value: Atom('700' type=inline), unit: Atom('px' type=inline), raw_unit: Atom('px' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :                           ^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range-6/input.css:1:1]
+ 1 | @media (400px >= width <= 700px) {}
+   :                                  ^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/media/feature-range/span.rust-debug

@@ -0,0 +1,120 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range/input.css:1:1]
+ 1 | @media (height + 600px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range/input.css:1:1]
+ 1 | @media (height + 600px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range/input.css:1:1]
+ 1 | @media (height + 600px) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range/input.css:1:1]
+ 1 | @media (height + 600px) {}
+   :  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range/input.css:1:1]
+ 1 | @media (height + 600px) {}
+   :  ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range/input.css:1:1]
+ 1 | @media (height + 600px) {}
+   :       ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range/input.css:1:1]
+ 1 | @media (height + 600px) {}
+   :       ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range/input.css:1:1]
+ 1 | @media (height + 600px) {}
+   :        ^^^^^^^^^^^^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range/input.css:1:1]
+ 1 | @media (height + 600px) {}
+   :        ^^^^^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range/input.css:1:1]
+ 1 | @media (height + 600px) {}
+   :         ^^^^^^
+   `----
+
+  x Ident { value: Atom('height' type=inline), raw: Atom('height' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range/input.css:1:1]
+ 1 | @media (height + 600px) {}
+   :         ^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range/input.css:1:1]
+ 1 | @media (height + 600px) {}
+   :               ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range/input.css:1:1]
+ 1 | @media (height + 600px) {}
+   :               ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range/input.css:1:1]
+ 1 | @media (height + 600px) {}
+   :                ^
+   `----
+
+  x Delim { value: '+' }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range/input.css:1:1]
+ 1 | @media (height + 600px) {}
+   :                ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range/input.css:1:1]
+ 1 | @media (height + 600px) {}
+   :                 ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range/input.css:1:1]
+ 1 | @media (height + 600px) {}
+   :                 ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range/input.css:1:1]
+ 1 | @media (height + 600px) {}
+   :                  ^^^^^
+   `----
+
+  x Dimension { value: 600.0, raw_value: Atom('600' type=inline), unit: Atom('px' type=inline), raw_unit: Atom('px' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range/input.css:1:1]
+ 1 | @media (height + 600px) {}
+   :                  ^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/feature-range/input.css:1:1]
+ 1 | @media (height + 600px) {}
+   :                         ^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/media/feature-value-missing/span.rust-debug

@@ -0,0 +1,144 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/media/feature-value-missing/input.css:1:1]
+ 1 | @media screen and (min-width: ) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/media/feature-value-missing/input.css:1:1]
+ 1 | @media screen and (min-width: ) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/media/feature-value-missing/input.css:1:1]
+ 1 | @media screen and (min-width: ) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/media/feature-value-missing/input.css:1:1]
+ 1 | @media screen and (min-width: ) {}
+   :  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/feature-value-missing/input.css:1:1]
+ 1 | @media screen and (min-width: ) {}
+   :  ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-value-missing/input.css:1:1]
+ 1 | @media screen and (min-width: ) {}
+   :       ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-value-missing/input.css:1:1]
+ 1 | @media screen and (min-width: ) {}
+   :       ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-value-missing/input.css:1:1]
+ 1 | @media screen and (min-width: ) {}
+   :        ^^^^^^
+   `----
+
+  x Ident { value: Atom('screen' type=inline), raw: Atom('screen' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-value-missing/input.css:1:1]
+ 1 | @media screen and (min-width: ) {}
+   :        ^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-value-missing/input.css:1:1]
+ 1 | @media screen and (min-width: ) {}
+   :              ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-value-missing/input.css:1:1]
+ 1 | @media screen and (min-width: ) {}
+   :              ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-value-missing/input.css:1:1]
+ 1 | @media screen and (min-width: ) {}
+   :               ^^^
+   `----
+
+  x Ident { value: Atom('and' type=static), raw: Atom('and' type=static) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-value-missing/input.css:1:1]
+ 1 | @media screen and (min-width: ) {}
+   :               ^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-value-missing/input.css:1:1]
+ 1 | @media screen and (min-width: ) {}
+   :                  ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-value-missing/input.css:1:1]
+ 1 | @media screen and (min-width: ) {}
+   :                  ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-value-missing/input.css:1:1]
+ 1 | @media screen and (min-width: ) {}
+   :                   ^^^^^^^^^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/feature-value-missing/input.css:1:1]
+ 1 | @media screen and (min-width: ) {}
+   :                   ^^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-value-missing/input.css:1:1]
+ 1 | @media screen and (min-width: ) {}
+   :                    ^^^^^^^^^
+   `----
+
+  x Ident { value: Atom('min-width' type=dynamic), raw: Atom('min-width' type=dynamic) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-value-missing/input.css:1:1]
+ 1 | @media screen and (min-width: ) {}
+   :                    ^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-value-missing/input.css:1:1]
+ 1 | @media screen and (min-width: ) {}
+   :                             ^
+   `----
+
+  x Colon
+   ,-[$DIR/tests/recovery/at-rule/media/feature-value-missing/input.css:1:1]
+ 1 | @media screen and (min-width: ) {}
+   :                             ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature-value-missing/input.css:1:1]
+ 1 | @media screen and (min-width: ) {}
+   :                              ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature-value-missing/input.css:1:1]
+ 1 | @media screen and (min-width: ) {}
+   :                              ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/feature-value-missing/input.css:1:1]
+ 1 | @media screen and (min-width: ) {}
+   :                                 ^^
+   `----

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

@@ -0,0 +1,84 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/media/feature/input.css:1:1]
+ 1 | @media screen and {}
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/media/feature/input.css:1:1]
+ 1 | @media screen and {}
+   : ^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/media/feature/input.css:1:1]
+ 1 | @media screen and {}
+   : ^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/media/feature/input.css:1:1]
+ 1 | @media screen and {}
+   :  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/feature/input.css:1:1]
+ 1 | @media screen and {}
+   :  ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature/input.css:1:1]
+ 1 | @media screen and {}
+   :       ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature/input.css:1:1]
+ 1 | @media screen and {}
+   :       ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature/input.css:1:1]
+ 1 | @media screen and {}
+   :        ^^^^^^
+   `----
+
+  x Ident { value: Atom('screen' type=inline), raw: Atom('screen' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature/input.css:1:1]
+ 1 | @media screen and {}
+   :        ^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature/input.css:1:1]
+ 1 | @media screen and {}
+   :              ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature/input.css:1:1]
+ 1 | @media screen and {}
+   :              ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/feature/input.css:1:1]
+ 1 | @media screen and {}
+   :               ^^^
+   `----
+
+  x Ident { value: Atom('and' type=static), raw: Atom('and' type=static) }
+   ,-[$DIR/tests/recovery/at-rule/media/feature/input.css:1:1]
+ 1 | @media screen and {}
+   :               ^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/feature/input.css:1:1]
+ 1 | @media screen and {}
+   :                   ^^
+   `----

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

@@ -0,0 +1,172 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:1:1]
+ 1 | ,-> @media (min-width: 480px) {
+ 2 | |       max-inline-size: 1024px;
+ 3 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:1:1]
+ 1 | ,-> @media (min-width: 480px) {
+ 2 | |       max-inline-size: 1024px;
+ 3 | `-> }
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:1:1]
+ 1 | ,-> @media (min-width: 480px) {
+ 2 | |       max-inline-size: 1024px;
+ 3 | `-> }
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:1:1]
+ 1 | @media (min-width: 480px) {
+   :  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:1:1]
+ 1 | @media (min-width: 480px) {
+   :  ^^^^^
+   `----
+
+  x MediaQueryList
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:1:1]
+ 1 | @media (min-width: 480px) {
+   :        ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x MediaQuery
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:1:1]
+ 1 | @media (min-width: 480px) {
+   :        ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x MediaCondition
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:1:1]
+ 1 | @media (min-width: 480px) {
+   :        ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x MediaConditionAllType
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:1:1]
+ 1 | @media (min-width: 480px) {
+   :        ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x MediaInParens
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:1:1]
+ 1 | @media (min-width: 480px) {
+   :        ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x MediaFeature
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:1:1]
+ 1 | @media (min-width: 480px) {
+   :        ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x MediaFeaturePlain
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:1:1]
+ 1 | @media (min-width: 480px) {
+   :        ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x MediaFeatureName
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:1:1]
+ 1 | @media (min-width: 480px) {
+   :         ^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:1:1]
+ 1 | @media (min-width: 480px) {
+   :         ^^^^^^^^^
+   `----
+
+  x MediaFeatureValue
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:1:1]
+ 1 | @media (min-width: 480px) {
+   :                    ^^^^^
+   `----
+
+  x Dimension
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:1:1]
+ 1 | @media (min-width: 480px) {
+   :                    ^^^^^
+   `----
+
+  x Length
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:1:1]
+ 1 | @media (min-width: 480px) {
+   :                    ^^^^^
+   `----
+
+  x Number
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:1:1]
+ 1 | @media (min-width: 480px) {
+   :                    ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:1:1]
+ 1 | @media (min-width: 480px) {
+   :                       ^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:1:1]
+ 1 | ,-> @media (min-width: 480px) {
+ 2 | |       max-inline-size: 1024px;
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:2:5]
+ 2 | max-inline-size: 1024px;
+   : ^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:2:5]
+ 2 | max-inline-size: 1024px;
+   : ^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Tokens
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:2:5]
+ 2 | max-inline-size: 1024px;
+   : ^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Ident { value: Atom('max-inline-size' type=dynamic), raw: Atom('max-inline-size' type=dynamic) }
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:2:5]
+ 2 | max-inline-size: 1024px;
+   : ^^^^^^^^^^^^^^^
+   `----
+
+  x Colon
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:2:5]
+ 2 | max-inline-size: 1024px;
+   :                ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:2:5]
+ 2 | max-inline-size: 1024px;
+   :                 ^
+   `----
+
+  x Dimension { value: 1024.0, raw_value: Atom('1024' type=inline), unit: Atom('px' type=inline), raw_unit: Atom('px' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:2:5]
+ 2 | max-inline-size: 1024px;
+   :                  ^^^^^^
+   `----
+
+  x Semi
+   ,-[$DIR/tests/recovery/at-rule/media/invalid-nesting/input.css:2:5]
+ 2 | max-inline-size: 1024px;
+   :                        ^
+   `----

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

@@ -0,0 +1,120 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/media/ratio/input.css:1:1]
+ 1 | @media (aspect-ratio: 12/) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/media/ratio/input.css:1:1]
+ 1 | @media (aspect-ratio: 12/) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/media/ratio/input.css:1:1]
+ 1 | @media (aspect-ratio: 12/) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/media/ratio/input.css:1:1]
+ 1 | @media (aspect-ratio: 12/) {}
+   :  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/ratio/input.css:1:1]
+ 1 | @media (aspect-ratio: 12/) {}
+   :  ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/ratio/input.css:1:1]
+ 1 | @media (aspect-ratio: 12/) {}
+   :       ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/ratio/input.css:1:1]
+ 1 | @media (aspect-ratio: 12/) {}
+   :       ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/ratio/input.css:1:1]
+ 1 | @media (aspect-ratio: 12/) {}
+   :        ^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/ratio/input.css:1:1]
+ 1 | @media (aspect-ratio: 12/) {}
+   :        ^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/ratio/input.css:1:1]
+ 1 | @media (aspect-ratio: 12/) {}
+   :         ^^^^^^^^^^^^
+   `----
+
+  x Ident { value: Atom('aspect-ratio' type=dynamic), raw: Atom('aspect-ratio' type=dynamic) }
+   ,-[$DIR/tests/recovery/at-rule/media/ratio/input.css:1:1]
+ 1 | @media (aspect-ratio: 12/) {}
+   :         ^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/ratio/input.css:1:1]
+ 1 | @media (aspect-ratio: 12/) {}
+   :                     ^
+   `----
+
+  x Colon
+   ,-[$DIR/tests/recovery/at-rule/media/ratio/input.css:1:1]
+ 1 | @media (aspect-ratio: 12/) {}
+   :                     ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/ratio/input.css:1:1]
+ 1 | @media (aspect-ratio: 12/) {}
+   :                      ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/ratio/input.css:1:1]
+ 1 | @media (aspect-ratio: 12/) {}
+   :                      ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/ratio/input.css:1:1]
+ 1 | @media (aspect-ratio: 12/) {}
+   :                       ^^
+   `----
+
+  x Number { value: 12.0, raw: Atom('12' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/at-rule/media/ratio/input.css:1:1]
+ 1 | @media (aspect-ratio: 12/) {}
+   :                       ^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/ratio/input.css:1:1]
+ 1 | @media (aspect-ratio: 12/) {}
+   :                         ^
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/recovery/at-rule/media/ratio/input.css:1:1]
+ 1 | @media (aspect-ratio: 12/) {}
+   :                         ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/ratio/input.css:1:1]
+ 1 | @media (aspect-ratio: 12/) {}
+   :                            ^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/media/wrong-stylesheet/span.rust-debug

@@ -0,0 +1,230 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:1:1]
+ 1 | ,-> @media print {
+ 2 | |       color: teal;
+ 3 | |       main {
+ 4 | |           color: orange;
+ 5 | |       }
+ 6 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:1:1]
+ 1 | ,-> @media print {
+ 2 | |       color: teal;
+ 3 | |       main {
+ 4 | |           color: orange;
+ 5 | |       }
+ 6 | `-> }
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:1:1]
+ 1 | ,-> @media print {
+ 2 | |       color: teal;
+ 3 | |       main {
+ 4 | |           color: orange;
+ 5 | |       }
+ 6 | `-> }
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:1:1]
+ 1 | @media print {
+   :  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:1:1]
+ 1 | @media print {
+   :  ^^^^^
+   `----
+
+  x MediaQueryList
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:1:1]
+ 1 | @media print {
+   :        ^^^^^
+   `----
+
+  x MediaQuery
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:1:1]
+ 1 | @media print {
+   :        ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:1:1]
+ 1 | @media print {
+   :        ^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:1:1]
+ 1 | ,-> @media print {
+ 2 | |       color: teal;
+ 3 | |       main {
+ 4 | |           color: orange;
+ 5 | |       }
+ 6 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:2:5]
+ 2 | color: teal;
+   : ^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:2:5]
+ 2 | color: teal;
+   : ^^^^^^^^^^^^
+   `----
+
+  x Tokens
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:2:5]
+ 2 | color: teal;
+   : ^^^^^^^^^^^^
+   `----
+
+  x Ident { value: Atom('color' type=inline), raw: Atom('color' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:2:5]
+ 2 | color: teal;
+   : ^^^^^
+   `----
+
+  x Colon
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:2:5]
+ 2 | color: teal;
+   :      ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:2:5]
+ 2 | color: teal;
+   :       ^
+   `----
+
+  x Ident { value: Atom('teal' type=inline), raw: Atom('teal' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:2:5]
+ 2 | color: teal;
+   :        ^^^^
+   `----
+
+  x Semi
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:2:5]
+ 2 | color: teal;
+   :            ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:3:5]
+ 3 | ,-> main {
+ 4 | |           color: orange;
+ 5 | `->     }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:3:5]
+ 3 | ,-> main {
+ 4 | |           color: orange;
+ 5 | `->     }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:3:5]
+ 3 | ,-> main {
+ 4 | |           color: orange;
+ 5 | `->     }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:3:5]
+ 3 | main {
+   : ^^^^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:3:5]
+ 3 | main {
+   : ^^^^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:3:5]
+ 3 | main {
+   : ^^^^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:3:5]
+ 3 | main {
+   : ^^^^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:3:5]
+ 3 | main {
+   : ^^^^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:3:5]
+ 3 | main {
+   : ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:3:5]
+ 3 | main {
+   : ^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:3:5]
+ 3 | ,-> main {
+ 4 | |           color: orange;
+ 5 | `->     }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:4:9]
+ 4 | color: orange;
+   : ^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:4:9]
+ 4 | color: orange;
+   : ^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:4:9]
+ 4 | color: orange;
+   : ^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:4:9]
+ 4 | color: orange;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:4:9]
+ 4 | color: orange;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:4:9]
+ 4 | color: orange;
+   :        ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:4:9]
+ 4 | color: orange;
+   :        ^^^^^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/no-semi/span.rust-debug

@@ -0,0 +1,168 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:1:1]
+ 1 | ,-> @media screen {@content}
+ 2 | |   
+ 3 | `-> @charset "UTF-8"
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:1:1]
+ 1 | ,-> @media screen {@content}
+ 2 | |   
+ 3 | `-> @charset "UTF-8"
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:1:1]
+ 1 | ,-> @media screen {@content}
+ 2 | |   
+ 3 | `-> @charset "UTF-8"
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:1:1]
+ 1 | @media screen {@content}
+   :  ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:1:1]
+ 1 | @media screen {@content}
+   :  ^^^^^
+   `----
+
+  x MediaQueryList
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:1:1]
+ 1 | @media screen {@content}
+   :        ^^^^^^
+   `----
+
+  x MediaQuery
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:1:1]
+ 1 | @media screen {@content}
+   :        ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:1:1]
+ 1 | @media screen {@content}
+   :        ^^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:1:1]
+ 1 | ,-> @media screen {@content}
+ 2 | |   
+ 3 | `-> @charset "UTF-8"
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:1:1]
+ 1 | ,-> @media screen {@content}
+ 2 | |   
+ 3 | `-> @charset "UTF-8"
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:1:1]
+ 1 | ,-> @media screen {@content}
+ 2 | |   
+ 3 | `-> @charset "UTF-8"
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:1:1]
+ 1 | ,-> @media screen {@content}
+ 2 | |   
+ 3 | `-> @charset "UTF-8"
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:1:1]
+ 1 | @media screen {@content}
+   :                 ^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:1:1]
+ 1 | @media screen {@content}
+   :                 ^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:1:1]
+ 1 | @media screen {@content}
+   :                        ^
+   `----
+
+  x RBrace
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:1:1]
+ 1 | @media screen {@content}
+   :                        ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:1:1]
+ 1 | ,-> @media screen {@content}
+ 2 | `-> 
+ 3 |     @charset "UTF-8"
+   `----
+
+  x WhiteSpace { value: Atom('
+  | 
+  | ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:1:1]
+ 1 | ,-> @media screen {@content}
+ 2 | `-> 
+ 3 |     @charset "UTF-8"
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:3:1]
+ 3 | @charset "UTF-8"
+   : ^^^^^^^^
+   `----
+
+  x AtKeyword { value: Atom('charset' type=inline), raw: Atom('charset' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:3:1]
+ 3 | @charset "UTF-8"
+   : ^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:3:1]
+ 3 | @charset "UTF-8"
+   :         ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:3:1]
+ 3 | @charset "UTF-8"
+   :         ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:3:1]
+ 3 | @charset "UTF-8"
+   :          ^^^^^^^
+   `----
+
+  x String { value: Atom('UTF-8' type=inline), raw: Atom('"UTF-8"' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:3:1]
+ 3 | @charset "UTF-8"
+   :          ^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:3:1]
+ 3 | @charset "UTF-8"
+   :                 ^
+   `----
+
+  x WhiteSpace { value: Atom('
+  | ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/no-semi/input.css:3:1]
+ 3 | @charset "UTF-8"
+   :                 ^
+   `----

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

@@ -0,0 +1,472 @@
+
+  x Stylesheet
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:1:1]
+  1 | ,-> @page :first {
+  2 | |       color: green;
+  3 | |   
+  4 | |       @top-left {
+  5 | |           content: "foo";
+  6 | |           color: blue;
+  7 | |       }
+  8 | |   
+  9 | |       @top-right {
+ 10 | |           @top-right {
+ 11 | |               content: "zzz";
+ 12 | |           }
+ 13 | |   
+ 14 | |           content: "bar";
+ 15 | |       }
+ 16 | |   
+ 17 | |       margin: 20px;
+ 18 | `-> }
+    `----
+
+  x Rule
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:1:1]
+  1 | ,-> @page :first {
+  2 | |       color: green;
+  3 | |   
+  4 | |       @top-left {
+  5 | |           content: "foo";
+  6 | |           color: blue;
+  7 | |       }
+  8 | |   
+  9 | |       @top-right {
+ 10 | |           @top-right {
+ 11 | |               content: "zzz";
+ 12 | |           }
+ 13 | |   
+ 14 | |           content: "bar";
+ 15 | |       }
+ 16 | |   
+ 17 | |       margin: 20px;
+ 18 | `-> }
+    `----
+
+  x AtRule
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:1:1]
+  1 | ,-> @page :first {
+  2 | |       color: green;
+  3 | |   
+  4 | |       @top-left {
+  5 | |           content: "foo";
+  6 | |           color: blue;
+  7 | |       }
+  8 | |   
+  9 | |       @top-right {
+ 10 | |           @top-right {
+ 11 | |               content: "zzz";
+ 12 | |           }
+ 13 | |   
+ 14 | |           content: "bar";
+ 15 | |       }
+ 16 | |   
+ 17 | |       margin: 20px;
+ 18 | `-> }
+    `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:1:1]
+ 1 | @page :first {
+   :  ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:1:1]
+ 1 | @page :first {
+   :  ^^^^
+   `----
+
+  x PageSelectorList
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:1:1]
+ 1 | @page :first {
+   :       ^^^^^^
+   `----
+
+  x PageSelector
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:1:1]
+ 1 | @page :first {
+   :       ^^^^^^
+   `----
+
+  x PageSelectorPseudo
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:1:1]
+ 1 | @page :first {
+   :       ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:1:1]
+ 1 | @page :first {
+   :        ^^^^^
+   `----
+
+  x SimpleBlock
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:1:1]
+  1 | ,-> @page :first {
+  2 | |       color: green;
+  3 | |   
+  4 | |       @top-left {
+  5 | |           content: "foo";
+  6 | |           color: blue;
+  7 | |       }
+  8 | |   
+  9 | |       @top-right {
+ 10 | |           @top-right {
+ 11 | |               content: "zzz";
+ 12 | |           }
+ 13 | |   
+ 14 | |           content: "bar";
+ 15 | |       }
+ 16 | |   
+ 17 | |       margin: 20px;
+ 18 | `-> }
+    `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:2:5]
+ 2 | color: green;
+   : ^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:2:5]
+ 2 | color: green;
+   : ^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:2:5]
+ 2 | color: green;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:2:5]
+ 2 | color: green;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:2:5]
+ 2 | color: green;
+   :        ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:2:5]
+ 2 | color: green;
+   :        ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:4:5]
+ 4 | ,-> @top-left {
+ 5 | |           content: "foo";
+ 6 | |           color: blue;
+ 7 | `->     }
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:4:5]
+ 4 | ,-> @top-left {
+ 5 | |           content: "foo";
+ 6 | |           color: blue;
+ 7 | `->     }
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:4:5]
+ 4 | @top-left {
+   :  ^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:4:5]
+ 4 | @top-left {
+   :  ^^^^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:4:5]
+ 4 | ,-> @top-left {
+ 5 | |           content: "foo";
+ 6 | |           color: blue;
+ 7 | `->     }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:5:9]
+ 5 | content: "foo";
+   : ^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:5:9]
+ 5 | content: "foo";
+   : ^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:5:9]
+ 5 | content: "foo";
+   : ^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:5:9]
+ 5 | content: "foo";
+   : ^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:5:9]
+ 5 | content: "foo";
+   :          ^^^^^
+   `----
+
+  x Str
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:5:9]
+ 5 | content: "foo";
+   :          ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:6:9]
+ 6 | color: blue;
+   : ^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:6:9]
+ 6 | color: blue;
+   : ^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:6:9]
+ 6 | color: blue;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:6:9]
+ 6 | color: blue;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:6:9]
+ 6 | color: blue;
+   :        ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:6:9]
+ 6 | color: blue;
+   :        ^^^^
+   `----
+
+  x ComponentValue
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:9:5]
+  9 | ,-> @top-right {
+ 10 | |           @top-right {
+ 11 | |               content: "zzz";
+ 12 | |           }
+ 13 | |   
+ 14 | |           content: "bar";
+ 15 | `->     }
+    `----
+
+  x AtRule
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:9:5]
+  9 | ,-> @top-right {
+ 10 | |           @top-right {
+ 11 | |               content: "zzz";
+ 12 | |           }
+ 13 | |   
+ 14 | |           content: "bar";
+ 15 | `->     }
+    `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:9:5]
+ 9 | @top-right {
+   :  ^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:9:5]
+ 9 | @top-right {
+   :  ^^^^^^^^^
+   `----
+
+  x SimpleBlock
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:9:5]
+  9 | ,-> @top-right {
+ 10 | |           @top-right {
+ 11 | |               content: "zzz";
+ 12 | |           }
+ 13 | |   
+ 14 | |           content: "bar";
+ 15 | `->     }
+    `----
+
+  x ComponentValue
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:10:9]
+ 10 | ,-> @top-right {
+ 11 | |               content: "zzz";
+ 12 | `->         }
+    `----
+
+  x AtRule
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:10:9]
+ 10 | ,-> @top-right {
+ 11 | |               content: "zzz";
+ 12 | `->         }
+    `----
+
+  x AtRuleName
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:10:9]
+ 10 | @top-right {
+    :  ^^^^^^^^^
+    `----
+
+  x Ident
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:10:9]
+ 10 | @top-right {
+    :  ^^^^^^^^^
+    `----
+
+  x SimpleBlock
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:10:9]
+ 10 | ,-> @top-right {
+ 11 | |               content: "zzz";
+ 12 | `->         }
+    `----
+
+  x ComponentValue
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:11:13]
+ 11 | content: "zzz";
+    : ^^^^^^^^^^^^^^
+    `----
+
+  x Declaration
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:11:13]
+ 11 | content: "zzz";
+    : ^^^^^^^^^^^^^^
+    `----
+
+  x DeclarationName
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:11:13]
+ 11 | content: "zzz";
+    : ^^^^^^^
+    `----
+
+  x Ident
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:11:13]
+ 11 | content: "zzz";
+    : ^^^^^^^
+    `----
+
+  x ComponentValue
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:11:13]
+ 11 | content: "zzz";
+    :          ^^^^^
+    `----
+
+  x Str
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:11:13]
+ 11 | content: "zzz";
+    :          ^^^^^
+    `----
+
+  x ComponentValue
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:14:9]
+ 14 | content: "bar";
+    : ^^^^^^^^^^^^^^
+    `----
+
+  x Declaration
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:14:9]
+ 14 | content: "bar";
+    : ^^^^^^^^^^^^^^
+    `----
+
+  x DeclarationName
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:14:9]
+ 14 | content: "bar";
+    : ^^^^^^^
+    `----
+
+  x Ident
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:14:9]
+ 14 | content: "bar";
+    : ^^^^^^^
+    `----
+
+  x ComponentValue
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:14:9]
+ 14 | content: "bar";
+    :          ^^^^^
+    `----
+
+  x Str
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:14:9]
+ 14 | content: "bar";
+    :          ^^^^^
+    `----
+
+  x ComponentValue
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:17:5]
+ 17 | margin: 20px;
+    : ^^^^^^^^^^^^
+    `----
+
+  x Declaration
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:17:5]
+ 17 | margin: 20px;
+    : ^^^^^^^^^^^^
+    `----
+
+  x DeclarationName
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:17:5]
+ 17 | margin: 20px;
+    : ^^^^^^
+    `----
+
+  x Ident
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:17:5]
+ 17 | margin: 20px;
+    : ^^^^^^
+    `----
+
+  x ComponentValue
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:17:5]
+ 17 | margin: 20px;
+    :         ^^^^
+    `----
+
+  x Dimension
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:17:5]
+ 17 | margin: 20px;
+    :         ^^^^
+    `----
+
+  x Length
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:17:5]
+ 17 | margin: 20px;
+    :         ^^^^
+    `----
+
+  x Number
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:17:5]
+ 17 | margin: 20px;
+    :         ^^
+    `----
+
+  x Ident
+    ,-[$DIR/tests/recovery/at-rule/page/invalid-nesting/input.css:17:5]
+ 17 | margin: 20px;
+    :           ^^
+    `----

crates/swc_css_parser/tests/recovery/at-rule/page/invalid-pseudo/span.rust-debug

@@ -0,0 +1,118 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-pseudo/input.css:1:1]
+ 1 | ,-> @page :unknown {
+ 2 | |       margin: 2cm;
+ 3 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-pseudo/input.css:1:1]
+ 1 | ,-> @page :unknown {
+ 2 | |       margin: 2cm;
+ 3 | `-> }
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-pseudo/input.css:1:1]
+ 1 | ,-> @page :unknown {
+ 2 | |       margin: 2cm;
+ 3 | `-> }
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-pseudo/input.css:1:1]
+ 1 | @page :unknown {
+   :  ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-pseudo/input.css:1:1]
+ 1 | @page :unknown {
+   :  ^^^^
+   `----
+
+  x PageSelectorList
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-pseudo/input.css:1:1]
+ 1 | @page :unknown {
+   :        ^^^^^^^
+   `----
+
+  x PageSelector
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-pseudo/input.css:1:1]
+ 1 | @page :unknown {
+   :        ^^^^^^^
+   `----
+
+  x PageSelectorType
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-pseudo/input.css:1:1]
+ 1 | @page :unknown {
+   :        ^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-pseudo/input.css:1:1]
+ 1 | @page :unknown {
+   :        ^^^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-pseudo/input.css:1:1]
+ 1 | ,-> @page :unknown {
+ 2 | |       margin: 2cm;
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-pseudo/input.css:2:5]
+ 2 | margin: 2cm;
+   : ^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-pseudo/input.css:2:5]
+ 2 | margin: 2cm;
+   : ^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-pseudo/input.css:2:5]
+ 2 | margin: 2cm;
+   : ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-pseudo/input.css:2:5]
+ 2 | margin: 2cm;
+   : ^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-pseudo/input.css:2:5]
+ 2 | margin: 2cm;
+   :         ^^^
+   `----
+
+  x Dimension
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-pseudo/input.css:2:5]
+ 2 | margin: 2cm;
+   :         ^^^
+   `----
+
+  x Length
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-pseudo/input.css:2:5]
+ 2 | margin: 2cm;
+   :         ^^^
+   `----
+
+  x Number
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-pseudo/input.css:2:5]
+ 2 | margin: 2cm;
+   :         ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/page/invalid-pseudo/input.css:2:5]
+ 2 | margin: 2cm;
+   :          ^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/page/no-space/span.rust-debug

@@ -0,0 +1,188 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:1:1]
+ 1 | ,-> @page Page: blank {
+ 2 | |   	@top-center { content: none }
+ 3 | |   	margin-left: 4cm;
+ 4 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:1:1]
+ 1 | ,-> @page Page: blank {
+ 2 | |   	@top-center { content: none }
+ 3 | |   	margin-left: 4cm;
+ 4 | `-> }
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:1:1]
+ 1 | ,-> @page Page: blank {
+ 2 | |   	@top-center { content: none }
+ 3 | |   	margin-left: 4cm;
+ 4 | `-> }
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:1:1]
+ 1 | @page Page: blank {
+   :  ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:1:1]
+ 1 | @page Page: blank {
+   :  ^^^^
+   `----
+
+  x PageSelectorList
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:1:1]
+ 1 | @page Page: blank {
+   :             ^^^^^
+   `----
+
+  x PageSelector
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:1:1]
+ 1 | @page Page: blank {
+   :             ^^^^^
+   `----
+
+  x PageSelectorType
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:1:1]
+ 1 | @page Page: blank {
+   :             ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:1:1]
+ 1 | @page Page: blank {
+   :             ^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:1:1]
+ 1 | ,-> @page Page: blank {
+ 2 | |   	@top-center { content: none }
+ 3 | |   	margin-left: 4cm;
+ 4 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:2:5]
+ 2 | @top-center { content: none }
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:2:5]
+ 2 | @top-center { content: none }
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:2:5]
+ 2 | @top-center { content: none }
+   :  ^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:2:5]
+ 2 | @top-center { content: none }
+   :  ^^^^^^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:2:5]
+ 2 | @top-center { content: none }
+   :             ^^^^^^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:2:5]
+ 2 | @top-center { content: none }
+   :               ^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:2:5]
+ 2 | @top-center { content: none }
+   :               ^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:2:5]
+ 2 | @top-center { content: none }
+   :               ^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:2:5]
+ 2 | @top-center { content: none }
+   :               ^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:2:5]
+ 2 | @top-center { content: none }
+   :                        ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:2:5]
+ 2 | @top-center { content: none }
+   :                        ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:3:5]
+ 3 | margin-left: 4cm;
+   : ^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:3:5]
+ 3 | margin-left: 4cm;
+   : ^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:3:5]
+ 3 | margin-left: 4cm;
+   : ^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:3:5]
+ 3 | margin-left: 4cm;
+   : ^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:3:5]
+ 3 | margin-left: 4cm;
+   :              ^^^
+   `----
+
+  x Dimension
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:3:5]
+ 3 | margin-left: 4cm;
+   :              ^^^
+   `----
+
+  x Length
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:3:5]
+ 3 | margin-left: 4cm;
+   :              ^^^
+   `----
+
+  x Number
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:3:5]
+ 3 | margin-left: 4cm;
+   :              ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/page/no-space/input.css:3:5]
+ 3 | margin-left: 4cm;
+   :               ^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/page/without-page/span.rust-debug

@@ -0,0 +1,128 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/page/without-page/input.css:1:1]
+ 1 | ,-> @top-left {
+ 2 | |       content: "foo";
+ 3 | |       color: blue;
+ 4 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/page/without-page/input.css:1:1]
+ 1 | ,-> @top-left {
+ 2 | |       content: "foo";
+ 3 | |       color: blue;
+ 4 | `-> }
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/page/without-page/input.css:1:1]
+ 1 | ,-> @top-left {
+ 2 | |       content: "foo";
+ 3 | |       color: blue;
+ 4 | `-> }
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/page/without-page/input.css:1:1]
+ 1 | @top-left {
+   :  ^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/page/without-page/input.css:1:1]
+ 1 | @top-left {
+   :  ^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/page/without-page/input.css:1:1]
+ 1 | @top-left {
+   :          ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/page/without-page/input.css:1:1]
+ 1 | @top-left {
+   :          ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/page/without-page/input.css:1:1]
+ 1 | ,-> @top-left {
+ 2 | |       content: "foo";
+ 3 | |       color: blue;
+ 4 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/page/without-page/input.css:2:5]
+ 2 | content: "foo";
+   : ^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/at-rule/page/without-page/input.css:2:5]
+ 2 | content: "foo";
+   : ^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/at-rule/page/without-page/input.css:2:5]
+ 2 | content: "foo";
+   : ^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/page/without-page/input.css:2:5]
+ 2 | content: "foo";
+   : ^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/page/without-page/input.css:2:5]
+ 2 | content: "foo";
+   :          ^^^^^
+   `----
+
+  x Str
+   ,-[$DIR/tests/recovery/at-rule/page/without-page/input.css:2:5]
+ 2 | content: "foo";
+   :          ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/page/without-page/input.css:3:5]
+ 3 | color: blue;
+   : ^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/at-rule/page/without-page/input.css:3:5]
+ 3 | color: blue;
+   : ^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/at-rule/page/without-page/input.css:3:5]
+ 3 | color: blue;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/page/without-page/input.css:3:5]
+ 3 | color: blue;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/page/without-page/input.css:3:5]
+ 3 | color: blue;
+   :        ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/page/without-page/input.css:3:5]
+ 3 | color: blue;
+   :        ^^^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/supports/no-parens/span.rust-debug

@@ -0,0 +1,108 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/supports/no-parens/input.css:1:1]
+ 1 | @supports display: flex {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/supports/no-parens/input.css:1:1]
+ 1 | @supports display: flex {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/supports/no-parens/input.css:1:1]
+ 1 | @supports display: flex {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/supports/no-parens/input.css:1:1]
+ 1 | @supports display: flex {}
+   :  ^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/supports/no-parens/input.css:1:1]
+ 1 | @supports display: flex {}
+   :  ^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/supports/no-parens/input.css:1:1]
+ 1 | @supports display: flex {}
+   :          ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/supports/no-parens/input.css:1:1]
+ 1 | @supports display: flex {}
+   :          ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/supports/no-parens/input.css:1:1]
+ 1 | @supports display: flex {}
+   :           ^^^^^^^
+   `----
+
+  x Ident { value: Atom('display' type=inline), raw: Atom('display' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/supports/no-parens/input.css:1:1]
+ 1 | @supports display: flex {}
+   :           ^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/supports/no-parens/input.css:1:1]
+ 1 | @supports display: flex {}
+   :                  ^
+   `----
+
+  x Colon
+   ,-[$DIR/tests/recovery/at-rule/supports/no-parens/input.css:1:1]
+ 1 | @supports display: flex {}
+   :                  ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/supports/no-parens/input.css:1:1]
+ 1 | @supports display: flex {}
+   :                   ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/supports/no-parens/input.css:1:1]
+ 1 | @supports display: flex {}
+   :                   ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/supports/no-parens/input.css:1:1]
+ 1 | @supports display: flex {}
+   :                    ^^^^
+   `----
+
+  x Ident { value: Atom('flex' type=inline), raw: Atom('flex' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/supports/no-parens/input.css:1:1]
+ 1 | @supports display: flex {}
+   :                    ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/supports/no-parens/input.css:1:1]
+ 1 | @supports display: flex {}
+   :                        ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/at-rule/supports/no-parens/input.css:1:1]
+ 1 | @supports display: flex {}
+   :                        ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/supports/no-parens/input.css:1:1]
+ 1 | @supports display: flex {}
+   :                         ^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/supports/wrong-or-and/span.rust-debug

@@ -0,0 +1,126 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/supports/wrong-or-and/input.css:1:1]
+ 1 | @supports (transition-property: color) or (animation-name: foo) and (transform: rotate(10deg)) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/supports/wrong-or-and/input.css:1:1]
+ 1 | @supports (transition-property: color) or (animation-name: foo) and (transform: rotate(10deg)) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/supports/wrong-or-and/input.css:1:1]
+ 1 | @supports (transition-property: color) or (animation-name: foo) and (transform: rotate(10deg)) {}
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/supports/wrong-or-and/input.css:1:1]
+ 1 | @supports (transition-property: color) or (animation-name: foo) and (transform: rotate(10deg)) {}
+   :  ^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/supports/wrong-or-and/input.css:1:1]
+ 1 | @supports (transition-property: color) or (animation-name: foo) and (transform: rotate(10deg)) {}
+   :  ^^^^^^^^
+   `----
+
+  x SupportsCondition
+   ,-[$DIR/tests/recovery/at-rule/supports/wrong-or-and/input.css:1:1]
+ 1 | @supports (transition-property: color) or (animation-name: foo) and (transform: rotate(10deg)) {}
+   :                                                                     ^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x SupportsConditionType
+   ,-[$DIR/tests/recovery/at-rule/supports/wrong-or-and/input.css:1:1]
+ 1 | @supports (transition-property: color) or (animation-name: foo) and (transform: rotate(10deg)) {}
+   :                                                                      ^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x SupportsInParens
+   ,-[$DIR/tests/recovery/at-rule/supports/wrong-or-and/input.css:1:1]
+ 1 | @supports (transition-property: color) or (animation-name: foo) and (transform: rotate(10deg)) {}
+   :                                                                      ^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x SupportsFeature
+   ,-[$DIR/tests/recovery/at-rule/supports/wrong-or-and/input.css:1:1]
+ 1 | @supports (transition-property: color) or (animation-name: foo) and (transform: rotate(10deg)) {}
+   :                                                                      ^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/at-rule/supports/wrong-or-and/input.css:1:1]
+ 1 | @supports (transition-property: color) or (animation-name: foo) and (transform: rotate(10deg)) {}
+   :                                                                      ^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/at-rule/supports/wrong-or-and/input.css:1:1]
+ 1 | @supports (transition-property: color) or (animation-name: foo) and (transform: rotate(10deg)) {}
+   :                                                                      ^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/supports/wrong-or-and/input.css:1:1]
+ 1 | @supports (transition-property: color) or (animation-name: foo) and (transform: rotate(10deg)) {}
+   :                                                                      ^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/supports/wrong-or-and/input.css:1:1]
+ 1 | @supports (transition-property: color) or (animation-name: foo) and (transform: rotate(10deg)) {}
+   :                                                                                 ^^^^^^^^^^^^^
+   `----
+
+  x Function
+   ,-[$DIR/tests/recovery/at-rule/supports/wrong-or-and/input.css:1:1]
+ 1 | @supports (transition-property: color) or (animation-name: foo) and (transform: rotate(10deg)) {}
+   :                                                                                 ^^^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/supports/wrong-or-and/input.css:1:1]
+ 1 | @supports (transition-property: color) or (animation-name: foo) and (transform: rotate(10deg)) {}
+   :                                                                                 ^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/at-rule/supports/wrong-or-and/input.css:1:1]
+ 1 | @supports (transition-property: color) or (animation-name: foo) and (transform: rotate(10deg)) {}
+   :                                                                                        ^^^^^
+   `----
+
+  x Dimension
+   ,-[$DIR/tests/recovery/at-rule/supports/wrong-or-and/input.css:1:1]
+ 1 | @supports (transition-property: color) or (animation-name: foo) and (transform: rotate(10deg)) {}
+   :                                                                                        ^^^^^
+   `----
+
+  x Angle
+   ,-[$DIR/tests/recovery/at-rule/supports/wrong-or-and/input.css:1:1]
+ 1 | @supports (transition-property: color) or (animation-name: foo) and (transform: rotate(10deg)) {}
+   :                                                                                        ^^^^^
+   `----
+
+  x Number
+   ,-[$DIR/tests/recovery/at-rule/supports/wrong-or-and/input.css:1:1]
+ 1 | @supports (transition-property: color) or (animation-name: foo) and (transform: rotate(10deg)) {}
+   :                                                                                        ^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/supports/wrong-or-and/input.css:1:1]
+ 1 | @supports (transition-property: color) or (animation-name: foo) and (transform: rotate(10deg)) {}
+   :                                                                                          ^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/at-rule/supports/wrong-or-and/input.css:1:1]
+ 1 | @supports (transition-property: color) or (animation-name: foo) and (transform: rotate(10deg)) {}
+   :                                                                                                ^^
+   `----

crates/swc_css_parser/tests/recovery/at-rule/unknown/span.rust-debug

@@ -0,0 +1,30 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/at-rule/unknown/input.css:1:1]
+ 1 | @import-normalize;
+   : ^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/at-rule/unknown/input.css:1:1]
+ 1 | @import-normalize;
+   : ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRule
+   ,-[$DIR/tests/recovery/at-rule/unknown/input.css:1:1]
+ 1 | @import-normalize;
+   : ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x AtRuleName
+   ,-[$DIR/tests/recovery/at-rule/unknown/input.css:1:1]
+ 1 | @import-normalize;
+   :  ^^^^^^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/at-rule/unknown/input.css:1:1]
+ 1 | @import-normalize;
+   :  ^^^^^^^^^^^^^^^^
+   `----

crates/swc_css_parser/tests/recovery/bad-url-token/double-quotes/span.rust-debug

@@ -0,0 +1,158 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/bad-url-token/double-quotes/input.css:1:1]
+ 1 | ,-> div {
+ 2 | |       background: url(image".png);
+ 3 | |       color: red;
+ 4 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/bad-url-token/double-quotes/input.css:1:1]
+ 1 | ,-> div {
+ 2 | |       background: url(image".png);
+ 3 | |       color: red;
+ 4 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/bad-url-token/double-quotes/input.css:1:1]
+ 1 | ,-> div {
+ 2 | |       background: url(image".png);
+ 3 | |       color: red;
+ 4 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/bad-url-token/double-quotes/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/bad-url-token/double-quotes/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/bad-url-token/double-quotes/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/bad-url-token/double-quotes/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/bad-url-token/double-quotes/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/bad-url-token/double-quotes/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/bad-url-token/double-quotes/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/bad-url-token/double-quotes/input.css:1:1]
+ 1 | ,-> div {
+ 2 | |       background: url(image".png);
+ 3 | |       color: red;
+ 4 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/bad-url-token/double-quotes/input.css:2:5]
+ 2 | background: url(image".png);
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/bad-url-token/double-quotes/input.css:2:5]
+ 2 | background: url(image".png);
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/bad-url-token/double-quotes/input.css:2:5]
+ 2 | background: url(image".png);
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/bad-url-token/double-quotes/input.css:2:5]
+ 2 | background: url(image".png);
+   : ^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/bad-url-token/double-quotes/input.css:2:5]
+ 2 | background: url(image".png);
+   : ^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/bad-url-token/double-quotes/input.css:2:5]
+ 2 | background: url(image".png);
+   :             ^^^^^^^^^^^^^^^
+   `----
+
+  x BadUrl { name: Atom('url' type=static), raw_name: Atom('url' type=static), value: Atom('image".png' type=dynamic), raw_value: Atom('image".png' type=dynamic) }
+   ,-[$DIR/tests/recovery/bad-url-token/double-quotes/input.css:2:5]
+ 2 | background: url(image".png);
+   :             ^^^^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/bad-url-token/double-quotes/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/bad-url-token/double-quotes/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/bad-url-token/double-quotes/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/bad-url-token/double-quotes/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/bad-url-token/double-quotes/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/bad-url-token/double-quotes/input.css:3:5]
+ 3 | color: red;
+   :        ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/bad-url-token/double-quotes/input.css:3:5]
+ 3 | color: red;
+   :        ^^^
+   `----

crates/swc_css_parser/tests/recovery/bad-url-token/invalid-escape/span.rust-debug

@@ -0,0 +1,118 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/bad-url-token/invalid-escape/input.css:1:1]
+ 1 | ,-> div {
+ 2 | |       background: url(image.png\
+ 3 | |       );
+ 4 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/bad-url-token/invalid-escape/input.css:1:1]
+ 1 | ,-> div {
+ 2 | |       background: url(image.png\
+ 3 | |       );
+ 4 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/bad-url-token/invalid-escape/input.css:1:1]
+ 1 | ,-> div {
+ 2 | |       background: url(image.png\
+ 3 | |       );
+ 4 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/bad-url-token/invalid-escape/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/bad-url-token/invalid-escape/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/bad-url-token/invalid-escape/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/bad-url-token/invalid-escape/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/bad-url-token/invalid-escape/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/bad-url-token/invalid-escape/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/bad-url-token/invalid-escape/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/bad-url-token/invalid-escape/input.css:1:1]
+ 1 | ,-> div {
+ 2 | |       background: url(image.png\
+ 3 | |       );
+ 4 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/bad-url-token/invalid-escape/input.css:2:5]
+ 2 | ,-> background: url(image.png\
+ 3 | `->     );
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/bad-url-token/invalid-escape/input.css:2:5]
+ 2 | ,-> background: url(image.png\
+ 3 | `->     );
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/bad-url-token/invalid-escape/input.css:2:5]
+ 2 | ,-> background: url(image.png\
+ 3 | `->     );
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/bad-url-token/invalid-escape/input.css:2:5]
+ 2 | background: url(image.png\
+   : ^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/bad-url-token/invalid-escape/input.css:2:5]
+ 2 | background: url(image.png\
+   : ^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/bad-url-token/invalid-escape/input.css:2:5]
+ 2 | ,-> background: url(image.png\
+ 3 | `->     );
+   `----
+
+  x BadUrl { name: Atom('url' type=static), raw_name: Atom('url' type=static), value: Atom('image.png\
+  |     ' type=dynamic), raw_value: Atom('image.png\
+  |     ' type=dynamic) }
+   ,-[$DIR/tests/recovery/bad-url-token/invalid-escape/input.css:2:5]
+ 2 | ,-> background: url(image.png\
+ 3 | `->     );
+   `----

crates/swc_css_parser/tests/recovery/bad-url-token/left-parenthesis/span.rust-debug

@@ -0,0 +1,158 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/bad-url-token/left-parenthesis/input.css:1:1]
+ 1 | ,-> div {
+ 2 | |       background: url(image(.png);
+ 3 | |       color: red;
+ 4 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/bad-url-token/left-parenthesis/input.css:1:1]
+ 1 | ,-> div {
+ 2 | |       background: url(image(.png);
+ 3 | |       color: red;
+ 4 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/bad-url-token/left-parenthesis/input.css:1:1]
+ 1 | ,-> div {
+ 2 | |       background: url(image(.png);
+ 3 | |       color: red;
+ 4 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/bad-url-token/left-parenthesis/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/bad-url-token/left-parenthesis/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/bad-url-token/left-parenthesis/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/bad-url-token/left-parenthesis/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/bad-url-token/left-parenthesis/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/bad-url-token/left-parenthesis/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/bad-url-token/left-parenthesis/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/bad-url-token/left-parenthesis/input.css:1:1]
+ 1 | ,-> div {
+ 2 | |       background: url(image(.png);
+ 3 | |       color: red;
+ 4 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/bad-url-token/left-parenthesis/input.css:2:5]
+ 2 | background: url(image(.png);
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/bad-url-token/left-parenthesis/input.css:2:5]
+ 2 | background: url(image(.png);
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/bad-url-token/left-parenthesis/input.css:2:5]
+ 2 | background: url(image(.png);
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/bad-url-token/left-parenthesis/input.css:2:5]
+ 2 | background: url(image(.png);
+   : ^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/bad-url-token/left-parenthesis/input.css:2:5]
+ 2 | background: url(image(.png);
+   : ^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/bad-url-token/left-parenthesis/input.css:2:5]
+ 2 | background: url(image(.png);
+   :             ^^^^^^^^^^^^^^^
+   `----
+
+  x BadUrl { name: Atom('url' type=static), raw_name: Atom('url' type=static), value: Atom('image(.png' type=dynamic), raw_value: Atom('image(.png' type=dynamic) }
+   ,-[$DIR/tests/recovery/bad-url-token/left-parenthesis/input.css:2:5]
+ 2 | background: url(image(.png);
+   :             ^^^^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/bad-url-token/left-parenthesis/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/bad-url-token/left-parenthesis/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/bad-url-token/left-parenthesis/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/bad-url-token/left-parenthesis/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/bad-url-token/left-parenthesis/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/bad-url-token/left-parenthesis/input.css:3:5]
+ 3 | color: red;
+   :        ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/bad-url-token/left-parenthesis/input.css:3:5]
+ 3 | color: red;
+   :        ^^^
+   `----

crates/swc_css_parser/tests/recovery/bad-url-token/single-quotes/span.rust-debug

@@ -0,0 +1,158 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/bad-url-token/single-quotes/input.css:1:1]
+ 1 | ,-> div {
+ 2 | |       background: url(image'.png);
+ 3 | |       color: red;
+ 4 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/bad-url-token/single-quotes/input.css:1:1]
+ 1 | ,-> div {
+ 2 | |       background: url(image'.png);
+ 3 | |       color: red;
+ 4 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/bad-url-token/single-quotes/input.css:1:1]
+ 1 | ,-> div {
+ 2 | |       background: url(image'.png);
+ 3 | |       color: red;
+ 4 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/bad-url-token/single-quotes/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/bad-url-token/single-quotes/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/bad-url-token/single-quotes/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/bad-url-token/single-quotes/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/bad-url-token/single-quotes/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/bad-url-token/single-quotes/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/bad-url-token/single-quotes/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/bad-url-token/single-quotes/input.css:1:1]
+ 1 | ,-> div {
+ 2 | |       background: url(image'.png);
+ 3 | |       color: red;
+ 4 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/bad-url-token/single-quotes/input.css:2:5]
+ 2 | background: url(image'.png);
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/bad-url-token/single-quotes/input.css:2:5]
+ 2 | background: url(image'.png);
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/bad-url-token/single-quotes/input.css:2:5]
+ 2 | background: url(image'.png);
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/bad-url-token/single-quotes/input.css:2:5]
+ 2 | background: url(image'.png);
+   : ^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/bad-url-token/single-quotes/input.css:2:5]
+ 2 | background: url(image'.png);
+   : ^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/bad-url-token/single-quotes/input.css:2:5]
+ 2 | background: url(image'.png);
+   :             ^^^^^^^^^^^^^^^
+   `----
+
+  x BadUrl { name: Atom('url' type=static), raw_name: Atom('url' type=static), value: Atom('image'.png' type=dynamic), raw_value: Atom('image'.png' type=dynamic) }
+   ,-[$DIR/tests/recovery/bad-url-token/single-quotes/input.css:2:5]
+ 2 | background: url(image'.png);
+   :             ^^^^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/bad-url-token/single-quotes/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/bad-url-token/single-quotes/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/bad-url-token/single-quotes/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/bad-url-token/single-quotes/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/bad-url-token/single-quotes/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/bad-url-token/single-quotes/input.css:3:5]
+ 3 | color: red;
+   :        ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/bad-url-token/single-quotes/input.css:3:5]
+ 3 | color: red;
+   :        ^^^
+   `----

crates/swc_css_parser/tests/recovery/bad-url-token/whitespace-in-middle/span.rust-debug

@@ -0,0 +1,112 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace-in-middle/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       background-image: url(   ./image.jpg  a  );
+ 3 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace-in-middle/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       background-image: url(   ./image.jpg  a  );
+ 3 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace-in-middle/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       background-image: url(   ./image.jpg  a  );
+ 3 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace-in-middle/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace-in-middle/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace-in-middle/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace-in-middle/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace-in-middle/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace-in-middle/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace-in-middle/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace-in-middle/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       background-image: url(   ./image.jpg  a  );
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace-in-middle/input.css:2:5]
+ 2 | background-image: url(   ./image.jpg  a  );
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace-in-middle/input.css:2:5]
+ 2 | background-image: url(   ./image.jpg  a  );
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace-in-middle/input.css:2:5]
+ 2 | background-image: url(   ./image.jpg  a  );
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace-in-middle/input.css:2:5]
+ 2 | background-image: url(   ./image.jpg  a  );
+   : ^^^^^^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace-in-middle/input.css:2:5]
+ 2 | background-image: url(   ./image.jpg  a  );
+   : ^^^^^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace-in-middle/input.css:2:5]
+ 2 | background-image: url(   ./image.jpg  a  );
+   :                   ^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x BadUrl { name: Atom('url' type=static), raw_name: Atom('url' type=static), value: Atom('   ./image.jpg  a  ' type=dynamic), raw_value: Atom('   ./image.jpg  a  ' type=dynamic) }
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace-in-middle/input.css:2:5]
+ 2 | background-image: url(   ./image.jpg  a  );
+   :                   ^^^^^^^^^^^^^^^^^^^^^^^^
+   `----

crates/swc_css_parser/tests/recovery/bad-url-token/whitespace/span.rust-debug

@@ -0,0 +1,164 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace/input.css:1:1]
+ 1 | ,-> div {
+ 2 | |       background: url(image.
+ 3 | |       png);
+ 4 | |       color: red;
+ 5 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace/input.css:1:1]
+ 1 | ,-> div {
+ 2 | |       background: url(image.
+ 3 | |       png);
+ 4 | |       color: red;
+ 5 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace/input.css:1:1]
+ 1 | ,-> div {
+ 2 | |       background: url(image.
+ 3 | |       png);
+ 4 | |       color: red;
+ 5 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace/input.css:1:1]
+ 1 | ,-> div {
+ 2 | |       background: url(image.
+ 3 | |       png);
+ 4 | |       color: red;
+ 5 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace/input.css:2:5]
+ 2 | ,-> background: url(image.
+ 3 | `->     png);
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace/input.css:2:5]
+ 2 | ,-> background: url(image.
+ 3 | `->     png);
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace/input.css:2:5]
+ 2 | ,-> background: url(image.
+ 3 | `->     png);
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace/input.css:2:5]
+ 2 | background: url(image.
+   : ^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace/input.css:2:5]
+ 2 | background: url(image.
+   : ^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace/input.css:2:5]
+ 2 | ,-> background: url(image.
+ 3 | `->     png);
+   `----
+
+  x BadUrl { name: Atom('url' type=static), raw_name: Atom('url' type=static), value: Atom('image.
+  |     png' type=dynamic), raw_value: Atom('image.
+  |     png' type=dynamic) }
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace/input.css:2:5]
+ 2 | ,-> background: url(image.
+ 3 | `->     png);
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace/input.css:4:5]
+ 4 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace/input.css:4:5]
+ 4 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace/input.css:4:5]
+ 4 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace/input.css:4:5]
+ 4 | color: red;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace/input.css:4:5]
+ 4 | color: red;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace/input.css:4:5]
+ 4 | color: red;
+   :        ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/bad-url-token/whitespace/input.css:4:5]
+ 4 | color: red;
+   :        ^^^
+   `----

crates/swc_css_parser/tests/recovery/cdo-and-cdc/span.rust-debug

@@ -0,0 +1,216 @@
+
+  x Stylesheet
+    ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:1:1]
+  1 | ,-> <!-- 123 -->
+  2 | |   
+  3 | |   div {
+  4 | |       color: red;
+  5 | |   <!--
+  6 | |   
+  7 | |   test
+  8 | |   
+  9 | |   -->
+ 10 | `-> }
+    `----
+
+  x Rule
+    ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:1:1]
+  1 | ,-> <!-- 123 -->
+  2 | |   
+  3 | |   div {
+  4 | |       color: red;
+  5 | |   <!--
+  6 | |   
+  7 | |   test
+  8 | |   
+  9 | |   -->
+ 10 | `-> }
+    `----
+
+  x QualifiedRule
+    ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:1:1]
+  1 | ,-> <!-- 123 -->
+  2 | |   
+  3 | |   div {
+  4 | |       color: red;
+  5 | |   <!--
+  6 | |   
+  7 | |   test
+  8 | |   
+  9 | |   -->
+ 10 | `-> }
+    `----
+
+  x Tokens
+   ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:1:1]
+ 1 | ,-> <!-- 123 -->
+ 2 | |   
+ 3 | `-> div {
+   `----
+
+  x Number { value: 123.0, raw: Atom('123' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:1:1]
+ 1 | <!-- 123 -->
+   :      ^^^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:1:1]
+ 1 | <!-- 123 -->
+   :         ^
+   `----
+
+  x CDC
+   ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:1:1]
+ 1 | <!-- 123 -->
+   :          ^^^
+   `----
+
+  x WhiteSpace { value: Atom('
+  | 
+  | ' type=inline) }
+   ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:1:1]
+ 1 | ,-> <!-- 123 -->
+ 2 | `-> 
+ 3 |     div {
+   `----
+
+  x Ident { value: Atom('div' type=inline), raw: Atom('div' type=inline) }
+   ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:3:1]
+ 3 | div {
+   : ^^^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:3:1]
+ 3 | div {
+   :    ^
+   `----
+
+  x SimpleBlock
+    ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:3:1]
+  3 | ,-> div {
+  4 | |       color: red;
+  5 | |   <!--
+  6 | |   
+  7 | |   test
+  8 | |   
+  9 | |   -->
+ 10 | `-> }
+    `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:4:5]
+ 4 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:4:5]
+ 4 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:4:5]
+ 4 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:4:5]
+ 4 | color: red;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:4:5]
+ 4 | color: red;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:4:5]
+ 4 | color: red;
+   :        ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:4:5]
+ 4 | color: red;
+   :        ^^^
+   `----
+
+  x ComponentValue
+    ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:5:1]
+  5 | ,-> <!--
+  6 | |   
+  7 | |   test
+  8 | |   
+  9 | `-> -->
+ 10 |     }
+    `----
+
+  x StyleBlock
+    ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:5:1]
+  5 | ,-> <!--
+  6 | |   
+  7 | |   test
+  8 | |   
+  9 | `-> -->
+ 10 |     }
+    `----
+
+  x Tokens
+    ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:5:1]
+  5 | ,-> <!--
+  6 | |   
+  7 | |   test
+  8 | |   
+  9 | `-> -->
+ 10 |     }
+    `----
+
+  x CDO
+   ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:5:1]
+ 5 | <!--
+   : ^^^^
+   `----
+
+  x WhiteSpace { value: Atom('
+  | 
+  | ' type=inline) }
+   ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:5:1]
+ 5 | ,-> <!--
+ 6 | `-> 
+ 7 |     test
+   `----
+
+  x Ident { value: Atom('test' type=inline), raw: Atom('test' type=inline) }
+   ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:7:1]
+ 7 | test
+   : ^^^^
+   `----
+
+  x WhiteSpace { value: Atom('
+  | 
+  | ' type=inline) }
+   ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:7:1]
+ 7 | ,-> test
+ 8 | `-> 
+ 9 |     -->
+   `----
+
+  x CDC
+   ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:9:1]
+ 9 | -->
+   : ^^^
+   `----
+
+  x WhiteSpace { value: Atom('
+  | ' type=inline) }
+    ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:9:1]
+  9 | -->
+    :    ^
+ 10 | }
+    `----

crates/swc_css_parser/tests/recovery/comments/bad-comment-1/span.rust-debug

@@ -0,0 +1,42 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/comments/bad-comment-1/input.css:1:1]
+ 1 | // comment
+   : ^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/comments/bad-comment-1/input.css:1:1]
+ 1 | // comment
+   : ^^^^^^^^^^
+   `----
+
+  x Tokens
+   ,-[$DIR/tests/recovery/comments/bad-comment-1/input.css:1:1]
+ 1 | // comment
+   : ^^^^^^^^^^
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/recovery/comments/bad-comment-1/input.css:1:1]
+ 1 | // comment
+   : ^
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/recovery/comments/bad-comment-1/input.css:1:1]
+ 1 | // comment
+   :  ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/comments/bad-comment-1/input.css:1:1]
+ 1 | // comment
+   :   ^
+   `----
+
+  x Ident { value: Atom('comment' type=inline), raw: Atom('comment' type=inline) }
+   ,-[$DIR/tests/recovery/comments/bad-comment-1/input.css:1:1]
+ 1 | // comment
+   :    ^^^^^^^
+   `----

crates/swc_css_parser/tests/recovery/comments/bad-comment-2/span.rust-debug

@@ -0,0 +1,6 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/comments/bad-comment-2/input.css:1:1]
+ 1 | /*! bad comment *
+   : ^
+   `----

crates/swc_css_parser/tests/recovery/comments/bad-comment-3/span.rust-debug

@@ -0,0 +1,6 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/comments/bad-comment-3/input.css:1:1]
+ 1 | /*! bad comment
+   : ^
+   `----

crates/swc_css_parser/tests/recovery/comments/declaration/span.rust-debug

@@ -0,0 +1,146 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/comments/declaration/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: url("test") /* comment */   /* comment */
+ 3 | |           /* comment */:
+ 4 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/comments/declaration/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: url("test") /* comment */   /* comment */
+ 3 | |           /* comment */:
+ 4 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/comments/declaration/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: url("test") /* comment */   /* comment */
+ 3 | |           /* comment */:
+ 4 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/comments/declaration/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/comments/declaration/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/comments/declaration/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/comments/declaration/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/comments/declaration/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/comments/declaration/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/comments/declaration/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/comments/declaration/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: url("test") /* comment */   /* comment */
+ 3 | |           /* comment */:
+ 4 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/comments/declaration/input.css:2:5]
+ 2 | ,-> prop: url("test") /* comment */   /* comment */
+ 3 | `->         /* comment */:
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/comments/declaration/input.css:2:5]
+ 2 | ,-> prop: url("test") /* comment */   /* comment */
+ 3 | `->         /* comment */:
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/comments/declaration/input.css:2:5]
+ 2 | ,-> prop: url("test") /* comment */   /* comment */
+ 3 | `->         /* comment */:
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/comments/declaration/input.css:2:5]
+ 2 | prop: url("test") /* comment */   /* comment */
+   : ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/comments/declaration/input.css:2:5]
+ 2 | prop: url("test") /* comment */   /* comment */
+   : ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/comments/declaration/input.css:2:5]
+ 2 | prop: url("test") /* comment */   /* comment */
+   :       ^^^^^^^^^^^
+   `----
+
+  x Url
+   ,-[$DIR/tests/recovery/comments/declaration/input.css:2:5]
+ 2 | prop: url("test") /* comment */   /* comment */
+   :       ^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/comments/declaration/input.css:2:5]
+ 2 | prop: url("test") /* comment */   /* comment */
+   :       ^^^
+   `----
+
+  x UrlValue
+   ,-[$DIR/tests/recovery/comments/declaration/input.css:2:5]
+ 2 | prop: url("test") /* comment */   /* comment */
+   :           ^^^^^^
+   `----
+
+  x Str
+   ,-[$DIR/tests/recovery/comments/declaration/input.css:2:5]
+ 2 | prop: url("test") /* comment */   /* comment */
+   :           ^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/comments/declaration/input.css:3:9]
+ 3 | /* comment */:
+   :              ^
+   `----
+
+  x Colon
+   ,-[$DIR/tests/recovery/comments/declaration/input.css:3:9]
+ 3 | /* comment */:
+   :              ^
+   `----

crates/swc_css_parser/tests/recovery/declaration/basic/span.rust-debug

@@ -0,0 +1,444 @@
+
+  x Stylesheet
+    ,-[$DIR/tests/recovery/declaration/basic/input.css:1:1]
+  1 | ,-> .class {
+  2 | |       prop: ;
+  3 | |       color: red;
+  4 | |   }
+  5 | |   
+  6 | |   .class {
+  7 | |       prop: !!;
+  8 | |       color: red;
+  9 | |   }
+ 10 | |   
+ 11 | |   a {
+ 12 | |       test;
+ 13 | |       color: red;
+ 14 | `-> }
+    `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:1:1]
+ 1 | ,-> .class {
+ 2 | |       prop: ;
+ 3 | |       color: red;
+ 4 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:1:1]
+ 1 | ,-> .class {
+ 2 | |       prop: ;
+ 3 | |       color: red;
+ 4 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:1:1]
+ 1 | .class {
+   : ^^^^^^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:1:1]
+ 1 | .class {
+   : ^^^^^^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:1:1]
+ 1 | .class {
+   : ^^^^^^
+   `----
+
+  x SubclassSelector
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:1:1]
+ 1 | .class {
+   : ^^^^^^
+   `----
+
+  x ClassSelector
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:1:1]
+ 1 | .class {
+   : ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:1:1]
+ 1 | .class {
+   :  ^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:1:1]
+ 1 | ,-> .class {
+ 2 | |       prop: ;
+ 3 | |       color: red;
+ 4 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:2:5]
+ 2 | prop: ;
+   : ^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:2:5]
+ 2 | prop: ;
+   : ^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:2:5]
+ 2 | prop: ;
+   : ^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:2:5]
+ 2 | prop: ;
+   : ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:2:5]
+ 2 | prop: ;
+   : ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:3:5]
+ 3 | color: red;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:3:5]
+ 3 | color: red;
+   :        ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:3:5]
+ 3 | color: red;
+   :        ^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:6:1]
+ 6 | ,-> .class {
+ 7 | |       prop: !!;
+ 8 | |       color: red;
+ 9 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:6:1]
+ 6 | ,-> .class {
+ 7 | |       prop: !!;
+ 8 | |       color: red;
+ 9 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:6:1]
+ 6 | .class {
+   : ^^^^^^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:6:1]
+ 6 | .class {
+   : ^^^^^^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:6:1]
+ 6 | .class {
+   : ^^^^^^
+   `----
+
+  x SubclassSelector
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:6:1]
+ 6 | .class {
+   : ^^^^^^
+   `----
+
+  x ClassSelector
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:6:1]
+ 6 | .class {
+   : ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:6:1]
+ 6 | .class {
+   :  ^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:6:1]
+ 6 | ,-> .class {
+ 7 | |       prop: !!;
+ 8 | |       color: red;
+ 9 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:7:5]
+ 7 | prop: !!;
+   : ^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:7:5]
+ 7 | prop: !!;
+   : ^^^^^^^^^
+   `----
+
+  x Tokens
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:7:5]
+ 7 | prop: !!;
+   : ^^^^^^^^^
+   `----
+
+  x Ident { value: Atom('prop' type=inline), raw: Atom('prop' type=inline) }
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:7:5]
+ 7 | prop: !!;
+   : ^^^^
+   `----
+
+  x Colon
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:7:5]
+ 7 | prop: !!;
+   :     ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:7:5]
+ 7 | prop: !!;
+   :      ^
+   `----
+
+  x Delim { value: '!' }
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:7:5]
+ 7 | prop: !!;
+   :       ^
+   `----
+
+  x Delim { value: '!' }
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:7:5]
+ 7 | prop: !!;
+   :        ^
+   `----
+
+  x Semi
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:7:5]
+ 7 | prop: !!;
+   :         ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:8:5]
+ 8 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:8:5]
+ 8 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:8:5]
+ 8 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:8:5]
+ 8 | color: red;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:8:5]
+ 8 | color: red;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:8:5]
+ 8 | color: red;
+   :        ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/declaration/basic/input.css:8:5]
+ 8 | color: red;
+   :        ^^^
+   `----
+
+  x Rule
+    ,-[$DIR/tests/recovery/declaration/basic/input.css:11:1]
+ 11 | ,-> a {
+ 12 | |       test;
+ 13 | |       color: red;
+ 14 | `-> }
+    `----
+
+  x QualifiedRule
+    ,-[$DIR/tests/recovery/declaration/basic/input.css:11:1]
+ 11 | ,-> a {
+ 12 | |       test;
+ 13 | |       color: red;
+ 14 | `-> }
+    `----
+
+  x SelectorList
+    ,-[$DIR/tests/recovery/declaration/basic/input.css:11:1]
+ 11 | a {
+    : ^
+    `----
+
+  x ComplexSelector
+    ,-[$DIR/tests/recovery/declaration/basic/input.css:11:1]
+ 11 | a {
+    : ^
+    `----
+
+  x CompoundSelector
+    ,-[$DIR/tests/recovery/declaration/basic/input.css:11:1]
+ 11 | a {
+    : ^
+    `----
+
+  x TypeSelector
+    ,-[$DIR/tests/recovery/declaration/basic/input.css:11:1]
+ 11 | a {
+    : ^
+    `----
+
+  x TagNameSelector
+    ,-[$DIR/tests/recovery/declaration/basic/input.css:11:1]
+ 11 | a {
+    : ^
+    `----
+
+  x WqName
+    ,-[$DIR/tests/recovery/declaration/basic/input.css:11:1]
+ 11 | a {
+    : ^
+    `----
+
+  x Ident
+    ,-[$DIR/tests/recovery/declaration/basic/input.css:11:1]
+ 11 | a {
+    : ^
+    `----
+
+  x SimpleBlock
+    ,-[$DIR/tests/recovery/declaration/basic/input.css:11:1]
+ 11 | ,-> a {
+ 12 | |       test;
+ 13 | |       color: red;
+ 14 | `-> }
+    `----
+
+  x ComponentValue
+    ,-[$DIR/tests/recovery/declaration/basic/input.css:12:5]
+ 12 | test;
+    : ^^^^^
+    `----
+
+  x StyleBlock
+    ,-[$DIR/tests/recovery/declaration/basic/input.css:12:5]
+ 12 | test;
+    : ^^^^^
+    `----
+
+  x Tokens
+    ,-[$DIR/tests/recovery/declaration/basic/input.css:12:5]
+ 12 | test;
+    : ^^^^^
+    `----
+
+  x Ident { value: Atom('test' type=inline), raw: Atom('test' type=inline) }
+    ,-[$DIR/tests/recovery/declaration/basic/input.css:12:5]
+ 12 | test;
+    : ^^^^
+    `----
+
+  x Semi
+    ,-[$DIR/tests/recovery/declaration/basic/input.css:12:5]
+ 12 | test;
+    :     ^
+    `----
+
+  x ComponentValue
+    ,-[$DIR/tests/recovery/declaration/basic/input.css:13:5]
+ 13 | color: red;
+    : ^^^^^^^^^^
+    `----
+
+  x StyleBlock
+    ,-[$DIR/tests/recovery/declaration/basic/input.css:13:5]
+ 13 | color: red;
+    : ^^^^^^^^^^
+    `----
+
+  x Declaration
+    ,-[$DIR/tests/recovery/declaration/basic/input.css:13:5]
+ 13 | color: red;
+    : ^^^^^^^^^^
+    `----
+
+  x DeclarationName
+    ,-[$DIR/tests/recovery/declaration/basic/input.css:13:5]
+ 13 | color: red;
+    : ^^^^^
+    `----
+
+  x Ident
+    ,-[$DIR/tests/recovery/declaration/basic/input.css:13:5]
+ 13 | color: red;
+    : ^^^^^
+    `----
+
+  x ComponentValue
+    ,-[$DIR/tests/recovery/declaration/basic/input.css:13:5]
+ 13 | color: red;
+    :        ^^^
+    `----
+
+  x Ident
+    ,-[$DIR/tests/recovery/declaration/basic/input.css:13:5]
+ 13 | color: red;
+    :        ^^^
+    `----

crates/swc_css_parser/tests/recovery/declaration/important/span.rust-debug

@@ -0,0 +1,136 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/declaration/important/input.css:1:1]
+ 1 | ,-> .a {
+ 2 | |       color: white !!important;
+ 3 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/declaration/important/input.css:1:1]
+ 1 | ,-> .a {
+ 2 | |       color: white !!important;
+ 3 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/declaration/important/input.css:1:1]
+ 1 | ,-> .a {
+ 2 | |       color: white !!important;
+ 3 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/declaration/important/input.css:1:1]
+ 1 | .a {
+   : ^^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/declaration/important/input.css:1:1]
+ 1 | .a {
+   : ^^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/declaration/important/input.css:1:1]
+ 1 | .a {
+   : ^^
+   `----
+
+  x SubclassSelector
+   ,-[$DIR/tests/recovery/declaration/important/input.css:1:1]
+ 1 | .a {
+   : ^^
+   `----
+
+  x ClassSelector
+   ,-[$DIR/tests/recovery/declaration/important/input.css:1:1]
+ 1 | .a {
+   : ^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/declaration/important/input.css:1:1]
+ 1 | .a {
+   :  ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/declaration/important/input.css:1:1]
+ 1 | ,-> .a {
+ 2 | |       color: white !!important;
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/declaration/important/input.css:2:5]
+ 2 | color: white !!important;
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/declaration/important/input.css:2:5]
+ 2 | color: white !!important;
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Tokens
+   ,-[$DIR/tests/recovery/declaration/important/input.css:2:5]
+ 2 | color: white !!important;
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Ident { value: Atom('color' type=inline), raw: Atom('color' type=inline) }
+   ,-[$DIR/tests/recovery/declaration/important/input.css:2:5]
+ 2 | color: white !!important;
+   : ^^^^^
+   `----
+
+  x Colon
+   ,-[$DIR/tests/recovery/declaration/important/input.css:2:5]
+ 2 | color: white !!important;
+   :      ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/declaration/important/input.css:2:5]
+ 2 | color: white !!important;
+   :       ^
+   `----
+
+  x Ident { value: Atom('white' type=inline), raw: Atom('white' type=inline) }
+   ,-[$DIR/tests/recovery/declaration/important/input.css:2:5]
+ 2 | color: white !!important;
+   :        ^^^^^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/declaration/important/input.css:2:5]
+ 2 | color: white !!important;
+   :             ^
+   `----
+
+  x Delim { value: '!' }
+   ,-[$DIR/tests/recovery/declaration/important/input.css:2:5]
+ 2 | color: white !!important;
+   :              ^
+   `----
+
+  x Delim { value: '!' }
+   ,-[$DIR/tests/recovery/declaration/important/input.css:2:5]
+ 2 | color: white !!important;
+   :               ^
+   `----
+
+  x Ident { value: Atom('important' type=static), raw: Atom('important' type=static) }
+   ,-[$DIR/tests/recovery/declaration/important/input.css:2:5]
+ 2 | color: white !!important;
+   :                ^^^^^^^^^
+   `----
+
+  x Semi
+   ,-[$DIR/tests/recovery/declaration/important/input.css:2:5]
+ 2 | color: white !!important;
+   :                         ^
+   `----

crates/swc_css_parser/tests/recovery/delim-token/ampersand/span.rust-debug

@@ -0,0 +1,112 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/delim-token/ampersand/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: &;
+ 3 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/delim-token/ampersand/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: &;
+ 3 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/delim-token/ampersand/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: &;
+ 3 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/delim-token/ampersand/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/delim-token/ampersand/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/delim-token/ampersand/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/delim-token/ampersand/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/delim-token/ampersand/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/delim-token/ampersand/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/ampersand/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/delim-token/ampersand/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: &;
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/ampersand/input.css:2:5]
+ 2 | prop: &;
+   : ^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/delim-token/ampersand/input.css:2:5]
+ 2 | prop: &;
+   : ^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/delim-token/ampersand/input.css:2:5]
+ 2 | prop: &;
+   : ^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/delim-token/ampersand/input.css:2:5]
+ 2 | prop: &;
+   : ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/ampersand/input.css:2:5]
+ 2 | prop: &;
+   : ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/ampersand/input.css:2:5]
+ 2 | prop: &;
+   :       ^
+   `----
+
+  x Delim { value: '&' }
+   ,-[$DIR/tests/recovery/delim-token/ampersand/input.css:2:5]
+ 2 | prop: &;
+   :       ^
+   `----

crates/swc_css_parser/tests/recovery/delim-token/asterisk/span.rust-debug

@@ -0,0 +1,112 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/delim-token/asterisk/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: *;
+ 3 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/delim-token/asterisk/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: *;
+ 3 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/delim-token/asterisk/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: *;
+ 3 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/delim-token/asterisk/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/delim-token/asterisk/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/delim-token/asterisk/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/delim-token/asterisk/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/delim-token/asterisk/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/delim-token/asterisk/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/asterisk/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/delim-token/asterisk/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: *;
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/asterisk/input.css:2:5]
+ 2 | color: *;
+   : ^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/delim-token/asterisk/input.css:2:5]
+ 2 | color: *;
+   : ^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/delim-token/asterisk/input.css:2:5]
+ 2 | color: *;
+   : ^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/delim-token/asterisk/input.css:2:5]
+ 2 | color: *;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/asterisk/input.css:2:5]
+ 2 | color: *;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/asterisk/input.css:2:5]
+ 2 | color: *;
+   :        ^
+   `----
+
+  x Delim { value: '*' }
+   ,-[$DIR/tests/recovery/delim-token/asterisk/input.css:2:5]
+ 2 | color: *;
+   :        ^
+   `----

crates/swc_css_parser/tests/recovery/delim-token/at-sign/span.rust-debug

@@ -0,0 +1,124 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/delim-token/at-sign/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: @ red;
+ 3 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/delim-token/at-sign/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: @ red;
+ 3 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/delim-token/at-sign/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: @ red;
+ 3 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/delim-token/at-sign/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/delim-token/at-sign/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/delim-token/at-sign/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/delim-token/at-sign/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/delim-token/at-sign/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/delim-token/at-sign/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/at-sign/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/delim-token/at-sign/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: @ red;
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/at-sign/input.css:2:5]
+ 2 | color: @ red;
+   : ^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/delim-token/at-sign/input.css:2:5]
+ 2 | color: @ red;
+   : ^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/delim-token/at-sign/input.css:2:5]
+ 2 | color: @ red;
+   : ^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/delim-token/at-sign/input.css:2:5]
+ 2 | color: @ red;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/at-sign/input.css:2:5]
+ 2 | color: @ red;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/at-sign/input.css:2:5]
+ 2 | color: @ red;
+   :        ^
+   `----
+
+  x Delim { value: '@' }
+   ,-[$DIR/tests/recovery/delim-token/at-sign/input.css:2:5]
+ 2 | color: @ red;
+   :        ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/at-sign/input.css:2:5]
+ 2 | color: @ red;
+   :          ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/at-sign/input.css:2:5]
+ 2 | color: @ red;
+   :          ^^^
+   `----

crates/swc_css_parser/tests/recovery/delim-token/bang/span.rust-debug

@@ -0,0 +1,124 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/delim-token/bang/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: !!;
+ 3 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/delim-token/bang/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: !!;
+ 3 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/delim-token/bang/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: !!;
+ 3 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/delim-token/bang/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/delim-token/bang/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/delim-token/bang/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/delim-token/bang/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/delim-token/bang/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/delim-token/bang/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/bang/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/delim-token/bang/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: !!;
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/bang/input.css:2:5]
+ 2 | color: !!;
+   : ^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/delim-token/bang/input.css:2:5]
+ 2 | color: !!;
+   : ^^^^^^^^^^
+   `----
+
+  x Tokens
+   ,-[$DIR/tests/recovery/delim-token/bang/input.css:2:5]
+ 2 | color: !!;
+   : ^^^^^^^^^^
+   `----
+
+  x Ident { value: Atom('color' type=inline), raw: Atom('color' type=inline) }
+   ,-[$DIR/tests/recovery/delim-token/bang/input.css:2:5]
+ 2 | color: !!;
+   : ^^^^^
+   `----
+
+  x Colon
+   ,-[$DIR/tests/recovery/delim-token/bang/input.css:2:5]
+ 2 | color: !!;
+   :      ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/delim-token/bang/input.css:2:5]
+ 2 | color: !!;
+   :       ^
+   `----
+
+  x Delim { value: '!' }
+   ,-[$DIR/tests/recovery/delim-token/bang/input.css:2:5]
+ 2 | color: !!;
+   :        ^
+   `----
+
+  x Delim { value: '!' }
+   ,-[$DIR/tests/recovery/delim-token/bang/input.css:2:5]
+ 2 | color: !!;
+   :         ^
+   `----
+
+  x Semi
+   ,-[$DIR/tests/recovery/delim-token/bang/input.css:2:5]
+ 2 | color: !!;
+   :          ^
+   `----

crates/swc_css_parser/tests/recovery/delim-token/bar/span.rust-debug

@@ -0,0 +1,112 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/delim-token/bar/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: |;
+ 3 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/delim-token/bar/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: |;
+ 3 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/delim-token/bar/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: |;
+ 3 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/delim-token/bar/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/delim-token/bar/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/delim-token/bar/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/delim-token/bar/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/delim-token/bar/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/delim-token/bar/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/bar/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/delim-token/bar/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: |;
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/bar/input.css:2:5]
+ 2 | prop: |;
+   : ^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/delim-token/bar/input.css:2:5]
+ 2 | prop: |;
+   : ^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/delim-token/bar/input.css:2:5]
+ 2 | prop: |;
+   : ^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/delim-token/bar/input.css:2:5]
+ 2 | prop: |;
+   : ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/bar/input.css:2:5]
+ 2 | prop: |;
+   : ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/bar/input.css:2:5]
+ 2 | prop: |;
+   :       ^
+   `----
+
+  x Delim { value: '|' }
+   ,-[$DIR/tests/recovery/delim-token/bar/input.css:2:5]
+ 2 | prop: |;
+   :       ^
+   `----

crates/swc_css_parser/tests/recovery/delim-token/caret/span.rust-debug

@@ -0,0 +1,112 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/delim-token/caret/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: ^;
+ 3 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/delim-token/caret/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: ^;
+ 3 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/delim-token/caret/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: ^;
+ 3 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/delim-token/caret/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/delim-token/caret/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/delim-token/caret/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/delim-token/caret/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/delim-token/caret/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/delim-token/caret/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/caret/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/delim-token/caret/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: ^;
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/caret/input.css:2:5]
+ 2 | prop: ^;
+   : ^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/delim-token/caret/input.css:2:5]
+ 2 | prop: ^;
+   : ^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/delim-token/caret/input.css:2:5]
+ 2 | prop: ^;
+   : ^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/delim-token/caret/input.css:2:5]
+ 2 | prop: ^;
+   : ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/caret/input.css:2:5]
+ 2 | prop: ^;
+   : ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/caret/input.css:2:5]
+ 2 | prop: ^;
+   :       ^
+   `----
+
+  x Delim { value: '^' }
+   ,-[$DIR/tests/recovery/delim-token/caret/input.css:2:5]
+ 2 | prop: ^;
+   :       ^
+   `----

crates/swc_css_parser/tests/recovery/delim-token/dollar/span.rust-debug

@@ -0,0 +1,112 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/delim-token/dollar/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: $;
+ 3 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/delim-token/dollar/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: $;
+ 3 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/delim-token/dollar/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: $;
+ 3 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/delim-token/dollar/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/delim-token/dollar/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/delim-token/dollar/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/delim-token/dollar/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/delim-token/dollar/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/delim-token/dollar/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/dollar/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/delim-token/dollar/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: $;
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/dollar/input.css:2:5]
+ 2 | prop: $;
+   : ^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/delim-token/dollar/input.css:2:5]
+ 2 | prop: $;
+   : ^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/delim-token/dollar/input.css:2:5]
+ 2 | prop: $;
+   : ^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/delim-token/dollar/input.css:2:5]
+ 2 | prop: $;
+   : ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/dollar/input.css:2:5]
+ 2 | prop: $;
+   : ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/dollar/input.css:2:5]
+ 2 | prop: $;
+   :       ^
+   `----
+
+  x Delim { value: '$' }
+   ,-[$DIR/tests/recovery/delim-token/dollar/input.css:2:5]
+ 2 | prop: $;
+   :       ^
+   `----

crates/swc_css_parser/tests/recovery/delim-token/equals/span.rust-debug

@@ -0,0 +1,112 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/delim-token/equals/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: =;
+ 3 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/delim-token/equals/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: =;
+ 3 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/delim-token/equals/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: =;
+ 3 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/delim-token/equals/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/delim-token/equals/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/delim-token/equals/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/delim-token/equals/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/delim-token/equals/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/delim-token/equals/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/equals/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/delim-token/equals/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: =;
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/equals/input.css:2:5]
+ 2 | prop: =;
+   : ^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/delim-token/equals/input.css:2:5]
+ 2 | prop: =;
+   : ^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/delim-token/equals/input.css:2:5]
+ 2 | prop: =;
+   : ^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/delim-token/equals/input.css:2:5]
+ 2 | prop: =;
+   : ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/equals/input.css:2:5]
+ 2 | prop: =;
+   : ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/equals/input.css:2:5]
+ 2 | prop: =;
+   :       ^
+   `----
+
+  x Delim { value: '=' }
+   ,-[$DIR/tests/recovery/delim-token/equals/input.css:2:5]
+ 2 | prop: =;
+   :       ^
+   `----

crates/swc_css_parser/tests/recovery/delim-token/greater-than/span.rust-debug

@@ -0,0 +1,112 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/delim-token/greater-than/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: >;
+ 3 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/delim-token/greater-than/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: >;
+ 3 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/delim-token/greater-than/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: >;
+ 3 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/delim-token/greater-than/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/delim-token/greater-than/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/delim-token/greater-than/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/delim-token/greater-than/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/delim-token/greater-than/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/delim-token/greater-than/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/greater-than/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/delim-token/greater-than/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: >;
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/greater-than/input.css:2:5]
+ 2 | prop: >;
+   : ^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/delim-token/greater-than/input.css:2:5]
+ 2 | prop: >;
+   : ^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/delim-token/greater-than/input.css:2:5]
+ 2 | prop: >;
+   : ^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/delim-token/greater-than/input.css:2:5]
+ 2 | prop: >;
+   : ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/greater-than/input.css:2:5]
+ 2 | prop: >;
+   : ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/greater-than/input.css:2:5]
+ 2 | prop: >;
+   :       ^
+   `----
+
+  x Delim { value: '>' }
+   ,-[$DIR/tests/recovery/delim-token/greater-than/input.css:2:5]
+ 2 | prop: >;
+   :       ^
+   `----

crates/swc_css_parser/tests/recovery/delim-token/hash/span.rust-debug

@@ -0,0 +1,124 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/delim-token/hash/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: ##;
+ 3 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/delim-token/hash/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: ##;
+ 3 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/delim-token/hash/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: ##;
+ 3 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/delim-token/hash/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/delim-token/hash/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/delim-token/hash/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/delim-token/hash/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/delim-token/hash/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/delim-token/hash/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/hash/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/delim-token/hash/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: ##;
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/hash/input.css:2:5]
+ 2 | color: ##;
+   : ^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/delim-token/hash/input.css:2:5]
+ 2 | color: ##;
+   : ^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/delim-token/hash/input.css:2:5]
+ 2 | color: ##;
+   : ^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/delim-token/hash/input.css:2:5]
+ 2 | color: ##;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/hash/input.css:2:5]
+ 2 | color: ##;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/hash/input.css:2:5]
+ 2 | color: ##;
+   :        ^
+   `----
+
+  x Delim { value: '#' }
+   ,-[$DIR/tests/recovery/delim-token/hash/input.css:2:5]
+ 2 | color: ##;
+   :        ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/hash/input.css:2:5]
+ 2 | color: ##;
+   :         ^
+   `----
+
+  x Delim { value: '#' }
+   ,-[$DIR/tests/recovery/delim-token/hash/input.css:2:5]
+ 2 | color: ##;
+   :         ^
+   `----

crates/swc_css_parser/tests/recovery/delim-token/less-than/span.rust-debug

@@ -0,0 +1,112 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/delim-token/less-than/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: <;
+ 3 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/delim-token/less-than/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: <;
+ 3 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/delim-token/less-than/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: <;
+ 3 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/delim-token/less-than/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/delim-token/less-than/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/delim-token/less-than/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/delim-token/less-than/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/delim-token/less-than/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/delim-token/less-than/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/less-than/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/delim-token/less-than/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: <;
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/less-than/input.css:2:5]
+ 2 | color: <;
+   : ^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/delim-token/less-than/input.css:2:5]
+ 2 | color: <;
+   : ^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/delim-token/less-than/input.css:2:5]
+ 2 | color: <;
+   : ^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/delim-token/less-than/input.css:2:5]
+ 2 | color: <;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/less-than/input.css:2:5]
+ 2 | color: <;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/less-than/input.css:2:5]
+ 2 | color: <;
+   :        ^
+   `----
+
+  x Delim { value: '<' }
+   ,-[$DIR/tests/recovery/delim-token/less-than/input.css:2:5]
+ 2 | color: <;
+   :        ^
+   `----

crates/swc_css_parser/tests/recovery/delim-token/minus/span.rust-debug

@@ -0,0 +1,294 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: -;
+ 3 | |       prop1: 1 - 2;
+ 4 | |       prop2: func(1 - 2);
+ 5 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: -;
+ 3 | |       prop1: 1 - 2;
+ 4 | |       prop2: func(1 - 2);
+ 5 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: -;
+ 3 | |       prop1: 1 - 2;
+ 4 | |       prop2: func(1 - 2);
+ 5 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: -;
+ 3 | |       prop1: 1 - 2;
+ 4 | |       prop2: func(1 - 2);
+ 5 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:2:5]
+ 2 | prop: -;
+   : ^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:2:5]
+ 2 | prop: -;
+   : ^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:2:5]
+ 2 | prop: -;
+   : ^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:2:5]
+ 2 | prop: -;
+   : ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:2:5]
+ 2 | prop: -;
+   : ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:2:5]
+ 2 | prop: -;
+   :       ^
+   `----
+
+  x Delim { value: '-' }
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:2:5]
+ 2 | prop: -;
+   :       ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:3:5]
+ 3 | prop1: 1 - 2;
+   : ^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:3:5]
+ 3 | prop1: 1 - 2;
+   : ^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:3:5]
+ 3 | prop1: 1 - 2;
+   : ^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:3:5]
+ 3 | prop1: 1 - 2;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:3:5]
+ 3 | prop1: 1 - 2;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:3:5]
+ 3 | prop1: 1 - 2;
+   :        ^
+   `----
+
+  x Integer
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:3:5]
+ 3 | prop1: 1 - 2;
+   :        ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:3:5]
+ 3 | prop1: 1 - 2;
+   :          ^
+   `----
+
+  x Delim { value: '-' }
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:3:5]
+ 3 | prop1: 1 - 2;
+   :          ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:3:5]
+ 3 | prop1: 1 - 2;
+   :            ^
+   `----
+
+  x Integer
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:3:5]
+ 3 | prop1: 1 - 2;
+   :            ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:4:5]
+ 4 | prop2: func(1 - 2);
+   : ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:4:5]
+ 4 | prop2: func(1 - 2);
+   : ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:4:5]
+ 4 | prop2: func(1 - 2);
+   : ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:4:5]
+ 4 | prop2: func(1 - 2);
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:4:5]
+ 4 | prop2: func(1 - 2);
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:4:5]
+ 4 | prop2: func(1 - 2);
+   :        ^^^^^^^^^^^
+   `----
+
+  x Function
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:4:5]
+ 4 | prop2: func(1 - 2);
+   :        ^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:4:5]
+ 4 | prop2: func(1 - 2);
+   :        ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:4:5]
+ 4 | prop2: func(1 - 2);
+   :             ^
+   `----
+
+  x Number { value: 1.0, raw: Atom('1' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:4:5]
+ 4 | prop2: func(1 - 2);
+   :             ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:4:5]
+ 4 | prop2: func(1 - 2);
+   :              ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:4:5]
+ 4 | prop2: func(1 - 2);
+   :              ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:4:5]
+ 4 | prop2: func(1 - 2);
+   :               ^
+   `----
+
+  x Delim { value: '-' }
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:4:5]
+ 4 | prop2: func(1 - 2);
+   :               ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:4:5]
+ 4 | prop2: func(1 - 2);
+   :                ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:4:5]
+ 4 | prop2: func(1 - 2);
+   :                ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:4:5]
+ 4 | prop2: func(1 - 2);
+   :                 ^
+   `----
+
+  x Number { value: 2.0, raw: Atom('2' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/delim-token/minus/input.css:4:5]
+ 4 | prop2: func(1 - 2);
+   :                 ^
+   `----

crates/swc_css_parser/tests/recovery/delim-token/percent/span.rust-debug

@@ -0,0 +1,112 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/delim-token/percent/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: %;
+ 3 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/delim-token/percent/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: %;
+ 3 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/delim-token/percent/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: %;
+ 3 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/delim-token/percent/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/delim-token/percent/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/delim-token/percent/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/delim-token/percent/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/delim-token/percent/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/delim-token/percent/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/percent/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/delim-token/percent/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: %;
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/percent/input.css:2:5]
+ 2 | prop: %;
+   : ^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/delim-token/percent/input.css:2:5]
+ 2 | prop: %;
+   : ^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/delim-token/percent/input.css:2:5]
+ 2 | prop: %;
+   : ^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/delim-token/percent/input.css:2:5]
+ 2 | prop: %;
+   : ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/percent/input.css:2:5]
+ 2 | prop: %;
+   : ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/percent/input.css:2:5]
+ 2 | prop: %;
+   :       ^
+   `----
+
+  x Delim { value: '%' }
+   ,-[$DIR/tests/recovery/delim-token/percent/input.css:2:5]
+ 2 | prop: %;
+   :       ^
+   `----

crates/swc_css_parser/tests/recovery/delim-token/plus/span.rust-debug

@@ -0,0 +1,294 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: +;
+ 3 | |       prop1: 1 + 2;
+ 4 | |       prop2: func(1 + 2);
+ 5 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: +;
+ 3 | |       prop1: 1 + 2;
+ 4 | |       prop2: func(1 + 2);
+ 5 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: +;
+ 3 | |       prop1: 1 + 2;
+ 4 | |       prop2: func(1 + 2);
+ 5 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: +;
+ 3 | |       prop1: 1 + 2;
+ 4 | |       prop2: func(1 + 2);
+ 5 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:2:5]
+ 2 | prop: +;
+   : ^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:2:5]
+ 2 | prop: +;
+   : ^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:2:5]
+ 2 | prop: +;
+   : ^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:2:5]
+ 2 | prop: +;
+   : ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:2:5]
+ 2 | prop: +;
+   : ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:2:5]
+ 2 | prop: +;
+   :       ^
+   `----
+
+  x Delim { value: '+' }
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:2:5]
+ 2 | prop: +;
+   :       ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:3:5]
+ 3 | prop1: 1 + 2;
+   : ^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:3:5]
+ 3 | prop1: 1 + 2;
+   : ^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:3:5]
+ 3 | prop1: 1 + 2;
+   : ^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:3:5]
+ 3 | prop1: 1 + 2;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:3:5]
+ 3 | prop1: 1 + 2;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:3:5]
+ 3 | prop1: 1 + 2;
+   :        ^
+   `----
+
+  x Integer
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:3:5]
+ 3 | prop1: 1 + 2;
+   :        ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:3:5]
+ 3 | prop1: 1 + 2;
+   :          ^
+   `----
+
+  x Delim { value: '+' }
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:3:5]
+ 3 | prop1: 1 + 2;
+   :          ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:3:5]
+ 3 | prop1: 1 + 2;
+   :            ^
+   `----
+
+  x Integer
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:3:5]
+ 3 | prop1: 1 + 2;
+   :            ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:4:5]
+ 4 | prop2: func(1 + 2);
+   : ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:4:5]
+ 4 | prop2: func(1 + 2);
+   : ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:4:5]
+ 4 | prop2: func(1 + 2);
+   : ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:4:5]
+ 4 | prop2: func(1 + 2);
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:4:5]
+ 4 | prop2: func(1 + 2);
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:4:5]
+ 4 | prop2: func(1 + 2);
+   :        ^^^^^^^^^^^
+   `----
+
+  x Function
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:4:5]
+ 4 | prop2: func(1 + 2);
+   :        ^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:4:5]
+ 4 | prop2: func(1 + 2);
+   :        ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:4:5]
+ 4 | prop2: func(1 + 2);
+   :             ^
+   `----
+
+  x Number { value: 1.0, raw: Atom('1' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:4:5]
+ 4 | prop2: func(1 + 2);
+   :             ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:4:5]
+ 4 | prop2: func(1 + 2);
+   :              ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:4:5]
+ 4 | prop2: func(1 + 2);
+   :              ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:4:5]
+ 4 | prop2: func(1 + 2);
+   :               ^
+   `----
+
+  x Delim { value: '+' }
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:4:5]
+ 4 | prop2: func(1 + 2);
+   :               ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:4:5]
+ 4 | prop2: func(1 + 2);
+   :                ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:4:5]
+ 4 | prop2: func(1 + 2);
+   :                ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:4:5]
+ 4 | prop2: func(1 + 2);
+   :                 ^
+   `----
+
+  x Number { value: 2.0, raw: Atom('2' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/delim-token/plus/input.css:4:5]
+ 4 | prop2: func(1 + 2);
+   :                 ^
+   `----

crates/swc_css_parser/tests/recovery/delim-token/question-mark/span.rust-debug

@@ -0,0 +1,112 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/delim-token/question-mark/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: ?;
+ 3 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/delim-token/question-mark/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: ?;
+ 3 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/delim-token/question-mark/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: ?;
+ 3 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/delim-token/question-mark/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/delim-token/question-mark/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/delim-token/question-mark/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/delim-token/question-mark/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/delim-token/question-mark/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/delim-token/question-mark/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/question-mark/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/delim-token/question-mark/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: ?;
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/question-mark/input.css:2:5]
+ 2 | color: ?;
+   : ^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/delim-token/question-mark/input.css:2:5]
+ 2 | color: ?;
+   : ^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/delim-token/question-mark/input.css:2:5]
+ 2 | color: ?;
+   : ^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/delim-token/question-mark/input.css:2:5]
+ 2 | color: ?;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/question-mark/input.css:2:5]
+ 2 | color: ?;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/question-mark/input.css:2:5]
+ 2 | color: ?;
+   :        ^
+   `----
+
+  x Delim { value: '?' }
+   ,-[$DIR/tests/recovery/delim-token/question-mark/input.css:2:5]
+ 2 | color: ?;
+   :        ^
+   `----

crates/swc_css_parser/tests/recovery/delim-token/star/span.rust-debug

@@ -0,0 +1,112 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/delim-token/star/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: *;
+ 3 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/delim-token/star/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: *;
+ 3 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/delim-token/star/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: *;
+ 3 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/delim-token/star/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/delim-token/star/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/delim-token/star/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/delim-token/star/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/delim-token/star/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/delim-token/star/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/star/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/delim-token/star/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: *;
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/star/input.css:2:5]
+ 2 | color: *;
+   : ^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/delim-token/star/input.css:2:5]
+ 2 | color: *;
+   : ^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/delim-token/star/input.css:2:5]
+ 2 | color: *;
+   : ^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/delim-token/star/input.css:2:5]
+ 2 | color: *;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/star/input.css:2:5]
+ 2 | color: *;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/star/input.css:2:5]
+ 2 | color: *;
+   :        ^
+   `----
+
+  x Delim { value: '*' }
+   ,-[$DIR/tests/recovery/delim-token/star/input.css:2:5]
+ 2 | color: *;
+   :        ^
+   `----

crates/swc_css_parser/tests/recovery/delim-token/tilde/span.rust-debug

@@ -0,0 +1,112 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/delim-token/tilde/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: ~;
+ 3 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/delim-token/tilde/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: ~;
+ 3 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/delim-token/tilde/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: ~;
+ 3 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/delim-token/tilde/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/delim-token/tilde/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/delim-token/tilde/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/delim-token/tilde/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/delim-token/tilde/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/delim-token/tilde/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/tilde/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/delim-token/tilde/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       color: ~;
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/tilde/input.css:2:5]
+ 2 | color: ~;
+   : ^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/delim-token/tilde/input.css:2:5]
+ 2 | color: ~;
+   : ^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/delim-token/tilde/input.css:2:5]
+ 2 | color: ~;
+   : ^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/delim-token/tilde/input.css:2:5]
+ 2 | color: ~;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/delim-token/tilde/input.css:2:5]
+ 2 | color: ~;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/delim-token/tilde/input.css:2:5]
+ 2 | color: ~;
+   :        ^
+   `----
+
+  x Delim { value: '~' }
+   ,-[$DIR/tests/recovery/delim-token/tilde/input.css:2:5]
+ 2 | color: ~;
+   :        ^
+   `----

crates/swc_css_parser/tests/recovery/function-token/span.rust-debug

@@ -0,0 +1,142 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/function-token/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: url("test") :
+ 3 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/function-token/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: url("test") :
+ 3 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/function-token/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: url("test") :
+ 3 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/function-token/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/function-token/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/function-token/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/function-token/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/function-token/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/function-token/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function-token/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/function-token/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: url("test") :
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function-token/input.css:2:5]
+ 2 | prop: url("test") :
+   : ^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/function-token/input.css:2:5]
+ 2 | prop: url("test") :
+   : ^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/function-token/input.css:2:5]
+ 2 | prop: url("test") :
+   : ^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/function-token/input.css:2:5]
+ 2 | prop: url("test") :
+   : ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function-token/input.css:2:5]
+ 2 | prop: url("test") :
+   : ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function-token/input.css:2:5]
+ 2 | prop: url("test") :
+   :       ^^^^^^^^^^^
+   `----
+
+  x Url
+   ,-[$DIR/tests/recovery/function-token/input.css:2:5]
+ 2 | prop: url("test") :
+   :       ^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function-token/input.css:2:5]
+ 2 | prop: url("test") :
+   :       ^^^
+   `----
+
+  x UrlValue
+   ,-[$DIR/tests/recovery/function-token/input.css:2:5]
+ 2 | prop: url("test") :
+   :           ^^^^^^
+   `----
+
+  x Str
+   ,-[$DIR/tests/recovery/function-token/input.css:2:5]
+ 2 | prop: url("test") :
+   :           ^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function-token/input.css:2:5]
+ 2 | prop: url("test") :
+   :                   ^
+   `----
+
+  x Colon
+   ,-[$DIR/tests/recovery/function-token/input.css:2:5]
+ 2 | prop: url("test") :
+   :                   ^
+   `----

crates/swc_css_parser/tests/recovery/function/bad-comment-2/span.rust-debug

@@ -0,0 +1,140 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/function/bad-comment-2/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       background: url(
+ 3 | |           /* test */
+ 4 | |           "test.png"
+ 5 | |       );
+ 6 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/function/bad-comment-2/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       background: url(
+ 3 | |           /* test */
+ 4 | |           "test.png"
+ 5 | |       );
+ 6 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/function/bad-comment-2/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       background: url(
+ 3 | |           /* test */
+ 4 | |           "test.png"
+ 5 | |       );
+ 6 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/function/bad-comment-2/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/function/bad-comment-2/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/function/bad-comment-2/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/function/bad-comment-2/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/function/bad-comment-2/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/function/bad-comment-2/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/bad-comment-2/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/function/bad-comment-2/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       background: url(
+ 3 | |           /* test */
+ 4 | |           "test.png"
+ 5 | |       );
+ 6 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/bad-comment-2/input.css:2:5]
+ 2 | ,-> background: url(
+ 3 | |           /* test */
+ 4 | |           "test.png"
+ 5 | `->     );
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/function/bad-comment-2/input.css:2:5]
+ 2 | ,-> background: url(
+ 3 | |           /* test */
+ 4 | |           "test.png"
+ 5 | `->     );
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/function/bad-comment-2/input.css:2:5]
+ 2 | ,-> background: url(
+ 3 | |           /* test */
+ 4 | |           "test.png"
+ 5 | `->     );
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/function/bad-comment-2/input.css:2:5]
+ 2 | background: url(
+   : ^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/bad-comment-2/input.css:2:5]
+ 2 | background: url(
+   : ^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/bad-comment-2/input.css:2:5]
+ 2 | ,-> background: url(
+ 3 | |           /* test */
+ 4 | |           "test.png"
+ 5 | `->     );
+   `----
+
+  x BadUrl { name: Atom('url' type=static), raw_name: Atom('url' type=static), value: Atom('
+  |         /* test */
+  |         "test.png"
+  |     ' type=dynamic), raw_value: Atom('
+  |         /* test */
+  |         "test.png"
+  |     ' type=dynamic) }
+   ,-[$DIR/tests/recovery/function/bad-comment-2/input.css:2:5]
+ 2 | ,-> background: url(
+ 3 | |           /* test */
+ 4 | |           "test.png"
+ 5 | `->     );
+   `----

crates/swc_css_parser/tests/recovery/function/bad-comment/span.rust-debug

@@ -0,0 +1,140 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/function/bad-comment/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       background: url(
+ 3 | |           /* test */
+ 4 | |           test.png
+ 5 | |       );
+ 6 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/function/bad-comment/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       background: url(
+ 3 | |           /* test */
+ 4 | |           test.png
+ 5 | |       );
+ 6 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/function/bad-comment/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       background: url(
+ 3 | |           /* test */
+ 4 | |           test.png
+ 5 | |       );
+ 6 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/function/bad-comment/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/function/bad-comment/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/function/bad-comment/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/function/bad-comment/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/function/bad-comment/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/function/bad-comment/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/bad-comment/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/function/bad-comment/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       background: url(
+ 3 | |           /* test */
+ 4 | |           test.png
+ 5 | |       );
+ 6 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/bad-comment/input.css:2:5]
+ 2 | ,-> background: url(
+ 3 | |           /* test */
+ 4 | |           test.png
+ 5 | `->     );
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/function/bad-comment/input.css:2:5]
+ 2 | ,-> background: url(
+ 3 | |           /* test */
+ 4 | |           test.png
+ 5 | `->     );
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/function/bad-comment/input.css:2:5]
+ 2 | ,-> background: url(
+ 3 | |           /* test */
+ 4 | |           test.png
+ 5 | `->     );
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/function/bad-comment/input.css:2:5]
+ 2 | background: url(
+   : ^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/bad-comment/input.css:2:5]
+ 2 | background: url(
+   : ^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/bad-comment/input.css:2:5]
+ 2 | ,-> background: url(
+ 3 | |           /* test */
+ 4 | |           test.png
+ 5 | `->     );
+   `----
+
+  x BadUrl { name: Atom('url' type=static), raw_name: Atom('url' type=static), value: Atom('
+  |         /* test */
+  |         test.png
+  |     ' type=dynamic), raw_value: Atom('
+  |         /* test */
+  |         test.png
+  |     ' type=dynamic) }
+   ,-[$DIR/tests/recovery/function/bad-comment/input.css:2:5]
+ 2 | ,-> background: url(
+ 3 | |           /* test */
+ 4 | |           test.png
+ 5 | `->     );
+   `----

crates/swc_css_parser/tests/recovery/function/base/span.rust-debug

@@ -0,0 +1,754 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/function/base/input.css:1:1]
+ 1 | ,-> div {
+ 2 | |       prop: func(1 + 2);
+ 3 | |       prop: func(ident.ident);
+ 4 | |       prop: func3(   ident.ident   );
+ 5 | |       prop: func([foo bar]);
+ 6 | |       prop: func((foo, bar));
+ 7 | |       prop: func({ foo: bar });
+ 8 | |       prop: func(1, 2);
+ 9 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/function/base/input.css:1:1]
+ 1 | ,-> div {
+ 2 | |       prop: func(1 + 2);
+ 3 | |       prop: func(ident.ident);
+ 4 | |       prop: func3(   ident.ident   );
+ 5 | |       prop: func([foo bar]);
+ 6 | |       prop: func((foo, bar));
+ 7 | |       prop: func({ foo: bar });
+ 8 | |       prop: func(1, 2);
+ 9 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/function/base/input.css:1:1]
+ 1 | ,-> div {
+ 2 | |       prop: func(1 + 2);
+ 3 | |       prop: func(ident.ident);
+ 4 | |       prop: func3(   ident.ident   );
+ 5 | |       prop: func([foo bar]);
+ 6 | |       prop: func((foo, bar));
+ 7 | |       prop: func({ foo: bar });
+ 8 | |       prop: func(1, 2);
+ 9 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/function/base/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/function/base/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/function/base/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/function/base/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/function/base/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/function/base/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/base/input.css:1:1]
+ 1 | div {
+   : ^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/function/base/input.css:1:1]
+ 1 | ,-> div {
+ 2 | |       prop: func(1 + 2);
+ 3 | |       prop: func(ident.ident);
+ 4 | |       prop: func3(   ident.ident   );
+ 5 | |       prop: func([foo bar]);
+ 6 | |       prop: func((foo, bar));
+ 7 | |       prop: func({ foo: bar });
+ 8 | |       prop: func(1, 2);
+ 9 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:2:5]
+ 2 | prop: func(1 + 2);
+   : ^^^^^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/function/base/input.css:2:5]
+ 2 | prop: func(1 + 2);
+   : ^^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/function/base/input.css:2:5]
+ 2 | prop: func(1 + 2);
+   : ^^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/function/base/input.css:2:5]
+ 2 | prop: func(1 + 2);
+   : ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/base/input.css:2:5]
+ 2 | prop: func(1 + 2);
+   : ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:2:5]
+ 2 | prop: func(1 + 2);
+   :       ^^^^^^^^^^^
+   `----
+
+  x Function
+   ,-[$DIR/tests/recovery/function/base/input.css:2:5]
+ 2 | prop: func(1 + 2);
+   :       ^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/base/input.css:2:5]
+ 2 | prop: func(1 + 2);
+   :       ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:2:5]
+ 2 | prop: func(1 + 2);
+   :            ^
+   `----
+
+  x Number { value: 1.0, raw: Atom('1' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/function/base/input.css:2:5]
+ 2 | prop: func(1 + 2);
+   :            ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:2:5]
+ 2 | prop: func(1 + 2);
+   :             ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/function/base/input.css:2:5]
+ 2 | prop: func(1 + 2);
+   :             ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:2:5]
+ 2 | prop: func(1 + 2);
+   :              ^
+   `----
+
+  x Delim { value: '+' }
+   ,-[$DIR/tests/recovery/function/base/input.css:2:5]
+ 2 | prop: func(1 + 2);
+   :              ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:2:5]
+ 2 | prop: func(1 + 2);
+   :               ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/function/base/input.css:2:5]
+ 2 | prop: func(1 + 2);
+   :               ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:2:5]
+ 2 | prop: func(1 + 2);
+   :                ^
+   `----
+
+  x Number { value: 2.0, raw: Atom('2' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/function/base/input.css:2:5]
+ 2 | prop: func(1 + 2);
+   :                ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:3:5]
+ 3 | prop: func(ident.ident);
+   : ^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/function/base/input.css:3:5]
+ 3 | prop: func(ident.ident);
+   : ^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/function/base/input.css:3:5]
+ 3 | prop: func(ident.ident);
+   : ^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/function/base/input.css:3:5]
+ 3 | prop: func(ident.ident);
+   : ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/base/input.css:3:5]
+ 3 | prop: func(ident.ident);
+   : ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:3:5]
+ 3 | prop: func(ident.ident);
+   :       ^^^^^^^^^^^^^^^^^
+   `----
+
+  x Function
+   ,-[$DIR/tests/recovery/function/base/input.css:3:5]
+ 3 | prop: func(ident.ident);
+   :       ^^^^^^^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/base/input.css:3:5]
+ 3 | prop: func(ident.ident);
+   :       ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:3:5]
+ 3 | prop: func(ident.ident);
+   :            ^^^^^
+   `----
+
+  x Ident { value: Atom('ident' type=inline), raw: Atom('ident' type=inline) }
+   ,-[$DIR/tests/recovery/function/base/input.css:3:5]
+ 3 | prop: func(ident.ident);
+   :            ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:3:5]
+ 3 | prop: func(ident.ident);
+   :                 ^
+   `----
+
+  x Delim { value: '.' }
+   ,-[$DIR/tests/recovery/function/base/input.css:3:5]
+ 3 | prop: func(ident.ident);
+   :                 ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:3:5]
+ 3 | prop: func(ident.ident);
+   :                  ^^^^^
+   `----
+
+  x Ident { value: Atom('ident' type=inline), raw: Atom('ident' type=inline) }
+   ,-[$DIR/tests/recovery/function/base/input.css:3:5]
+ 3 | prop: func(ident.ident);
+   :                  ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:4:5]
+ 4 | prop: func3(   ident.ident   );
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/function/base/input.css:4:5]
+ 4 | prop: func3(   ident.ident   );
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/function/base/input.css:4:5]
+ 4 | prop: func3(   ident.ident   );
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/function/base/input.css:4:5]
+ 4 | prop: func3(   ident.ident   );
+   : ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/base/input.css:4:5]
+ 4 | prop: func3(   ident.ident   );
+   : ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:4:5]
+ 4 | prop: func3(   ident.ident   );
+   :       ^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Function
+   ,-[$DIR/tests/recovery/function/base/input.css:4:5]
+ 4 | prop: func3(   ident.ident   );
+   :       ^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/base/input.css:4:5]
+ 4 | prop: func3(   ident.ident   );
+   :       ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:4:5]
+ 4 | prop: func3(   ident.ident   );
+   :             ^^^
+   `----
+
+  x WhiteSpace { value: Atom('   ' type=inline) }
+   ,-[$DIR/tests/recovery/function/base/input.css:4:5]
+ 4 | prop: func3(   ident.ident   );
+   :             ^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:4:5]
+ 4 | prop: func3(   ident.ident   );
+   :                ^^^^^
+   `----
+
+  x Ident { value: Atom('ident' type=inline), raw: Atom('ident' type=inline) }
+   ,-[$DIR/tests/recovery/function/base/input.css:4:5]
+ 4 | prop: func3(   ident.ident   );
+   :                ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:4:5]
+ 4 | prop: func3(   ident.ident   );
+   :                     ^
+   `----
+
+  x Delim { value: '.' }
+   ,-[$DIR/tests/recovery/function/base/input.css:4:5]
+ 4 | prop: func3(   ident.ident   );
+   :                     ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:4:5]
+ 4 | prop: func3(   ident.ident   );
+   :                      ^^^^^
+   `----
+
+  x Ident { value: Atom('ident' type=inline), raw: Atom('ident' type=inline) }
+   ,-[$DIR/tests/recovery/function/base/input.css:4:5]
+ 4 | prop: func3(   ident.ident   );
+   :                      ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:4:5]
+ 4 | prop: func3(   ident.ident   );
+   :                           ^^^
+   `----
+
+  x WhiteSpace { value: Atom('   ' type=inline) }
+   ,-[$DIR/tests/recovery/function/base/input.css:4:5]
+ 4 | prop: func3(   ident.ident   );
+   :                           ^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:5:5]
+ 5 | prop: func([foo bar]);
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/function/base/input.css:5:5]
+ 5 | prop: func([foo bar]);
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/function/base/input.css:5:5]
+ 5 | prop: func([foo bar]);
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/function/base/input.css:5:5]
+ 5 | prop: func([foo bar]);
+   : ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/base/input.css:5:5]
+ 5 | prop: func([foo bar]);
+   : ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:5:5]
+ 5 | prop: func([foo bar]);
+   :       ^^^^^^^^^^^^^^^
+   `----
+
+  x Function
+   ,-[$DIR/tests/recovery/function/base/input.css:5:5]
+ 5 | prop: func([foo bar]);
+   :       ^^^^^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/base/input.css:5:5]
+ 5 | prop: func([foo bar]);
+   :       ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:5:5]
+ 5 | prop: func([foo bar]);
+   :            ^^^^^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/function/base/input.css:5:5]
+ 5 | prop: func([foo bar]);
+   :            ^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:5:5]
+ 5 | prop: func([foo bar]);
+   :             ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/base/input.css:5:5]
+ 5 | prop: func([foo bar]);
+   :             ^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:5:5]
+ 5 | prop: func([foo bar]);
+   :                 ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/base/input.css:5:5]
+ 5 | prop: func([foo bar]);
+   :                 ^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:6:5]
+ 6 | prop: func((foo, bar));
+   : ^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/function/base/input.css:6:5]
+ 6 | prop: func((foo, bar));
+   : ^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/function/base/input.css:6:5]
+ 6 | prop: func((foo, bar));
+   : ^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/function/base/input.css:6:5]
+ 6 | prop: func((foo, bar));
+   : ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/base/input.css:6:5]
+ 6 | prop: func((foo, bar));
+   : ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:6:5]
+ 6 | prop: func((foo, bar));
+   :       ^^^^^^^^^^^^^^^^
+   `----
+
+  x Function
+   ,-[$DIR/tests/recovery/function/base/input.css:6:5]
+ 6 | prop: func((foo, bar));
+   :       ^^^^^^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/base/input.css:6:5]
+ 6 | prop: func((foo, bar));
+   :       ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:6:5]
+ 6 | prop: func((foo, bar));
+   :            ^^^^^^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/function/base/input.css:6:5]
+ 6 | prop: func((foo, bar));
+   :            ^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:6:5]
+ 6 | prop: func((foo, bar));
+   :             ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/base/input.css:6:5]
+ 6 | prop: func((foo, bar));
+   :             ^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:6:5]
+ 6 | prop: func((foo, bar));
+   :                ^
+   `----
+
+  x Delimiter
+   ,-[$DIR/tests/recovery/function/base/input.css:6:5]
+ 6 | prop: func((foo, bar));
+   :                ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:6:5]
+ 6 | prop: func((foo, bar));
+   :                  ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/base/input.css:6:5]
+ 6 | prop: func((foo, bar));
+   :                  ^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:7:5]
+ 7 | prop: func({ foo: bar });
+   : ^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/function/base/input.css:7:5]
+ 7 | prop: func({ foo: bar });
+   : ^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/function/base/input.css:7:5]
+ 7 | prop: func({ foo: bar });
+   : ^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/function/base/input.css:7:5]
+ 7 | prop: func({ foo: bar });
+   : ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/base/input.css:7:5]
+ 7 | prop: func({ foo: bar });
+   : ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:7:5]
+ 7 | prop: func({ foo: bar });
+   :       ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Function
+   ,-[$DIR/tests/recovery/function/base/input.css:7:5]
+ 7 | prop: func({ foo: bar });
+   :       ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/base/input.css:7:5]
+ 7 | prop: func({ foo: bar });
+   :       ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:7:5]
+ 7 | prop: func({ foo: bar });
+   :            ^^^^^^^^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/function/base/input.css:7:5]
+ 7 | prop: func({ foo: bar });
+   :            ^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:7:5]
+ 7 | prop: func({ foo: bar });
+   :              ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/base/input.css:7:5]
+ 7 | prop: func({ foo: bar });
+   :              ^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:7:5]
+ 7 | prop: func({ foo: bar });
+   :                 ^
+   `----
+
+  x Colon
+   ,-[$DIR/tests/recovery/function/base/input.css:7:5]
+ 7 | prop: func({ foo: bar });
+   :                 ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:7:5]
+ 7 | prop: func({ foo: bar });
+   :                   ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/base/input.css:7:5]
+ 7 | prop: func({ foo: bar });
+   :                   ^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:8:5]
+ 8 | prop: func(1, 2);
+   : ^^^^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/function/base/input.css:8:5]
+ 8 | prop: func(1, 2);
+   : ^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/function/base/input.css:8:5]
+ 8 | prop: func(1, 2);
+   : ^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/function/base/input.css:8:5]
+ 8 | prop: func(1, 2);
+   : ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/base/input.css:8:5]
+ 8 | prop: func(1, 2);
+   : ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:8:5]
+ 8 | prop: func(1, 2);
+   :       ^^^^^^^^^^
+   `----
+
+  x Function
+   ,-[$DIR/tests/recovery/function/base/input.css:8:5]
+ 8 | prop: func(1, 2);
+   :       ^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/base/input.css:8:5]
+ 8 | prop: func(1, 2);
+   :       ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:8:5]
+ 8 | prop: func(1, 2);
+   :            ^
+   `----
+
+  x Integer
+   ,-[$DIR/tests/recovery/function/base/input.css:8:5]
+ 8 | prop: func(1, 2);
+   :            ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:8:5]
+ 8 | prop: func(1, 2);
+   :             ^
+   `----
+
+  x Delimiter
+   ,-[$DIR/tests/recovery/function/base/input.css:8:5]
+ 8 | prop: func(1, 2);
+   :             ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/base/input.css:8:5]
+ 8 | prop: func(1, 2);
+   :               ^
+   `----
+
+  x Integer
+   ,-[$DIR/tests/recovery/function/base/input.css:8:5]
+ 8 | prop: func(1, 2);
+   :               ^
+   `----

crates/swc_css_parser/tests/recovery/function/calc/division/span.rust-debug

@@ -0,0 +1,220 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:1:1]
+ 1 | ,-> .style {
+ 2 | |   	width: calc(2px/1px);
+ 3 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:1:1]
+ 1 | ,-> .style {
+ 2 | |   	width: calc(2px/1px);
+ 3 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:1:1]
+ 1 | ,-> .style {
+ 2 | |   	width: calc(2px/1px);
+ 3 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:1:1]
+ 1 | .style {
+   : ^^^^^^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:1:1]
+ 1 | .style {
+   : ^^^^^^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:1:1]
+ 1 | .style {
+   : ^^^^^^
+   `----
+
+  x SubclassSelector
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:1:1]
+ 1 | .style {
+   : ^^^^^^
+   `----
+
+  x ClassSelector
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:1:1]
+ 1 | .style {
+   : ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:1:1]
+ 1 | .style {
+   :  ^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:1:1]
+ 1 | ,-> .style {
+ 2 | |   	width: calc(2px/1px);
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   : ^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   : ^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   : ^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   :        ^^^^^^^^^^^^^
+   `----
+
+  x Function
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   :        ^^^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   :        ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   :             ^^^^^^^
+   `----
+
+  x CalcSum
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   :             ^^^^^^^
+   `----
+
+  x CalcProductOrOperator
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   :             ^^^^^^^
+   `----
+
+  x CalcProduct
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   :             ^^^^^^^
+   `----
+
+  x CalcValueOrOperator
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   :             ^^^
+   `----
+
+  x CalcValue
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   :             ^^^
+   `----
+
+  x Dimension
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   :             ^^^
+   `----
+
+  x Length
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   :             ^^^
+   `----
+
+  x Number
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   :             ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   :              ^^
+   `----
+
+  x CalcValueOrOperator
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   :                ^
+   `----
+
+  x CalcOperator
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   :                ^
+   `----
+
+  x CalcValueOrOperator
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   :                 ^^^
+   `----
+
+  x CalcValue
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   :                 ^^^
+   `----
+
+  x Dimension
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   :                 ^^^
+   `----
+
+  x Length
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   :                 ^^^
+   `----
+
+  x Number
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   :                 ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/calc/division/input.css:2:5]
+ 2 | width: calc(2px/1px);
+   :                  ^^
+   `----

crates/swc_css_parser/tests/recovery/function/calc/space/span.rust-debug

@@ -0,0 +1,232 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:1:1]
+ 1 | ,-> .style {
+ 2 | |   	width: calc(2px+1px);
+ 3 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:1:1]
+ 1 | ,-> .style {
+ 2 | |   	width: calc(2px+1px);
+ 3 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:1:1]
+ 1 | ,-> .style {
+ 2 | |   	width: calc(2px+1px);
+ 3 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:1:1]
+ 1 | .style {
+   : ^^^^^^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:1:1]
+ 1 | .style {
+   : ^^^^^^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:1:1]
+ 1 | .style {
+   : ^^^^^^
+   `----
+
+  x SubclassSelector
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:1:1]
+ 1 | .style {
+   : ^^^^^^
+   `----
+
+  x ClassSelector
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:1:1]
+ 1 | .style {
+   : ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:1:1]
+ 1 | .style {
+   :  ^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:1:1]
+ 1 | ,-> .style {
+ 2 | |   	width: calc(2px+1px);
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   : ^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   : ^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   : ^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   :        ^^^^^^^^^^^^^
+   `----
+
+  x Function
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   :        ^^^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   :        ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   :             ^^^
+   `----
+
+  x CalcSum
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   :             ^^^
+   `----
+
+  x CalcProductOrOperator
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   :             ^^^
+   `----
+
+  x CalcProduct
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   :             ^^^
+   `----
+
+  x CalcValueOrOperator
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   :             ^^^
+   `----
+
+  x CalcValue
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   :             ^^^
+   `----
+
+  x Dimension
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   :             ^^^
+   `----
+
+  x Length
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   :             ^^^
+   `----
+
+  x Number
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   :             ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   :              ^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   :                ^^^^
+   `----
+
+  x CalcSum
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   :                ^^^^
+   `----
+
+  x CalcProductOrOperator
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   :                ^^^^
+   `----
+
+  x CalcProduct
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   :                ^^^^
+   `----
+
+  x CalcValueOrOperator
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   :                ^^^^
+   `----
+
+  x CalcValue
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   :                ^^^^
+   `----
+
+  x Dimension
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   :                ^^^^
+   `----
+
+  x Length
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   :                ^^^^
+   `----
+
+  x Number
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   :                ^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/calc/space/input.css:2:5]
+ 2 | width: calc(2px+1px);
+   :                  ^^
+   `----

crates/swc_css_parser/tests/recovery/function/unclosed-2/span.rust-debug

@@ -0,0 +1,236 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:1:1]
+ 1 | ,-> .style {
+ 2 | |   	grid-template-columns: repeat(4, [col-start] 12px
+ 3 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:1:1]
+ 1 | ,-> .style {
+ 2 | |   	grid-template-columns: repeat(4, [col-start] 12px
+ 3 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:1:1]
+ 1 | ,-> .style {
+ 2 | |   	grid-template-columns: repeat(4, [col-start] 12px
+ 3 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:1:1]
+ 1 | .style {
+   : ^^^^^^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:1:1]
+ 1 | .style {
+   : ^^^^^^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:1:1]
+ 1 | .style {
+   : ^^^^^^
+   `----
+
+  x SubclassSelector
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:1:1]
+ 1 | .style {
+   : ^^^^^^
+   `----
+
+  x ClassSelector
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:1:1]
+ 1 | .style {
+   : ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:1:1]
+ 1 | .style {
+   :  ^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:1:1]
+ 1 | ,-> .style {
+ 2 | |   	grid-template-columns: repeat(4, [col-start] 12px
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:2:5]
+ 2 | ,-> grid-template-columns: repeat(4, [col-start] 12px
+ 3 | `-> }
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:2:5]
+ 2 | ,-> grid-template-columns: repeat(4, [col-start] 12px
+ 3 | `-> }
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:2:5]
+ 2 | ,-> grid-template-columns: repeat(4, [col-start] 12px
+ 3 | `-> }
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:2:5]
+ 2 | grid-template-columns: repeat(4, [col-start] 12px
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:2:5]
+ 2 | grid-template-columns: repeat(4, [col-start] 12px
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:2:5]
+ 2 | ,-> grid-template-columns: repeat(4, [col-start] 12px
+ 3 | `-> }
+   `----
+
+  x Function
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:2:5]
+ 2 | ,-> grid-template-columns: repeat(4, [col-start] 12px
+ 3 | `-> }
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:2:5]
+ 2 | grid-template-columns: repeat(4, [col-start] 12px
+   :                        ^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:2:5]
+ 2 | grid-template-columns: repeat(4, [col-start] 12px
+   :                               ^
+   `----
+
+  x Number { value: 4.0, raw: Atom('4' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:2:5]
+ 2 | grid-template-columns: repeat(4, [col-start] 12px
+   :                               ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:2:5]
+ 2 | grid-template-columns: repeat(4, [col-start] 12px
+   :                                ^
+   `----
+
+  x Comma
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:2:5]
+ 2 | grid-template-columns: repeat(4, [col-start] 12px
+   :                                ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:2:5]
+ 2 | grid-template-columns: repeat(4, [col-start] 12px
+   :                                 ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:2:5]
+ 2 | grid-template-columns: repeat(4, [col-start] 12px
+   :                                 ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:2:5]
+ 2 | grid-template-columns: repeat(4, [col-start] 12px
+   :                                  ^^^^^^^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:2:5]
+ 2 | grid-template-columns: repeat(4, [col-start] 12px
+   :                                  ^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:2:5]
+ 2 | grid-template-columns: repeat(4, [col-start] 12px
+   :                                   ^^^^^^^^^
+   `----
+
+  x Ident { value: Atom('col-start' type=dynamic), raw: Atom('col-start' type=dynamic) }
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:2:5]
+ 2 | grid-template-columns: repeat(4, [col-start] 12px
+   :                                   ^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:2:5]
+ 2 | grid-template-columns: repeat(4, [col-start] 12px
+   :                                             ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:2:5]
+ 2 | grid-template-columns: repeat(4, [col-start] 12px
+   :                                             ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:2:5]
+ 2 | grid-template-columns: repeat(4, [col-start] 12px
+   :                                              ^^^^
+   `----
+
+  x Dimension { value: 12.0, raw_value: Atom('12' type=inline), unit: Atom('px' type=inline), raw_unit: Atom('px' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:2:5]
+ 2 | grid-template-columns: repeat(4, [col-start] 12px
+   :                                              ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:2:5]
+ 2 | grid-template-columns: repeat(4, [col-start] 12px
+   :                                                  ^
+ 3 | }
+   `----
+
+  x WhiteSpace { value: Atom('
+  | ' type=inline) }
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:2:5]
+ 2 | grid-template-columns: repeat(4, [col-start] 12px
+   :                                                  ^
+ 3 | }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:3:1]
+ 3 | }
+   : ^
+   `----
+
+  x RBrace
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:3:1]
+ 3 | }
+   : ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:3:1]
+ 3 | }
+   :  ^
+   `----
+
+  x WhiteSpace { value: Atom('
+  | ' type=inline) }
+   ,-[$DIR/tests/recovery/function/unclosed-2/input.css:3:1]
+ 3 | }
+   :  ^
+   `----

crates/swc_css_parser/tests/recovery/function/unclosed/span.rust-debug

@@ -0,0 +1,176 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:1:1]
+ 1 | ,-> .style {
+ 2 | |   	width: min(500px;
+ 3 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:1:1]
+ 1 | ,-> .style {
+ 2 | |   	width: min(500px;
+ 3 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:1:1]
+ 1 | ,-> .style {
+ 2 | |   	width: min(500px;
+ 3 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:1:1]
+ 1 | .style {
+   : ^^^^^^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:1:1]
+ 1 | .style {
+   : ^^^^^^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:1:1]
+ 1 | .style {
+   : ^^^^^^
+   `----
+
+  x SubclassSelector
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:1:1]
+ 1 | .style {
+   : ^^^^^^
+   `----
+
+  x ClassSelector
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:1:1]
+ 1 | .style {
+   : ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:1:1]
+ 1 | .style {
+   :  ^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:1:1]
+ 1 | ,-> .style {
+ 2 | |   	width: min(500px;
+ 3 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:2:5]
+ 2 | ,-> width: min(500px;
+ 3 | `-> }
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:2:5]
+ 2 | ,-> width: min(500px;
+ 3 | `-> }
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:2:5]
+ 2 | ,-> width: min(500px;
+ 3 | `-> }
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:2:5]
+ 2 | width: min(500px;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:2:5]
+ 2 | width: min(500px;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:2:5]
+ 2 | ,-> width: min(500px;
+ 3 | `-> }
+   `----
+
+  x Function
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:2:5]
+ 2 | ,-> width: min(500px;
+ 3 | `-> }
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:2:5]
+ 2 | width: min(500px;
+   :        ^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:2:5]
+ 2 | width: min(500px;
+   :            ^^^^^
+   `----
+
+  x Dimension { value: 500.0, raw_value: Atom('500' type=inline), unit: Atom('px' type=inline), raw_unit: Atom('px' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:2:5]
+ 2 | width: min(500px;
+   :            ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:2:5]
+ 2 | width: min(500px;
+   :                 ^
+   `----
+
+  x Semi
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:2:5]
+ 2 | width: min(500px;
+   :                 ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:2:5]
+ 2 | width: min(500px;
+   :                  ^
+ 3 | }
+   `----
+
+  x WhiteSpace { value: Atom('
+  | ' type=inline) }
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:2:5]
+ 2 | width: min(500px;
+   :                  ^
+ 3 | }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:3:1]
+ 3 | }
+   : ^
+   `----
+
+  x RBrace
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:3:1]
+ 3 | }
+   : ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:3:1]
+ 3 | }
+   :  ^
+   `----
+
+  x WhiteSpace { value: Atom('
+  | ' type=inline) }
+   ,-[$DIR/tests/recovery/function/unclosed/input.css:3:1]
+ 3 | }
+   :  ^
+   `----

crates/swc_css_parser/tests/recovery/function/var/span.rust-debug

@@ -0,0 +1,402 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/function/var/input.css:1:1]
+ 1 | ,-> .style {
+ 2 | |   	border: var(#fff);
+ 3 | |   	border: var(calc(10px + 10px));
+ 4 | |   	border: var(90rem);
+ 5 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/function/var/input.css:1:1]
+ 1 | ,-> .style {
+ 2 | |   	border: var(#fff);
+ 3 | |   	border: var(calc(10px + 10px));
+ 4 | |   	border: var(90rem);
+ 5 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/function/var/input.css:1:1]
+ 1 | ,-> .style {
+ 2 | |   	border: var(#fff);
+ 3 | |   	border: var(calc(10px + 10px));
+ 4 | |   	border: var(90rem);
+ 5 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/function/var/input.css:1:1]
+ 1 | .style {
+   : ^^^^^^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/function/var/input.css:1:1]
+ 1 | .style {
+   : ^^^^^^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/function/var/input.css:1:1]
+ 1 | .style {
+   : ^^^^^^
+   `----
+
+  x SubclassSelector
+   ,-[$DIR/tests/recovery/function/var/input.css:1:1]
+ 1 | .style {
+   : ^^^^^^
+   `----
+
+  x ClassSelector
+   ,-[$DIR/tests/recovery/function/var/input.css:1:1]
+ 1 | .style {
+   : ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/var/input.css:1:1]
+ 1 | .style {
+   :  ^^^^^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/function/var/input.css:1:1]
+ 1 | ,-> .style {
+ 2 | |   	border: var(#fff);
+ 3 | |   	border: var(calc(10px + 10px));
+ 4 | |   	border: var(90rem);
+ 5 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/var/input.css:2:5]
+ 2 | border: var(#fff);
+   : ^^^^^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/function/var/input.css:2:5]
+ 2 | border: var(#fff);
+   : ^^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/function/var/input.css:2:5]
+ 2 | border: var(#fff);
+   : ^^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/function/var/input.css:2:5]
+ 2 | border: var(#fff);
+   : ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/var/input.css:2:5]
+ 2 | border: var(#fff);
+   : ^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/var/input.css:2:5]
+ 2 | border: var(#fff);
+   :         ^^^^^^^^^
+   `----
+
+  x Function
+   ,-[$DIR/tests/recovery/function/var/input.css:2:5]
+ 2 | border: var(#fff);
+   :         ^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/var/input.css:2:5]
+ 2 | border: var(#fff);
+   :         ^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/var/input.css:2:5]
+ 2 | border: var(#fff);
+   :             ^^^^
+   `----
+
+  x Color
+   ,-[$DIR/tests/recovery/function/var/input.css:2:5]
+ 2 | border: var(#fff);
+   :             ^^^^
+   `----
+
+  x HexColor
+   ,-[$DIR/tests/recovery/function/var/input.css:2:5]
+ 2 | border: var(#fff);
+   :             ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   : ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   : ^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :         ^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Function
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :         ^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :         ^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :             ^^^^^^^^^^^^^^^^^
+   `----
+
+  x Function
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :             ^^^^^^^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :             ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :                  ^^^^^^^^^^^
+   `----
+
+  x CalcSum
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :                  ^^^^^^^^^^^
+   `----
+
+  x CalcProductOrOperator
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :                  ^^^^
+   `----
+
+  x CalcProduct
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :                  ^^^^
+   `----
+
+  x CalcValueOrOperator
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :                  ^^^^
+   `----
+
+  x CalcValue
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :                  ^^^^
+   `----
+
+  x Dimension
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :                  ^^^^
+   `----
+
+  x Length
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :                  ^^^^
+   `----
+
+  x Number
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :                  ^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :                    ^^
+   `----
+
+  x CalcProductOrOperator
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :                       ^
+   `----
+
+  x CalcOperator
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :                       ^
+   `----
+
+  x CalcProductOrOperator
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :                         ^^^^
+   `----
+
+  x CalcProduct
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :                         ^^^^
+   `----
+
+  x CalcValueOrOperator
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :                         ^^^^
+   `----
+
+  x CalcValue
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :                         ^^^^
+   `----
+
+  x Dimension
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :                         ^^^^
+   `----
+
+  x Length
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :                         ^^^^
+   `----
+
+  x Number
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :                         ^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/var/input.css:3:5]
+ 3 | border: var(calc(10px + 10px));
+   :                           ^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/var/input.css:4:5]
+ 4 | border: var(90rem);
+   : ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/function/var/input.css:4:5]
+ 4 | border: var(90rem);
+   : ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/function/var/input.css:4:5]
+ 4 | border: var(90rem);
+   : ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/function/var/input.css:4:5]
+ 4 | border: var(90rem);
+   : ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/var/input.css:4:5]
+ 4 | border: var(90rem);
+   : ^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/var/input.css:4:5]
+ 4 | border: var(90rem);
+   :         ^^^^^^^^^^
+   `----
+
+  x Function
+   ,-[$DIR/tests/recovery/function/var/input.css:4:5]
+ 4 | border: var(90rem);
+   :         ^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/var/input.css:4:5]
+ 4 | border: var(90rem);
+   :         ^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/function/var/input.css:4:5]
+ 4 | border: var(90rem);
+   :             ^^^^^
+   `----
+
+  x Dimension
+   ,-[$DIR/tests/recovery/function/var/input.css:4:5]
+ 4 | border: var(90rem);
+   :             ^^^^^
+   `----
+
+  x Length
+   ,-[$DIR/tests/recovery/function/var/input.css:4:5]
+ 4 | border: var(90rem);
+   :             ^^^^^
+   `----
+
+  x Number
+   ,-[$DIR/tests/recovery/function/var/input.css:4:5]
+ 4 | border: var(90rem);
+   :             ^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/function/var/input.css:4:5]
+ 4 | border: var(90rem);
+   :               ^^^
+   `----

crates/swc_css_parser/tests/recovery/ie-progid/span.rust-debug

@@ -0,0 +1,608 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/ie-progid/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+ 3 | |       filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+ 4 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/ie-progid/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+ 3 | |       filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+ 4 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/ie-progid/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+ 3 | |       filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+ 4 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/ie-progid/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/ie-progid/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/ie-progid/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/ie-progid/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/ie-progid/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/ie-progid/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/ie-progid/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/ie-progid/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+ 3 | |       filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+ 4 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   : ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   : ^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :        ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :        ^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :              ^
+   `----
+
+  x Colon
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :              ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :               ^^^^^^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :               ^^^^^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                               ^
+   `----
+
+  x Delim { value: '.' }
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                               ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                ^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                ^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                         ^
+   `----
+
+  x Delim { value: '.' }
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                         ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Function
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                          ^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                                   ^^^^^^^^^^^^^
+   `----
+
+  x Ident { value: Atom('startColorstr' type=dynamic), raw: Atom('startColorstr' type=dynamic) }
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                                   ^^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                                                ^
+   `----
+
+  x Delim { value: '=' }
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                                                ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                                                 ^^^^^^^^^
+   `----
+
+  x String { value: Atom('#4f4f4f' type=inline), raw: Atom(''#4f4f4f'' type=dynamic) }
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                                                 ^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                                                          ^
+   `----
+
+  x Comma
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                                                          ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                                                           ^^^^^^^^^^^
+   `----
+
+  x Ident { value: Atom('endColorstr' type=dynamic), raw: Atom('endColorstr' type=dynamic) }
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                                                           ^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                                                                      ^
+   `----
+
+  x Delim { value: '=' }
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                                                                      ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                                                                       ^^^^^^^^^
+   `----
+
+  x String { value: Atom('#292929' type=inline), raw: Atom(''#292929'' type=dynamic) }
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                                                                       ^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                                                                                ^
+   `----
+
+  x Comma
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                                                                                ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                                                                                 ^^^^^^^^^^^^
+   `----
+
+  x Ident { value: Atom('GradientType' type=dynamic), raw: Atom('GradientType' type=dynamic) }
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                                                                                 ^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                                                                                             ^
+   `----
+
+  x Delim { value: '=' }
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                                                                                             ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                                                                                              ^
+   `----
+
+  x Number { value: 0.0, raw: Atom('0' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/ie-progid/input.css:2:5]
+ 2 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0);
+   :                                                                                                              ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   : ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   : ^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :         ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :         ^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :               ^
+   `----
+
+  x Colon
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :               ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                ^^^^^^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                ^^^^^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                ^
+   `----
+
+  x Delim { value: '.' }
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                 ^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                 ^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                          ^
+   `----
+
+  x Delim { value: '.' }
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                          ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                           ^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Function
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                           ^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                           ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                ^^^^^^^^^^^
+   `----
+
+  x Ident { value: Atom('pixelradius' type=dynamic), raw: Atom('pixelradius' type=dynamic) }
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                ^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                           ^
+   `----
+
+  x Delim { value: '=' }
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                           ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                            ^
+   `----
+
+  x Number { value: 2.0, raw: Atom('2' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                            ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                               ^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                               ^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                                     ^
+   `----
+
+  x Colon
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                                     ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                                      ^^^^^^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                                      ^^^^^^^^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                                                      ^
+   `----
+
+  x Delim { value: '.' }
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                                                      ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                                                       ^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                                                       ^^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                                                                ^
+   `----
+
+  x Delim { value: '.' }
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                                                                ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                                                                 ^^^^^^^^^^^^^^^^^
+   `----
+
+  x Function
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                                                                 ^^^^^^^^^^^^^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                                                                 ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                                                                       ^^^^^^^^
+   `----
+
+  x Ident { value: Atom('duration' type=dynamic), raw: Atom('duration' type=dynamic) }
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                                                                       ^^^^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                                                                               ^
+   `----
+
+  x Delim { value: '=' }
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                                                                               ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                                                                                ^
+   `----
+
+  x Number { value: 3.0, raw: Atom('3' type=inline), type_flag: Integer }
+   ,-[$DIR/tests/recovery/ie-progid/input.css:3:5]
+ 3 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
+   :                                                                                                                ^
+   `----

crates/swc_css_parser/tests/recovery/number/span.rust-debug

@@ -0,0 +1,274 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/number/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: 10.10px
+ 3 | |       prop1: 10px
+ 4 | |       prop2: 10
+ 5 | |       prop3: 10.10
+ 6 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/number/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: 10.10px
+ 3 | |       prop1: 10px
+ 4 | |       prop2: 10
+ 5 | |       prop3: 10.10
+ 6 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/number/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: 10.10px
+ 3 | |       prop1: 10px
+ 4 | |       prop2: 10
+ 5 | |       prop3: 10.10
+ 6 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/number/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/number/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/number/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/number/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/number/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/number/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/number/input.css:1:1]
+ 1 | a {
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/number/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       prop: 10.10px
+ 3 | |       prop1: 10px
+ 4 | |       prop2: 10
+ 5 | |       prop3: 10.10
+ 6 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/number/input.css:2:5]
+ 2 | ,-> prop: 10.10px
+ 3 | |       prop1: 10px
+ 4 | |       prop2: 10
+ 5 | `->     prop3: 10.10
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/number/input.css:2:5]
+ 2 | ,-> prop: 10.10px
+ 3 | |       prop1: 10px
+ 4 | |       prop2: 10
+ 5 | `->     prop3: 10.10
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/number/input.css:2:5]
+ 2 | ,-> prop: 10.10px
+ 3 | |       prop1: 10px
+ 4 | |       prop2: 10
+ 5 | `->     prop3: 10.10
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/number/input.css:2:5]
+ 2 | prop: 10.10px
+   : ^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/number/input.css:2:5]
+ 2 | prop: 10.10px
+   : ^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/number/input.css:2:5]
+ 2 | prop: 10.10px
+   :       ^^^^^^^
+   `----
+
+  x Dimension
+   ,-[$DIR/tests/recovery/number/input.css:2:5]
+ 2 | prop: 10.10px
+   :       ^^^^^^^
+   `----
+
+  x Length
+   ,-[$DIR/tests/recovery/number/input.css:2:5]
+ 2 | prop: 10.10px
+   :       ^^^^^^^
+   `----
+
+  x Number
+   ,-[$DIR/tests/recovery/number/input.css:2:5]
+ 2 | prop: 10.10px
+   :       ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/number/input.css:2:5]
+ 2 | prop: 10.10px
+   :            ^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/number/input.css:3:5]
+ 3 | prop1: 10px
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/number/input.css:3:5]
+ 3 | prop1: 10px
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/number/input.css:3:5]
+ 3 | prop1: 10px
+   :      ^
+   `----
+
+  x Colon
+   ,-[$DIR/tests/recovery/number/input.css:3:5]
+ 3 | prop1: 10px
+   :      ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/number/input.css:3:5]
+ 3 | prop1: 10px
+   :        ^^^^
+   `----
+
+  x Dimension
+   ,-[$DIR/tests/recovery/number/input.css:3:5]
+ 3 | prop1: 10px
+   :        ^^^^
+   `----
+
+  x Length
+   ,-[$DIR/tests/recovery/number/input.css:3:5]
+ 3 | prop1: 10px
+   :        ^^^^
+   `----
+
+  x Number
+   ,-[$DIR/tests/recovery/number/input.css:3:5]
+ 3 | prop1: 10px
+   :        ^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/number/input.css:3:5]
+ 3 | prop1: 10px
+   :          ^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/number/input.css:4:5]
+ 4 | prop2: 10
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/number/input.css:4:5]
+ 4 | prop2: 10
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/number/input.css:4:5]
+ 4 | prop2: 10
+   :      ^
+   `----
+
+  x Colon
+   ,-[$DIR/tests/recovery/number/input.css:4:5]
+ 4 | prop2: 10
+   :      ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/number/input.css:4:5]
+ 4 | prop2: 10
+   :        ^^
+   `----
+
+  x Integer
+   ,-[$DIR/tests/recovery/number/input.css:4:5]
+ 4 | prop2: 10
+   :        ^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/number/input.css:5:5]
+ 5 | prop3: 10.10
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/number/input.css:5:5]
+ 5 | prop3: 10.10
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/number/input.css:5:5]
+ 5 | prop3: 10.10
+   :      ^
+   `----
+
+  x Colon
+   ,-[$DIR/tests/recovery/number/input.css:5:5]
+ 5 | prop3: 10.10
+   :      ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/number/input.css:5:5]
+ 5 | prop3: 10.10
+   :        ^^^^^
+   `----
+
+  x Number
+   ,-[$DIR/tests/recovery/number/input.css:5:5]
+ 5 | prop3: 10.10
+   :        ^^^^^
+   `----

crates/swc_css_parser/tests/recovery/qualified-rule/basic/span.rust-debug

@@ -0,0 +1,128 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/qualified-rule/basic/input.css:1:1]
+ 1 | ,-> // test
+ 2 | |   
+ 3 | |   a {
+ 4 | |       color: red;
+ 5 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/qualified-rule/basic/input.css:1:1]
+ 1 | ,-> // test
+ 2 | |   
+ 3 | |   a {
+ 4 | |       color: red;
+ 5 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/qualified-rule/basic/input.css:1:1]
+ 1 | ,-> // test
+ 2 | |   
+ 3 | |   a {
+ 4 | |       color: red;
+ 5 | `-> }
+   `----
+
+  x Tokens
+   ,-[$DIR/tests/recovery/qualified-rule/basic/input.css:1:1]
+ 1 | ,-> // test
+ 2 | |   
+ 3 | `-> a {
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/recovery/qualified-rule/basic/input.css:1:1]
+ 1 | // test
+   : ^
+   `----
+
+  x Delim { value: '/' }
+   ,-[$DIR/tests/recovery/qualified-rule/basic/input.css:1:1]
+ 1 | // test
+   :  ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/qualified-rule/basic/input.css:1:1]
+ 1 | // test
+   :   ^
+   `----
+
+  x Ident { value: Atom('test' type=inline), raw: Atom('test' type=inline) }
+   ,-[$DIR/tests/recovery/qualified-rule/basic/input.css:1:1]
+ 1 | // test
+   :    ^^^^
+   `----
+
+  x WhiteSpace { value: Atom('
+  | 
+  | ' type=inline) }
+   ,-[$DIR/tests/recovery/qualified-rule/basic/input.css:1:1]
+ 1 | ,-> // test
+ 2 | `-> 
+ 3 |     a {
+   `----
+
+  x Ident { value: Atom('a' type=inline), raw: Atom('a' type=inline) }
+   ,-[$DIR/tests/recovery/qualified-rule/basic/input.css:3:1]
+ 3 | a {
+   : ^
+   `----
+
+  x WhiteSpace { value: Atom(' ' type=inline) }
+   ,-[$DIR/tests/recovery/qualified-rule/basic/input.css:3:1]
+ 3 | a {
+   :  ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/qualified-rule/basic/input.css:3:1]
+ 3 | ,-> a {
+ 4 | |       color: red;
+ 5 | `-> }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/qualified-rule/basic/input.css:4:5]
+ 4 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x StyleBlock
+   ,-[$DIR/tests/recovery/qualified-rule/basic/input.css:4:5]
+ 4 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/qualified-rule/basic/input.css:4:5]
+ 4 | color: red;
+   : ^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/qualified-rule/basic/input.css:4:5]
+ 4 | color: red;
+   : ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/qualified-rule/basic/input.css:4:5]
+ 4 | color: red;
+   : ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/qualified-rule/basic/input.css:4:5]
+ 4 | color: red;
+   :        ^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/qualified-rule/basic/input.css:4:5]
+ 4 | color: red;
+   :        ^^^
+   `----