[JIT] Support animation lists (tailwindlabs#5252)

* Support animation lists

* Update tests

Author: bradlc

src/plugins/animation.js

@@ -19,18 +19,23 @@ export default function () {
     matchUtilities(
       {
         animate: (value, { includeRules }) => {
-          let { name: animationName } = parseAnimationValue(value)
+          let animations = parseAnimationValue(value)
 
-          if (keyframes[animationName] !== undefined) {
-            includeRules(keyframes[animationName], { respectImportant: false })
-          }
-
-          if (animationName === undefined || keyframes[animationName] === undefined) {
-            return { animation: value }
+          for (let { name } of animations) {
+            if (keyframes[name] !== undefined) {
+              includeRules(keyframes[name], { respectImportant: false })
+            }
           }
 
           return {
-            animation: value.replace(animationName, prefixName(animationName)),
+            animation: animations
+              .map(({ name, value }) => {
+                if (name === undefined || keyframes[name] === undefined) {
+                  return value
+                }
+                return value.replace(name, prefixName(name))
+              })
+              .join(', '),
           }
         },
       },

src/util/parseAnimationValue.js

@@ -20,9 +20,10 @@ const DIGIT = /^(\d+)$/
 
 export default function parseAnimationValue(input) {
   let animations = input.split(COMMA)
-  let result = animations.map((animation) => {
-    let result = {}
-    let parts = animation.trim().split(SPACE)
+  return animations.map((animation) => {
+    let value = animation.trim()
+    let result = { value }
+    let parts = value.split(SPACE)
     let seen = new Set()
 
     for (let part of parts) {
@@ -58,6 +59,4 @@ export default function parseAnimationValue(input) {
 
     return result
   })
-
-  return animations.length > 1 ? result : result[0]
 }

tests/jit/animations.test.css

@@ -1,5 +1,4 @@
 import postcss from 'postcss'
-import fs from 'fs'
 import path from 'path'
 import tailwind from '../../src/jit/index.js'
 
@@ -9,22 +8,199 @@ function run(input, config = {}) {
   })
 }
 
-test('animations', () => {
+test('basic', () => {
   let config = {
-    darkMode: 'class',
     mode: 'jit',
-    purge: [path.resolve(__dirname, './animations.test.html')],
-    corePlugins: {},
-    theme: {},
-    plugins: [],
+    purge: [
+      {
+        raw: `
+          <div class="animate-spin"></div>
+          <div class="hover:animate-ping"></div>
+          <div class="group-hover:animate-bounce"></div>
+        `,
+      },
+    ],
   }
 
   let css = `@tailwind utilities`
 
   return run(css, config).then((result) => {
-    let expectedPath = path.resolve(__dirname, './animations.test.css')
-    let expected = fs.readFileSync(expectedPath, 'utf8')
+    expect(result.css).toMatchFormattedCss(`
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      .animate-spin {
+        animation: spin 1s linear infinite;
+      }
+      @keyframes ping {
+        75%,
+        100% {
+          transform: scale(2);
+          opacity: 0;
+        }
+      }
+      .hover\\:animate-ping:hover {
+        animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+      }
+      @keyframes bounce {
+        0%,
+        100% {
+          transform: translateY(-25%);
+          animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+        }
+        50% {
+          transform: none;
+          animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+        }
+      }
+      .group:hover .group-hover\\:animate-bounce {
+        animation: bounce 1s infinite;
+      }
+    `)
+  })
+})
+
+test('custom', () => {
+  let config = {
+    mode: 'jit',
+    purge: [{ raw: `<div class="animate-one"></div>` }],
+    theme: {
+      extend: {
+        keyframes: {
+          one: { to: { transform: 'rotate(360deg)' } },
+        },
+        animation: {
+          one: 'one 2s',
+        },
+      },
+    },
+  }
+
+  let css = `@tailwind utilities`
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      @keyframes one {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      .animate-one {
+        animation: one 2s;
+      }
+    `)
+  })
+})
+
+test('custom prefixed', () => {
+  let config = {
+    mode: 'jit',
+    prefix: 'tw-',
+    purge: [{ raw: `<div class="tw-animate-one"></div>` }],
+    theme: {
+      extend: {
+        keyframes: {
+          one: { to: { transform: 'rotate(360deg)' } },
+        },
+        animation: {
+          one: 'one 2s',
+        },
+      },
+    },
+  }
+
+  let css = `@tailwind utilities`
 
-    expect(result.css).toMatchFormattedCss(expected)
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      @keyframes tw-one {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      .tw-animate-one {
+        animation: tw-one 2s;
+      }
+    `)
+  })
+})
+
+test('multiple', () => {
+  let config = {
+    mode: 'jit',
+    purge: [{ raw: `<div class="animate-multiple"></div>` }],
+    theme: {
+      extend: {
+        animation: {
+          multiple: 'bounce 2s linear, pulse 3s ease-in',
+        },
+      },
+    },
+  }
+
+  let css = `@tailwind utilities`
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      @keyframes bounce {
+        0%,
+        100% {
+          transform: translateY(-25%);
+          animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+        }
+        50% {
+          transform: none;
+          animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+        }
+      }
+      @keyframes pulse {
+        50% {
+          opacity: 0.5;
+        }
+      }
+      .animate-multiple {
+        animation: bounce 2s linear, pulse 3s ease-in;
+      }
+    `)
+  })
+})
+
+test('multiple custom', () => {
+  let config = {
+    mode: 'jit',
+    purge: [{ raw: `<div class="animate-multiple"></div>` }],
+    theme: {
+      extend: {
+        keyframes: {
+          one: { to: { transform: 'rotate(360deg)' } },
+          two: { to: { transform: 'scale(1.23)' } },
+        },
+        animation: {
+          multiple: 'one 2s, two 3s',
+        },
+      },
+    },
+  }
+
+  let css = `@tailwind utilities`
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      @keyframes one {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      @keyframes two {
+        to {
+          transform: scale(1.23);
+        }
+      }
+      .animate-multiple {
+        animation: one 2s, two 3s;
+      }
+    `)
   })
 })