fix(css): Fix @keyframes at-rule (#3331)

2024-12-23 13:51:19 +03:00 · 2022-01-21 04:55:49 +03:00 · 2022-01-21 04:55:49 +03:00 · f89ffa67ae
commit f89ffa67ae
parent 846a91e14c
80 changed files with 898 additions and 159 deletions
--- a/crates/swc_css_ast/src/at_rule/keyframe.rs
+++ b/crates/swc_css_ast/src/at_rule/keyframe.rs
@ -1,10 +1,10 @@
-use crate::{AtRule, Block, Ident, PercentValue, Str};
+use crate::{AtRule, Block, CustomIdent, Ident, PercentValue, Str};
 use swc_common::{ast_node, Span};

 #[ast_node]
 pub enum KeyframesName {
-    #[tag("Ident")]
-    Ident(Ident),
+    #[tag("CustomIdent")]
+    CustomIdent(CustomIdent),
    #[tag("Str")]
    Str(Str),
 }
--- a/crates/swc_css_ast/src/base.rs
+++ b/crates/swc_css_ast/src/base.rs
@ -8,6 +8,13 @@ pub struct Ident {
    pub raw: JsWord,
 }

+#[ast_node("CustomIdentifier")]
+pub struct CustomIdent {
+    pub span: Span,
+    pub value: JsWord,
+    pub raw: JsWord,
+}
+
 /// Quoted string.
 #[ast_node("String")]
 pub struct Str {
--- a/crates/swc_css_codegen/src/lib.rs
+++ b/crates/swc_css_codegen/src/lib.rs
@ -144,7 +144,7 @@ where
    #[emitter]
    fn emit_keyframes_name(&mut self, n: &KeyframesName) -> Result {
        match n {
-            KeyframesName::Ident(n) => emit!(self, n),
+            KeyframesName::CustomIdent(n) => emit!(self, n),
            KeyframesName::Str(n) => emit!(self, n),
        }
    }
@ -156,19 +156,7 @@ where
        space!(self);

        emit!(self, n.name);
-
-        match &n.name {
-            KeyframesName::Ident(n) => {
-                if !n.value.is_empty() {
-                    space!(self);
-                }
-            }
-            KeyframesName::Str(n) => {
-                if !n.value.is_empty() {
-                    space!(self);
-                }
-            }
-        }
+        space!(self);

        punct!(self, "{");
        self.emit_list(&n.blocks, ListFormat::NotDelimited)?;
@ -672,6 +660,11 @@ where
        self.wr.write_raw(Some(n.span), &n.raw)?;
    }

+    #[emitter]
+    fn emit_custom_ident(&mut self, n: &CustomIdent) -> Result {
+        self.wr.write_raw(Some(n.span), &n.raw)?;
+    }
+
    #[emitter]
    fn emit_keyframe_block_rule(&mut self, n: &KeyframeBlockRule) -> Result {
        match n {
--- a/crates/swc_css_parser/src/error.rs
+++ b/crates/swc_css_parser/src/error.rs
@ -51,6 +51,14 @@ impl Error {
            ErrorKind::UnknownAtRuleNotTerminated => "Unknown @rule is not terminated".into(),
            ErrorKind::InvalidDeclarationValue => "Expected a property value".into(),
            ErrorKind::InvalidAnPlusBMicrosyntax => "Invalid An+B microsyntax".into(),
+            ErrorKind::InvalidCustomIdent(s) => format!(
+                "The CSS-wide keywords are not valid custom-ident, found '{}'",
+                s
+            )
+            .into(),
+            ErrorKind::InvalidKeyframesName(s) => {
+                format!("{} is not valid name for keyframes", s).into()
+            }
        };
        handler.struct_span_err(self.inner.0, &msg)
    }
@ -84,6 +92,8 @@ pub enum ErrorKind {
    InvalidLayerBlockAtRule,
    InvalidMediaQuery,
    InvalidAnPlusBMicrosyntax,
+    InvalidCustomIdent(&'static str),
+    InvalidKeyframesName(&'static str),

    UnknownAtRuleNotTerminated,
 }
--- a/crates/swc_css_parser/src/macros.rs
+++ b/crates/swc_css_parser/src/macros.rs
@ -12,6 +12,14 @@ macro_rules! tok {
        swc_css_ast::Token::Function { .. }
    };

+    ("ident") => {
+        swc_css_ast::Token::Ident { .. }
+    };
+
+    ("str") => {
+        swc_css_ast::Token::Str { .. }
+    };
+
    ("bad-string") => {
        swc_css_ast::Token::BadStr { .. }
    };
--- a/crates/swc_css_parser/src/parser/at_rule.rs
+++ b/crates/swc_css_parser/src/parser/at_rule.rs
@ -5,7 +5,7 @@ use crate::{
    Parse,
 };
 use swc_atoms::js_word;
-use swc_common::{Span, DUMMY_SP};
+use swc_common::Span;
 use swc_css_ast::*;

 #[derive(Debug, Default)]
@ -338,22 +338,24 @@ where
 {
    fn parse(&mut self) -> PResult<KeyframesRule> {
        let span = self.input.cur_span()?;
-        let name = match bump!(self) {
-            Token::Ident { value, raw } => KeyframesName::Ident(Ident {
-                span: span!(self, span.lo),
-                value,
-                raw,
-            }),
-            Token::Str { value, raw } => KeyframesName::Str(Str {
-                span: span!(self, span.lo),
-                value,
-                raw,
-            }),
-            _ => KeyframesName::Ident(Ident {
-                span: DUMMY_SP,
-                value: js_word!(""),
-                raw: js_word!(""),
-            }),
+        let name = match cur!(self) {
+            tok!("ident") => {
+                let custom_ident: CustomIdent = self.parse()?;
+
+                match &*custom_ident.value.to_ascii_lowercase() {
+                    "none" => {
+                        return Err(Error::new(
+                            span,
+                            ErrorKind::InvalidCustomIdent(stringify!(value)),
+                        ));
+                    }
+                    _ => {}
+                }
+
+                KeyframesName::CustomIdent(custom_ident)
+            }
+            tok!("str") => KeyframesName::Str(self.parse()?),
+            _ => return Err(Error::new(span, ErrorKind::Expected("ident or string"))),
        };
        let mut blocks = vec![];

--- a/crates/swc_css_parser/src/parser/value/mod.rs
+++ b/crates/swc_css_parser/src/parser/value/mod.rs
@ -660,6 +660,38 @@ where
    }
 }

+impl<I> Parse<CustomIdent> for Parser<I>
+where
+    I: ParserInput,
+{
+    fn parse(&mut self) -> PResult<CustomIdent> {
+        let span = self.input.cur_span()?;
+
+        if !is!(self, Ident) {
+            return Err(Error::new(span, ErrorKind::Expected("Ident")));
+        }
+
+        match bump!(self) {
+            Token::Ident { value, raw } => {
+                match &*value.to_ascii_lowercase() {
+                    "initial" | "inherit" | "unset" | "revert" | "default" => {
+                        return Err(Error::new(
+                            span,
+                            ErrorKind::InvalidCustomIdent(stringify!(value)),
+                        ));
+                    }
+                    _ => {}
+                }
+
+                Ok(CustomIdent { span, value, raw })
+            }
+            _ => {
+                unreachable!()
+            }
+        }
+    }
+}
+
 impl<I> Parse<Ident> for Parser<I>
 where
    I: ParserInput,
--- a/crates/swc_css_parser/tests/fixture.rs
+++ b/crates/swc_css_parser/tests/fixture.rs
@ -313,6 +313,7 @@ impl Visit for SpanVisualizer<'_> {
    mtd!(SubclassSelector, visit_subclass_selector);
    mtd!(TagSelector, visit_tag_selector);
    mtd!(Ident, visit_ident);
+    mtd!(CustomIdent, visit_custom_ident);
    mtd!(Tokens, visit_tokens);
    mtd!(Unit, visit_unit);
    mtd!(UnitValue, visit_unit_value);
--- a/crates/swc_css_parser/tests/fixture/at-rule/keyframe/input.css
+++ b/crates/swc_css_parser/tests/fixture/at-rule/keyframe/input.css
@ -18,3 +18,7 @@
    68%, 72% { left: 50px; }
    100% { top: 100px; left: 100%; }
 }
+
+@keyframes FOO {}
+@keyframes "initial" {}
+@keyframes "None" {}
--- a/crates/swc_css_parser/tests/fixture/at-rule/keyframe/output.json
+++ b/crates/swc_css_parser/tests/fixture/at-rule/keyframe/output.json
@ -2,7 +2,7 @@
  "type": "Stylesheet",
  "span": {
    "start": 0,
-    "end": 368,
+    "end": 432,
    "ctxt": 0
  },
  "rules": [
@ -14,7 +14,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 11,
          "end": 14,
@ -52,7 +52,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 74,
          "end": 77,
@ -71,7 +71,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 107,
          "end": 114,
@ -267,7 +267,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 236,
          "end": 246,
@ -689,6 +689,63 @@
          }
        }
      ]
+    },
+    {
+      "type": "KeyframesRule",
+      "span": {
+        "start": 369,
+        "end": 386,
+        "ctxt": 0
+      },
+      "name": {
+        "type": "CustomIdentifier",
+        "span": {
+          "start": 380,
+          "end": 383,
+          "ctxt": 0
+        },
+        "value": "FOO",
+        "raw": "FOO"
+      },
+      "blocks": []
+    },
+    {
+      "type": "KeyframesRule",
+      "span": {
+        "start": 387,
+        "end": 410,
+        "ctxt": 0
+      },
+      "name": {
+        "type": "String",
+        "span": {
+          "start": 398,
+          "end": 407,
+          "ctxt": 0
+        },
+        "value": "initial",
+        "raw": "\"initial\""
+      },
+      "blocks": []
+    },
+    {
+      "type": "KeyframesRule",
+      "span": {
+        "start": 411,
+        "end": 431,
+        "ctxt": 0
+      },
+      "name": {
+        "type": "String",
+        "span": {
+          "start": 422,
+          "end": 428,
+          "ctxt": 0
+        },
+        "value": "None",
+        "raw": "\"None\""
+      },
+      "blocks": []
    }
  ]
 }
