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

* Escape animation names when prefixes contain special characters

* Update changelog

Author: thecrypticace

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix parsing of `theme()` inside `calc()` when there are no spaces around operators ([#11157](https://github.com/tailwindlabs/tailwindcss/pull/11157))
 - Ensure `repeating-conic-gradient` is detected as an image ([#11180](https://github.com/tailwindlabs/tailwindcss/pull/11180))
 - 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))
 
 ## [3.3.2] - 2023-04-25
 

src/corePlugins.js

@@ -913,7 +913,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

@@ -276,3 +276,33 @@ crosscheck(() => {
     })
   })
 })
+
+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;
+      }
+    `)
+  })
+})