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 {}",