--- a/crates/swc_css_parser/tests/fixture/at-rule/keyframe/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/at-rule/keyframe/span.rust-debug
@ -6,9 +6,9 @@ error: Stylesheet
 3  | | @keyframes    foo    { /* ... */ }
 4  | |
 ...  |
-19 | |     100% { top: 100px; left: 100%; }
-20 | | }
-   | |__^
+23 | | @keyframes "initial" {}
+24 | | @keyframes "None" {}
+   | |_____________________^

 error: Rule
 --> $DIR/tests/fixture/at-rule/keyframe/input.css:1:1
@ -28,7 +28,7 @@ error: KeyframesRule
 1 | @keyframes foo { /* ... */ }
  | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/at-rule/keyframe/input.css:1:12
  |
 1 | @keyframes foo { /* ... */ }
@ -76,7 +76,7 @@ error: KeyframesRule
 3 | @keyframes    foo    { /* ... */ }
  | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/at-rule/keyframe/input.css:3:15
  |
 3 | @keyframes    foo    { /* ... */ }
@ -118,7 +118,7 @@ error: KeyframesRule
 13 | | }
   | |_^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/at-rule/keyframe/input.css:5:12
  |
 5 | @keyframes slidein {
@ -329,7 +329,7 @@ error: KeyframesRule
 20 | | }
   | |_^

