Don't escape keyframes (#2432)

* Don't escape keyframes * Update changelog
tailwindlabs · Oct 6, 2020 · 08ee403 · 08ee403
1 parent 31efa4b
commit 08ee403
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+- Don't escape keyframe values ([#2432](https://github.com/tailwindlabs/tailwindcss/pull/2432))
 
 ## [1.8.10] - 2020-09-14
 

diff --git a/__tests__/processPlugins.test.js b/__tests__/processPlugins.test.js
@@ -2003,3 +2003,50 @@ test('plugins can extend variants', () => {
       expect(result.css).toMatchCss(expected)
     })
 })
+
+test('keyframes are not escaped', () => {
+  const { components, utilities } = processPlugins(
+    [
+      function({ addUtilities, addComponents }) {
+        addComponents({
+          '@keyframes foo': {
+            '25.001%': {
+              color: 'black',
+            },
+          },
+        })
+        addUtilities({
+          '@keyframes bar': {
+            '75.001%': {
+              color: 'white',
+            },
+          },
+        })
+      },
+    ],
+    makeConfig()
+  )
+
+  expect(css(components)).toMatchCss(`
+    @layer components {
+      @variants {
+        @keyframes foo {
+          25.001% {
+            color: black
+          }
+        }
+      }
+    }
+  `)
+  expect(css(utilities)).toMatchCss(`
+    @layer utilities {
+      @variants {
+        @keyframes bar {
+          75.001% {
+            color: white
+          }
+        }
+      }
+    }
+  `)
+})
diff --git a/src/util/processPlugins.js b/src/util/processPlugins.js
@@ -27,6 +27,10 @@ function wrapWithLayer(rules, layer) {
     .append(cloneNodes(Array.isArray(rules) ? rules : [rules]))
 }
 
+function isKeyframeRule(rule) {
+  return rule.parent && rule.parent.type === 'atrule' && /keyframes$/.test(rule.parent.name)
+}
+
 export default function(plugins, config) {
   const pluginBaseStyles = []
   const pluginComponents = []
@@ -88,7 +92,7 @@ export default function(plugins, config) {
         const styles = postcss.root({ nodes: parseStyles(utilities) })
 
         styles.walkRules(rule => {
-          if (options.respectPrefix) {
+          if (options.respectPrefix && !isKeyframeRule(rule)) {
             rule.selector = applyConfiguredPrefix(rule.selector)
           }
 
@@ -114,7 +118,7 @@ export default function(plugins, config) {
         const styles = postcss.root({ nodes: parseStyles(components) })
 
         styles.walkRules(rule => {
-          if (options.respectPrefix) {
+          if (options.respectPrefix && !isKeyframeRule(rule)) {
             rule.selector = applyConfiguredPrefix(rule.selector)
           }
         })