From 82fd6a34a7fa0e82b746b27b5f2f62fcb029f87d Mon Sep 17 00:00:00 2001
From: "William.Will" <William.Will@homeadvisor.com>
Date: Fri, 18 Mar 2022 21:20:32 -0600
Subject: [PATCH] fix: Allow for usage of special characters in keyframes name

---
 src/index.js       |  2 +-
 test/index.test.js | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index cbd269e..7e1262b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -321,7 +321,7 @@ function localizeDeclaration(declaration, context) {
   const isAnimation = /animation$/i.test(declaration.prop);
 
   if (isAnimation) {
-    const validIdent = /^-?[_a-z][_a-z0-9-]*$/i;
+    const validIdent = /^-?(?:\\[~!@$%^&*()+=,./';:"?><[]\\{}|`#]|[_a-z])(?:\\[~!@$%^&*()+=,./';:"?><[]\\{}|`#]|[_a-z0-9-])*$/i;
 
     /*
     The spec defines some keywords that you can use to describe properties such as the timing
diff --git a/test/index.test.js b/test/index.test.js
index 4d57478..63cb869 100644
--- a/test/index.test.js
+++ b/test/index.test.js
@@ -303,6 +303,18 @@ const tests = [
     expected:
       "@keyframes :local(foo) { from { color: red; } to { color: blue; } }",
   },
+  {
+    name: "localize keyframes starting with special characters",
+    input: "@keyframes \\@foo { from { color: red; } to { color: blue; } }",
+    expected:
+      "@keyframes :local(\\@foo) { from { color: red; } to { color: blue; } }",
+  },
+  {
+    name: "localize keyframes containing special characters",
+    input: "@keyframes f\\@oo { from { color: red; } to { color: blue; } }",
+    expected:
+      "@keyframes :local(f\\@oo) { from { color: red; } to { color: blue; } }",
+  },
   {
     name: "localize keyframes in global default mode",
     input: "@keyframes foo {}",