Escape animation names when prefixes contain special characters (#11470)

* Escape animation names when prefixes contain special characters

* Update changelog

Author: thecrypticace

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix source maps issue resulting in a crash ([#11319](https://github.com/tailwindlabs/tailwindcss/pull/11319))
 - Fallback to RegEx based parser when using custom transformers or extractors ([#11335](https://github.com/tailwindlabs/tailwindcss/pull/11335))
 - Move unknown pseudo-elements outside of `:is` by default ([#11345](https://github.com/tailwindlabs/tailwindcss/pull/11345))
+- Escape animation names when prefixes contain special characters ([#11470](https://github.com/tailwindlabs/tailwindcss/pull/11470))
 
 ### Added
 

src/corePlugins.js

@@ -933,7 +933,7 @@ export let corePlugins = {
   },
 
   animation: ({ matchUtilities, theme, config }) => {
-    let prefixName = (name) => `${config('prefix')}${escapeClassName(name)}`
+    let prefixName = (name) => escapeClassName(config('prefix') + name)
     let keyframes = Object.fromEntries(
       Object.entries(theme('keyframes') ?? {}).map(([key, value]) => {
         return [key, { [`@keyframes ${prefixName(key)}`]: value }]

tests/animations.test.js

@@ -277,3 +277,33 @@ test('with dots in the name and prefix', () => {
     `)
   })
 })
+
+test('special character prefixes are escaped in animation names', () => {
+  let config = {
+    prefix: '@',
+    content: [{ raw: `<div class="@animate-one"></div>` }],
+    theme: {
+      extend: {
+        keyframes: {
+          one: { to: { transform: 'rotate(360deg)' } },
+        },
+        animation: {
+          one: 'one 2s',
+        },
+      },
+    },
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      @keyframes \@one {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      .\@animate-one {
+        animation: 2s \@one;
+      }
+    `)
+  })
+})