From 08ee4030da41b86d613e287fea9a5473dd18a569 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Tue, 22 Sep 2020 22:47:35 -0400
Subject: [PATCH] Don't escape keyframes (#2432)

* Don't escape keyframes

* Update changelog
---
 CHANGELOG.md                     |  2 +-
 __tests__/processPlugins.test.js | 47 ++++++++++++++++++++++++++++++++
 src/util/processPlugins.js       |  8 ++++--
 3 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ea324fb2787c..f4463dbe3ec0 100644
--- 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
index f7613bd9a1b3..742acf992375 100644
--- 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
index 5e02a27215ef..d381e4c931cf 100644
--- 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)
           }
         })