-error: Ident
+error: CustomIdent
  --> $DIR/tests/fixture/at-rule/keyframe/input.css:15:12
   |
 15 | @keyframes identifier {
@ -683,3 +683,75 @@ error: Num
 19 |     100% { top: 100px; left: 100%; }
   |                              ^^^

+error: Rule
+  --> $DIR/tests/fixture/at-rule/keyframe/input.css:22:1
+   |
+22 | @keyframes FOO {}
+   | ^^^^^^^^^^^^^^^^^
+
+error: AtRule
+  --> $DIR/tests/fixture/at-rule/keyframe/input.css:22:1
+   |
+22 | @keyframes FOO {}
+   | ^^^^^^^^^^^^^^^^^
+
+error: KeyframesRule
+  --> $DIR/tests/fixture/at-rule/keyframe/input.css:22:1
+   |
+22 | @keyframes FOO {}
+   | ^^^^^^^^^^^^^^^^^
+
+error: CustomIdent
+  --> $DIR/tests/fixture/at-rule/keyframe/input.css:22:12
+   |
+22 | @keyframes FOO {}
+   |            ^^^
+
+error: Rule
+  --> $DIR/tests/fixture/at-rule/keyframe/input.css:23:1
+   |
+23 | @keyframes "initial" {}
+   | ^^^^^^^^^^^^^^^^^^^^^^^
+
+error: AtRule
+  --> $DIR/tests/fixture/at-rule/keyframe/input.css:23:1
+   |
+23 | @keyframes "initial" {}
+   | ^^^^^^^^^^^^^^^^^^^^^^^
+
+error: KeyframesRule
+  --> $DIR/tests/fixture/at-rule/keyframe/input.css:23:1
+   |
+23 | @keyframes "initial" {}
+   | ^^^^^^^^^^^^^^^^^^^^^^^
+
+error: Str
+  --> $DIR/tests/fixture/at-rule/keyframe/input.css:23:12
+   |
+23 | @keyframes "initial" {}
+   |            ^^^^^^^^^
+
+error: Rule
+  --> $DIR/tests/fixture/at-rule/keyframe/input.css:24:1
+   |
+24 | @keyframes "None" {}
+   | ^^^^^^^^^^^^^^^^^^^^
+
+error: AtRule
+  --> $DIR/tests/fixture/at-rule/keyframe/input.css:24:1
+   |
+24 | @keyframes "None" {}
+   | ^^^^^^^^^^^^^^^^^^^^
+
+error: KeyframesRule
+  --> $DIR/tests/fixture/at-rule/keyframe/input.css:24:1
+   |
+24 | @keyframes "None" {}
+   | ^^^^^^^^^^^^^^^^^^^^
+
+error: Str
+  --> $DIR/tests/fixture/at-rule/keyframe/input.css:24:12
+   |
+24 | @keyframes "None" {}
+   |            ^^^^^^
+
--- a/crates/swc_css_parser/tests/fixture/at-rule/layer/output.json
+++ b/crates/swc_css_parser/tests/fixture/at-rule/layer/output.json
@ -151,7 +151,7 @@
            "ctxt": 0
          },
          "name": {
-            "type": "Identifier",
+            "type": "CustomIdentifier",
            "span": {
              "start": 87,
              "end": 97,
@ -339,7 +339,7 @@
            "ctxt": 0
          },
          "name": {
-            "type": "Identifier",
+            "type": "CustomIdentifier",
            "span": {
              "start": 209,
              "end": 219,
--- a/crates/swc_css_parser/tests/fixture/at-rule/layer/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/at-rule/layer/span.rust-debug
@ -172,7 +172,7 @@ error: KeyframesRule
 7 | |     }
  | |_____^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/at-rule/layer/input.css:4:16
  |
 4 |     @keyframes slide-left {
@ -382,7 +382,7 @@ error: KeyframesRule
 14 | |     }
   | |_____^

-error: Ident
+error: CustomIdent
  --> $DIR/tests/fixture/at-rule/layer/input.css:11:16
   |
 11 |     @keyframes slide-left {
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/375WZQg3bngUbuoHsqEIcA/output.json
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/375WZQg3bngUbuoHsqEIcA/output.json
@ -14,7 +14,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 11,
          "end": 15,
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/375WZQg3bngUbuoHsqEIcA/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/375WZQg3bngUbuoHsqEIcA/span.rust-debug
@ -22,7 +22,7 @@ error: KeyframesRule
 1 | @keyframes test { from { color: red } to {} }
  | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/esbuild/misc/375WZQg3bngUbuoHsqEIcA/input.css:1:12
  |
 1 | @keyframes test { from { color: red } to {} }
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/3a1KXFwtncypOUCwQI7IAw/output.json
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/3a1KXFwtncypOUCwQI7IAw/output.json
@ -14,7 +14,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 11,
          "end": 15,
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/3a1KXFwtncypOUCwQI7IAw/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/3a1KXFwtncypOUCwQI7IAw/span.rust-debug
@ -22,7 +22,7 @@ error: KeyframesRule
 1 | @keyframes name { 100% { color: red } }
  | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/esbuild/misc/3a1KXFwtncypOUCwQI7IAw/input.css:1:12
  |
 1 | @keyframes name { 100% { color: red } }
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/3qKvhk-8FQVONLpki0FoMA/output.json
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/3qKvhk-8FQVONLpki0FoMA/output.json
@ -14,7 +14,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 11,
          "end": 15,
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/3qKvhk-8FQVONLpki0FoMA/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/3qKvhk-8FQVONLpki0FoMA/span.rust-debug
@ -22,7 +22,7 @@ error: KeyframesRule
 1 | @keyframes name{}
  | ^^^^^^^^^^^^^^^^^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/esbuild/misc/3qKvhk-8FQVONLpki0FoMA/input.css:1:12
  |
 1 | @keyframes name{}
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/4_H2sj_CNmUQHGctk7geQQ/output.json
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/4_H2sj_CNmUQHGctk7geQQ/output.json
@ -14,7 +14,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 13,
          "end": 16,
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/4_H2sj_CNmUQHGctk7geQQ/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/4_H2sj_CNmUQHGctk7geQQ/span.rust-debug
@ -22,7 +22,7 @@ error: KeyframesRule
 1 | @k\65yframes abc { from {} }
  | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/esbuild/misc/4_H2sj_CNmUQHGctk7geQQ/input.css:1:14
  |
 1 | @k\65yframes abc { from {} }
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/AMheAL_TeyLZpn77YdNTZA/output.json
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/AMheAL_TeyLZpn77YdNTZA/output.json
@ -14,7 +14,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 11,
          "end": 14,
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/AMheAL_TeyLZpn77YdNTZA/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/AMheAL_TeyLZpn77YdNTZA/span.rust-debug
@ -22,7 +22,7 @@ error: KeyframesRule
 1 | @keyframes abc { \66rom {} }
  | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/esbuild/misc/AMheAL_TeyLZpn77YdNTZA/input.css:1:12
  |
 1 | @keyframes abc { \66rom {} }
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/ATZbhYBr7fOFJoZ4E2dwkA/output.json
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/ATZbhYBr7fOFJoZ4E2dwkA/output.json
@ -14,7 +14,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 11,
          "end": 15,
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/ATZbhYBr7fOFJoZ4E2dwkA/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/ATZbhYBr7fOFJoZ4E2dwkA/span.rust-debug
@ -22,7 +22,7 @@ error: KeyframesRule
 1 | @keyframes name { 0%, 50% { color: red } 25%, 75% { color: blue } }
  | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/esbuild/misc/ATZbhYBr7fOFJoZ4E2dwkA/input.css:1:12
  |
 1 | @keyframes name { 0%, 50% { color: red } 25%, 75% { color: blue } }
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/BGEkoLaLFY8_QtKKVFDVhQ/output.json
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/BGEkoLaLFY8_QtKKVFDVhQ/output.json
@ -14,7 +14,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 11,
          "end": 15,
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/BGEkoLaLFY8_QtKKVFDVhQ/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/BGEkoLaLFY8_QtKKVFDVhQ/span.rust-debug
@ -22,7 +22,7 @@ error: KeyframesRule
 1 | @keyframes a\,c { \66rom {} }
  | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/esbuild/misc/BGEkoLaLFY8_QtKKVFDVhQ/input.css:1:12
  |
 1 | @keyframes a\,c { \66rom {} }
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/D6tjKw383eOL-bbWEm1-4w/output.json
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/D6tjKw383eOL-bbWEm1-4w/output.json
@ -14,7 +14,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 16,
          "end": 20,
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/D6tjKw383eOL-bbWEm1-4w/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/D6tjKw383eOL-bbWEm1-4w/span.rust-debug
@ -22,7 +22,7 @@ error: KeyframesRule
 1 | @-moz-keyframes name {}
  | ^^^^^^^^^^^^^^^^^^^^^^^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/esbuild/misc/D6tjKw383eOL-bbWEm1-4w/input.css:1:17
  |
 1 | @-moz-keyframes name {}
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/DWW6-7STLjsrgz5jKD2zNQ/input.css
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/DWW6-7STLjsrgz5jKD2zNQ/input.css
@ -1 +0,0 @@
-@keyframes {}
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/DWW6-7STLjsrgz5jKD2zNQ/output.json
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/DWW6-7STLjsrgz5jKD2zNQ/output.json
@ -1,29 +0,0 @@
-{
-  "type": "Stylesheet",
-  "span": {
-    "start": 0,
-    "end": 12,
-    "ctxt": 0
-  },
-  "rules": [
-    {
-      "type": "KeyframesRule",
-      "span": {
-        "start": 0,
-        "end": 12,
-        "ctxt": 0
-      },
-      "name": {
-        "type": "Identifier",
-        "span": {
-          "start": 0,
-          "end": 0,
-          "ctxt": 0
-        },
-        "value": "",
-        "raw": ""
-      },
-      "blocks": []
-    }
-  ]
-}
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/DWW6-7STLjsrgz5jKD2zNQ/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/DWW6-7STLjsrgz5jKD2zNQ/span.rust-debug
@ -1,26 +0,0 @@
-error: Stylesheet
- --> $DIR/tests/fixture/esbuild/misc/DWW6-7STLjsrgz5jKD2zNQ/input.css:1:1
-  |
-1 | @keyframes {}
-  | ^^^^^^^^^^^^
-
-error: Rule
- --> $DIR/tests/fixture/esbuild/misc/DWW6-7STLjsrgz5jKD2zNQ/input.css:1:1
-  |
-1 | @keyframes {}
-  | ^^^^^^^^^^^^
-
-error: AtRule
- --> $DIR/tests/fixture/esbuild/misc/DWW6-7STLjsrgz5jKD2zNQ/input.css:1:1
-  |
-1 | @keyframes {}
-  | ^^^^^^^^^^^^
-
-error: KeyframesRule
- --> $DIR/tests/fixture/esbuild/misc/DWW6-7STLjsrgz5jKD2zNQ/input.css:1:1
-  |
-1 | @keyframes {}
-  | ^^^^^^^^^^^^
-
-error: Ident
-
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/DnbMqwUX5bMs8z9L-H6IOg/output.json
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/DnbMqwUX5bMs8z9L-H6IOg/output.json
@ -14,7 +14,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 15,
          "end": 19,
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/DnbMqwUX5bMs8z9L-H6IOg/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/DnbMqwUX5bMs8z9L-H6IOg/span.rust-debug
@ -22,7 +22,7 @@ error: KeyframesRule
 1 | @-ms-keyframes name {}
  | ^^^^^^^^^^^^^^^^^^^^^^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/esbuild/misc/DnbMqwUX5bMs8z9L-H6IOg/input.css:1:16
  |
 1 | @-ms-keyframes name {}
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/JRVJhNKhBZ5OsLVFkRfqxw/output.json
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/JRVJhNKhBZ5OsLVFkRfqxw/output.json
@ -14,7 +14,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 11,
          "end": 17,
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/JRVJhNKhBZ5OsLVFkRfqxw/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/JRVJhNKhBZ5OsLVFkRfqxw/span.rust-debug
@ -22,7 +22,7 @@ error: KeyframesRule
 1 | @keyframes a\2c c { \66rom {} }
  | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/esbuild/misc/JRVJhNKhBZ5OsLVFkRfqxw/input.css:1:12
  |
 1 | @keyframes a\2c c { \66rom {} }
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/Jmhb8p_Oc2-nzkcDSk0dww/output.json
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/Jmhb8p_Oc2-nzkcDSk0dww/output.json
@ -14,7 +14,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 11,
          "end": 15,
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/Jmhb8p_Oc2-nzkcDSk0dww/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/Jmhb8p_Oc2-nzkcDSk0dww/span.rust-debug
@ -22,7 +22,7 @@ error: KeyframesRule
 1 | @keyframes name { from { color: red } }
  | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/esbuild/misc/Jmhb8p_Oc2-nzkcDSk0dww/input.css:1:12
  |
 1 | @keyframes name { from { color: red } }
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/OFqVy3cBzYnrIy6uze5Nuw/output.json
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/OFqVy3cBzYnrIy6uze5Nuw/output.json
@ -14,7 +14,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 11,
          "end": 15,
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/OFqVy3cBzYnrIy6uze5Nuw/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/OFqVy3cBzYnrIy6uze5Nuw/span.rust-debug
@ -22,7 +22,7 @@ error: KeyframesRule
 1 | @keyframes test { from {} to { color: red } }
  | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/esbuild/misc/OFqVy3cBzYnrIy6uze5Nuw/input.css:1:12
  |
 1 | @keyframes test { from {} to { color: red } }
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/OHdIPr6lNfq9lBs5RMtbrQ/output.json
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/OHdIPr6lNfq9lBs5RMtbrQ/output.json
@ -14,7 +14,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 11,
          "end": 17,
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/OHdIPr6lNfq9lBs5RMtbrQ/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/OHdIPr6lNfq9lBs5RMtbrQ/span.rust-debug
@ -22,7 +22,7 @@ error: KeyframesRule
 1 | @keyframes \61 bc { from {} }
  | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/esbuild/misc/OHdIPr6lNfq9lBs5RMtbrQ/input.css:1:12
  |
 1 | @keyframes \61 bc { from {} }
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/TB0HbwEy-7bhtK7ck9tHKQ/output.json
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/TB0HbwEy-7bhtK7ck9tHKQ/output.json
@ -14,7 +14,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 11,
          "end": 15,
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/TB0HbwEy-7bhtK7ck9tHKQ/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/TB0HbwEy-7bhtK7ck9tHKQ/span.rust-debug
@ -22,7 +22,7 @@ error: KeyframesRule
 1 | @keyframes name{from{color:red}to{color:blue}}
  | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/esbuild/misc/TB0HbwEy-7bhtK7ck9tHKQ/input.css:1:12
  |
 1 | @keyframes name{from{color:red}to{color:blue}}
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/Vx6S11kYP0h0sx1VehL-tw/output.json
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/Vx6S11kYP0h0sx1VehL-tw/output.json
@ -14,7 +14,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 11,
          "end": 17,
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/Vx6S11kYP0h0sx1VehL-tw/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/Vx6S11kYP0h0sx1VehL-tw/span.rust-debug
@ -22,7 +22,7 @@ error: KeyframesRule
 1 | @keyframes a\62 c { from {} }
  | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/esbuild/misc/Vx6S11kYP0h0sx1VehL-tw/input.css:1:12
  |
 1 | @keyframes a\62 c { from {} }
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/X0UTnZK8bQhMRs3DGoqFAw/output.json
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/X0UTnZK8bQhMRs3DGoqFAw/output.json
@ -14,7 +14,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 11,
          "end": 15,
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/X0UTnZK8bQhMRs3DGoqFAw/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/X0UTnZK8bQhMRs3DGoqFAw/span.rust-debug
@ -22,7 +22,7 @@ error: KeyframesRule
 1 | @keyframes test { from { color: red } to {} }
  | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/esbuild/misc/X0UTnZK8bQhMRs3DGoqFAw/input.css:1:12
  |
 1 | @keyframes test { from { color: red } to {} }
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/aDkLP2LEPmyD_ImzrGw8SQ/output.json
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/aDkLP2LEPmyD_ImzrGw8SQ/output.json
@ -14,7 +14,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 11,
          "end": 15,
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/aDkLP2LEPmyD_ImzrGw8SQ/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/aDkLP2LEPmyD_ImzrGw8SQ/span.rust-debug
@ -22,7 +22,7 @@ error: KeyframesRule
 1 | @keyframes test { from {} to { color: red } }
  | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/esbuild/misc/aDkLP2LEPmyD_ImzrGw8SQ/input.css:1:12
  |
 1 | @keyframes test { from {} to { color: red } }
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/br3FVXHz5lsrf5d1qGO18A/output.json
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/br3FVXHz5lsrf5d1qGO18A/output.json
@ -14,7 +14,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 11,
          "end": 15,
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/br3FVXHz5lsrf5d1qGO18A/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/br3FVXHz5lsrf5d1qGO18A/span.rust-debug
@ -22,7 +22,7 @@ error: KeyframesRule
 1 | @keyframes name {}
  | ^^^^^^^^^^^^^^^^^^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/esbuild/misc/br3FVXHz5lsrf5d1qGO18A/input.css:1:12
  |
 1 | @keyframes name {}
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/jbIIxHeXTPO0PtiubVziHQ/output.json
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/jbIIxHeXTPO0PtiubVziHQ/output.json
@ -14,7 +14,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 11,
          "end": 15,
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/jbIIxHeXTPO0PtiubVziHQ/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/jbIIxHeXTPO0PtiubVziHQ/span.rust-debug
@ -22,7 +22,7 @@ error: KeyframesRule
 1 | @keyframes name { from { color: red } to { color: blue } }
  | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/esbuild/misc/jbIIxHeXTPO0PtiubVziHQ/input.css:1:12
  |
 1 | @keyframes name { from { color: red } to { color: blue } }
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/lS8DPMFU-dQY4SnMMBW4Aw/output.json
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/lS8DPMFU-dQY4SnMMBW4Aw/output.json
@ -14,7 +14,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 11,
          "end": 15,
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/lS8DPMFU-dQY4SnMMBW4Aw/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/lS8DPMFU-dQY4SnMMBW4Aw/span.rust-debug
@ -22,7 +22,7 @@ error: KeyframesRule
 1 | @keyframes test { from {} to {} }
  | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/esbuild/misc/lS8DPMFU-dQY4SnMMBW4Aw/input.css:1:12
  |
 1 | @keyframes test { from {} to {} }
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/pRPE8K2z9GGrr7UQaKAQZQ/output.json
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/pRPE8K2z9GGrr7UQaKAQZQ/output.json
@ -14,7 +14,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 14,
          "end": 18,
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/pRPE8K2z9GGrr7UQaKAQZQ/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/pRPE8K2z9GGrr7UQaKAQZQ/span.rust-debug
@ -22,7 +22,7 @@ error: KeyframesRule
 1 | @-o-keyframes name {}
  | ^^^^^^^^^^^^^^^^^^^^^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/esbuild/misc/pRPE8K2z9GGrr7UQaKAQZQ/input.css:1:15
  |
 1 | @-o-keyframes name {}
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/spDFEMXbzLdZOmhoxVkAIQ/output.json
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/spDFEMXbzLdZOmhoxVkAIQ/output.json
@ -14,7 +14,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 19,
          "end": 23,
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/spDFEMXbzLdZOmhoxVkAIQ/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/spDFEMXbzLdZOmhoxVkAIQ/span.rust-debug
@ -22,7 +22,7 @@ error: KeyframesRule
 1 | @-webkit-keyframes name {}
  | ^^^^^^^^^^^^^^^^^^^^^^^^^^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/esbuild/misc/spDFEMXbzLdZOmhoxVkAIQ/input.css:1:20
  |
 1 | @-webkit-keyframes name {}
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/uWMeE1AAowARdci8tkE-cg/output.json
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/uWMeE1AAowARdci8tkE-cg/output.json
@ -14,7 +14,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 11,
          "end": 15,
--- a/crates/swc_css_parser/tests/fixture/esbuild/misc/uWMeE1AAowARdci8tkE-cg/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/esbuild/misc/uWMeE1AAowARdci8tkE-cg/span.rust-debug
@ -22,7 +22,7 @@ error: KeyframesRule
 1 | @keyframes name{0%,50%{color:red}25%,75%{color:blue}}
  | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/esbuild/misc/uWMeE1AAowARdci8tkE-cg/input.css:1:12
  |
 1 | @keyframes name{0%,50%{color:red}25%,75%{color:blue}}
--- a/crates/swc_css_parser/tests/fixture/rome/keyframe/output.json
+++ b/crates/swc_css_parser/tests/fixture/rome/keyframe/output.json
@ -14,7 +14,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 11,
          "end": 21,
@ -196,7 +196,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 145,
          "end": 148,
@ -380,7 +380,7 @@
        "ctxt": 0
      },
      "name": {
-        "type": "Identifier",
+        "type": "CustomIdentifier",
        "span": {
          "start": 245,
          "end": 248,
--- a/crates/swc_css_parser/tests/fixture/rome/keyframe/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/rome/keyframe/span.rust-debug
@ -46,7 +46,7 @@ error: KeyframesRule
 8 | | }
  | |_^

-error: Ident
+error: CustomIdent
 --> $DIR/tests/fixture/rome/keyframe/input.css:1:12
  |
 1 | @keyframes important1 {
@ -236,7 +236,7 @@ error: KeyframesRule
 21 | | }
   | |_^

-error: Ident
+error: CustomIdent
  --> $DIR/tests/fixture/rome/keyframe/input.css:10:12
   |
 10 | @keyframes foo {
@ -456,7 +456,7 @@ error: KeyframesRule
 24 | | }
   | |_^

-error: Ident
+error: CustomIdent
  --> $DIR/tests/fixture/rome/keyframe/input.css:23:12
   |
 23 | @keyframes FOO {
--- a/crates/swc_css_parser/tests/recovery/at-rule/keyframes/custom-ident-1/input.css
+++ b/crates/swc_css_parser/tests/recovery/at-rule/keyframes/custom-ident-1/input.css
@ -0,0 +1 @@
+@keyframes None {}
--- a/crates/swc_css_parser/tests/recovery/at-rule/keyframes/custom-ident-1/output.json
+++ b/crates/swc_css_parser/tests/recovery/at-rule/keyframes/custom-ident-1/output.json
@ -0,0 +1,107 @@
+{
+  "type": "Stylesheet",
+  "span": {
+    "start": 0,
+    "end": 18,
+    "ctxt": 0
+  },
+  "rules": [
+    {
+      "type": "UnknownAtRule",
+      "span": {
+        "start": 0,
+        "end": 18,
+        "ctxt": 0
+      },
+      "name": {
+        "type": "Identifier",
+        "span": {
+          "start": 0,
+          "end": 15,
+          "ctxt": 0
+        },
+        "value": "keyframes",
+        "raw": "keyframes"
+      },
+      "prelude": [
+        {
+          "type": "Tokens",
+          "span": {
+            "start": 10,
+            "end": 11,
+            "ctxt": 0
+          },
+          "tokens": [
+            {
+              "span": {
+                "start": 10,
+                "end": 11,
+                "ctxt": 0
+              },
+              "token": {
+                "WhiteSpace": {
+                  "value": " "
+                }
+              }
+            }
+          ]
+        },
+        {
+          "type": "Tokens",
+          "span": {
+            "start": 11,
+            "end": 15,
+            "ctxt": 0
+          },
+          "tokens": [
+            {
+              "span": {
+                "start": 11,
+                "end": 15,
+                "ctxt": 0
+              },
+              "token": {
+                "Ident": {
+                  "value": "None",
+                  "raw": "None"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "type": "Tokens",
+          "span": {
+            "start": 15,
+            "end": 16,
+            "ctxt": 0
+          },
+          "tokens": [
+            {
+              "span": {
+                "start": 15,
+                "end": 16,
+                "ctxt": 0
+              },
+              "token": {
+                "WhiteSpace": {
+                  "value": " "
+                }
+              }
+            }
+          ]
+        }
+      ],
+      "block": {
+        "type": "SimpleBlock",
+        "span": {
+          "start": 16,
+          "end": 18,
+          "ctxt": 0
+        },
+        "name": "{",
+        "value": []
+      }
+    }
+  ]
+}
--- a/crates/swc_css_parser/tests/recovery/at-rule/keyframes/custom-ident-2/input.css
+++ b/crates/swc_css_parser/tests/recovery/at-rule/keyframes/custom-ident-2/input.css
@ -0,0 +1 @@
+@keyframes inherit {}
--- a/crates/swc_css_parser/tests/recovery/at-rule/keyframes/custom-ident-2/output.json
+++ b/crates/swc_css_parser/tests/recovery/at-rule/keyframes/custom-ident-2/output.json
@ -0,0 +1,107 @@
+{
+  "type": "Stylesheet",
+  "span": {
+    "start": 0,
+    "end": 21,
+    "ctxt": 0
+  },
+  "rules": [
+    {
+      "type": "UnknownAtRule",
+      "span": {
+        "start": 0,
+        "end": 21,
+        "ctxt": 0
+      },
+      "name": {
+        "type": "Identifier",
+        "span": {
+          "start": 0,
+          "end": 18,
+          "ctxt": 0
+        },
+        "value": "keyframes",
+        "raw": "keyframes"
+      },
+      "prelude": [
+        {
+          "type": "Tokens",
+          "span": {
+            "start": 10,
+            "end": 11,
+            "ctxt": 0
+          },
+          "tokens": [
+            {
+              "span": {
+                "start": 10,
+                "end": 11,
+                "ctxt": 0
+              },
+              "token": {
+                "WhiteSpace": {
+                  "value": " "
+                }
+              }
+            }
+          ]
+        },
+        {
+          "type": "Tokens",
+          "span": {
+            "start": 11,
+            "end": 18,
+            "ctxt": 0
+          },
+          "tokens": [
+            {
+              "span": {
+                "start": 11,
+                "end": 18,
+                "ctxt": 0
+              },
+              "token": {
+                "Ident": {
+                  "value": "inherit",
+                  "raw": "inherit"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "type": "Tokens",
+          "span": {
+            "start": 18,
+            "end": 19,
+            "ctxt": 0
+          },
+          "tokens": [
+            {
+              "span": {
+                "start": 18,
+                "end": 19,
+                "ctxt": 0
+              },
+              "token": {
+                "WhiteSpace": {
+                  "value": " "
+                }
+              }
+            }
+          ]
+        }
+      ],
+      "block": {
+        "type": "SimpleBlock",
+        "span": {
+          "start": 19,
+          "end": 21,
+          "ctxt": 0
+        },
+        "name": "{",
+        "value": []
+      }
+    }
+  ]
+}
--- a/crates/swc_css_parser/tests/recovery/at-rule/keyframes/custom-ident-3/input.css
+++ b/crates/swc_css_parser/tests/recovery/at-rule/keyframes/custom-ident-3/input.css
@ -0,0 +1 @@
+@keyframes unset {}
--- a/crates/swc_css_parser/tests/recovery/at-rule/keyframes/custom-ident-3/output.json
+++ b/crates/swc_css_parser/tests/recovery/at-rule/keyframes/custom-ident-3/output.json
@ -0,0 +1,107 @@
+{
+  "type": "Stylesheet",
+  "span": {
+    "start": 0,
+    "end": 19,
+    "ctxt": 0
+  },
+  "rules": [
+    {
+      "type": "UnknownAtRule",
+      "span": {
+        "start": 0,
+        "end": 19,
+        "ctxt": 0
+      },
+      "name": {
+        "type": "Identifier",
+        "span": {
+          "start": 0,
+          "end": 16,
+          "ctxt": 0
+        },
+        "value": "keyframes",
+        "raw": "keyframes"
+      },
+      "prelude": [
+        {
+          "type": "Tokens",
+          "span": {
+            "start": 10,
+            "end": 11,
+            "ctxt": 0
+          },
+          "tokens": [
+            {
+              "span": {
+                "start": 10,
+                "end": 11,
+                "ctxt": 0
+              },
+              "token": {
+                "WhiteSpace": {
+                  "value": " "
+                }
+              }
+            }
+          ]
+        },
+        {
+          "type": "Tokens",
+          "span": {
+            "start": 11,
+            "end": 16,
+            "ctxt": 0
+          },
+          "tokens": [
+            {
+              "span": {
+                "start": 11,
+                "end": 16,
+                "ctxt": 0
+              },
+              "token": {
+                "Ident": {
+                  "value": "unset",
+                  "raw": "unset"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "type": "Tokens",
+          "span": {
+            "start": 16,
+            "end": 17,
+            "ctxt": 0
+          },
+          "tokens": [
+            {
+              "span": {
+                "start": 16,
+                "end": 17,
+                "ctxt": 0
+              },
+              "token": {
+                "WhiteSpace": {
+                  "value": " "
+                }
+              }
+            }
+          ]
+        }
+      ],
+      "block": {
+        "type": "SimpleBlock",
+        "span": {
+          "start": 17,
+          "end": 19,
+          "ctxt": 0
+        },
+        "name": "{",
+        "value": []
+      }
+    }
+  ]
+}
--- a/crates/swc_css_parser/tests/recovery/at-rule/keyframes/custom-ident-4/input.css
+++ b/crates/swc_css_parser/tests/recovery/at-rule/keyframes/custom-ident-4/input.css
@ -0,0 +1 @@
+@keyframes default {}
--- a/crates/swc_css_parser/tests/recovery/at-rule/keyframes/custom-ident-4/output.json
+++ b/crates/swc_css_parser/tests/recovery/at-rule/keyframes/custom-ident-4/output.json
@ -0,0 +1,107 @@
+{
+  "type": "Stylesheet",
+  "span": {
+    "start": 0,
+    "end": 21,
+    "ctxt": 0
+  },
+  "rules": [
+    {
+      "type": "UnknownAtRule",
+      "span": {
+        "start": 0,
+        "end": 21,
+        "ctxt": 0
+      },
+      "name": {
+        "type": "Identifier",
+        "span": {
+          "start": 0,
+          "end": 18,
+          "ctxt": 0
+        },
+        "value": "keyframes",
+        "raw": "keyframes"
+      },
+      "prelude": [
+        {
+          "type": "Tokens",
+          "span": {
+            "start": 10,
+            "end": 11,
+            "ctxt": 0
+          },
+          "tokens": [
+            {
+              "span": {
+                "start": 10,
+                "end": 11,
+                "ctxt": 0
+              },
+              "token": {
+                "WhiteSpace": {
+                  "value": " "
+                }
+              }
+            }
+          ]
+        },
+        {
+          "type": "Tokens",
+          "span": {
+            "start": 11,
+            "end": 18,
+            "ctxt": 0
+          },
+          "tokens": [
+            {
+              "span": {
+                "start": 11,
+                "end": 18,
+                "ctxt": 0
+              },
+              "token": {
+                "Ident": {
+                  "value": "default",
+                  "raw": "default"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "type": "Tokens",
+          "span": {
+            "start": 18,
+            "end": 19,
+            "ctxt": 0
+          },
+          "tokens": [
+            {
+              "span": {
+                "start": 18,
+                "end": 19,
+                "ctxt": 0
+              },
+              "token": {
+                "WhiteSpace": {
+                  "value": " "
+                }
+              }
+            }
+          ]
+        }
+      ],
+      "block": {
+        "type": "SimpleBlock",
+        "span": {
+          "start": 19,
+          "end": 21,
+          "ctxt": 0
+        },
+        "name": "{",
+        "value": []
+      }
+    }
+  ]
+}
--- a/crates/swc_css_parser/tests/recovery/at-rule/keyframes/custom-ident/input.css
+++ b/crates/swc_css_parser/tests/recovery/at-rule/keyframes/custom-ident/input.css
@ -0,0 +1 @@
+@keyframes initial {}
--- a/crates/swc_css_parser/tests/recovery/at-rule/keyframes/custom-ident/output.json
+++ b/crates/swc_css_parser/tests/recovery/at-rule/keyframes/custom-ident/output.json
@ -0,0 +1,107 @@
+{
+  "type": "Stylesheet",
+  "span": {
+    "start": 0,
+    "end": 21,
+    "ctxt": 0
+  },
+  "rules": [
+    {
+      "type": "UnknownAtRule",
+      "span": {
+        "start": 0,
+        "end": 21,
+        "ctxt": 0
+      },
+      "name": {
+        "type": "Identifier",
+        "span": {
+          "start": 0,
+          "end": 18,
+          "ctxt": 0
+        },
+        "value": "keyframes",
+        "raw": "keyframes"
+      },
+      "prelude": [
+        {
+          "type": "Tokens",
+          "span": {
+            "start": 10,
+            "end": 11,
+            "ctxt": 0
+          },
+          "tokens": [
+            {
+              "span": {
+                "start": 10,
+                "end": 11,
+                "ctxt": 0
+              },
+              "token": {
+                "WhiteSpace": {
+                  "value": " "
+                }
+              }
+            }
+          ]
+        },
+        {
+          "type": "Tokens",
+          "span": {
+            "start": 11,
+            "end": 18,
+            "ctxt": 0
+          },
+          "tokens": [
+            {
+              "span": {
+                "start": 11,
+                "end": 18,
+                "ctxt": 0
+              },
+              "token": {
+                "Ident": {
+                  "value": "initial",
+                  "raw": "initial"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "type": "Tokens",
+          "span": {
+            "start": 18,
+            "end": 19,
+            "ctxt": 0
+          },
+          "tokens": [
+            {
+              "span": {
+                "start": 18,
+                "end": 19,
+                "ctxt": 0
+              },
+              "token": {
+                "WhiteSpace": {
+                  "value": " "
+                }
+              }
+            }
+          ]
+        }
+      ],
+      "block": {
+        "type": "SimpleBlock",
+        "span": {
+          "start": 19,
+          "end": 21,
+          "ctxt": 0
+        },
+        "name": "{",
+        "value": []
+      }
+    }
+  ]
+}
--- a/crates/swc_css_parser/tests/recovery/at-rule/keyframes/empty-name/input.css
+++ b/crates/swc_css_parser/tests/recovery/at-rule/keyframes/empty-name/input.css
@ -0,0 +1 @@
+@keyframes {}
--- a/crates/swc_css_parser/tests/recovery/at-rule/keyframes/empty-name/output.json
+++ b/crates/swc_css_parser/tests/recovery/at-rule/keyframes/empty-name/output.json
@ -0,0 +1,62 @@
+{
+  "type": "Stylesheet",
+  "span": {
+    "start": 0,
+    "end": 14,
+    "ctxt": 0
+  },
+  "rules": [
+    {
+      "type": "UnknownAtRule",
+      "span": {
+        "start": 0,
+        "end": 13,
+        "ctxt": 0
+      },
+      "name": {
+        "type": "Identifier",
+        "span": {
+          "start": 0,
+          "end": 11,
+          "ctxt": 0
+        },
+        "value": "keyframes",
+        "raw": "keyframes"
+      },
+      "prelude": [
+        {
+          "type": "Tokens",
+          "span": {
+            "start": 10,
+            "end": 11,
+            "ctxt": 0
+          },
+          "tokens": [
+            {
+              "span": {
+                "start": 10,
+                "end": 11,
+                "ctxt": 0
+              },
+              "token": {
+                "WhiteSpace": {
+                  "value": " "
+                }
+              }
+            }
+          ]
+        }
+      ],
+      "block": {
+        "type": "SimpleBlock",
+        "span": {
+          "start": 11,
+          "end": 13,
+          "ctxt": 0
+        },
+        "name": "{",
+        "value": []
+      }
+    }
+  ]
+}
--- a/crates/swc_css_parser/tests/recovery/at-rule/keyframes/keyframe-number/input.css
+++ b/crates/swc_css_parser/tests/recovery/at-rule/keyframes/keyframe-number/input.css
--- a/crates/swc_css_parser/tests/recovery/at-rule/keyframes/keyframe-number/output.json
+++ b/crates/swc_css_parser/tests/recovery/at-rule/keyframes/keyframe-number/output.json
--- a/crates/swc_css_parser/tests/recovery/at-rule/keyframes/keyframe-number/output.stderr
+++ b/crates/swc_css_parser/tests/recovery/at-rule/keyframes/keyframe-number/output.stderr
--- a/crates/swc_css_visit/src/lib.rs
+++ b/crates/swc_css_visit/src/lib.rs
@ -33,6 +33,12 @@ define!({
        pub raw: JsWord,
    }

+    pub struct CustomIdent {
+        pub span: Span,
+        pub value: JsWord,
+        pub raw: JsWord,
+    }
+
    pub struct Str {
        pub span: Span,
        pub value: JsWord,
@ -390,7 +396,7 @@ define!({
    }

    pub enum KeyframesName {
-        Ident(Ident),
+        CustomIdent(CustomIdent),
        Str(Str),
    }