prefix animation names

Author: RobinMalfait

__tests__/plugins/animation.test.js

@@ -0,0 +1,81 @@
+import invokePlugin from '../util/invokePlugin'
+import plugin from '../../src/plugins/animation'
+
+test('defining animation and keyframes', () => {
+  const config = {
+    theme: {
+      animation: {
+        none: 'none',
+        spin: 'spin 1s linear infinite',
+        ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
+      },
+      keyframes: {
+        spin: { to: { transform: 'rotate(360deg)' } },
+        ping: { '75%, 100%': { transform: 'scale(2)', opacity: '0' } },
+      },
+    },
+    variants: {
+      animation: [],
+    },
+  }
+
+  const { utilities } = invokePlugin(plugin(), config)
+
+  expect(utilities).toEqual([
+    [
+      {
+        '@keyframes ping': { '75%, 100%': { opacity: '0', transform: 'scale(2)' } },
+        '@keyframes spin': { to: { transform: 'rotate(360deg)' } },
+      },
+      { respectImportant: false },
+    ],
+    [
+      {
+        '.animate-none': { animation: 'none' },
+        '.animate-ping': { animation: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite' },
+        '.animate-spin': { animation: 'spin 1s linear infinite' },
+      },
+      [],
+    ],
+  ])
+})
+
+test('defining animation and keyframes with prefix', () => {
+  const config = {
+    prefix: 'tw-',
+    theme: {
+      animation: {
+        none: 'none',
+        spin: 'spin 1s linear infinite',
+        ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
+      },
+      keyframes: {
+        spin: { to: { transform: 'rotate(360deg)' } },
+        ping: { '75%, 100%': { transform: 'scale(2)', opacity: '0' } },
+      },
+    },
+    variants: {
+      animation: [],
+    },
+  }
+
+  const { utilities } = invokePlugin(plugin(), config)
+
+  expect(utilities).toEqual([
+    [
+      {
+        '@keyframes tw-ping': { '75%, 100%': { opacity: '0', transform: 'scale(2)' } },
+        '@keyframes tw-spin': { to: { transform: 'rotate(360deg)' } },
+      },
+      { respectImportant: false },
+    ],
+    [
+      {
+        '.animate-none': { animation: 'none' },
+        '.animate-ping': { animation: 'tw-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite' },
+        '.animate-spin': { animation: 'tw-spin 1s linear infinite' },
+      },
+      [],
+    ],
+  ])
+})

src/plugins/animation.js

@@ -1,16 +1,28 @@
 import _ from 'lodash'
 import nameClass from '../util/nameClass'
+import animationParser from '../util/animationParser'
 
 export default function () {
-  return function ({ addUtilities, theme, variants }) {
+  return function ({ addUtilities, theme, variants, config }) {
+    const prefix = config('prefix')
     const keyframesConfig = theme('keyframes')
-    const keyframesStyles = _.mapKeys(keyframesConfig, (_keyframes, name) => `@keyframes ${name}`)
+    const keyframesStyles = _.mapKeys(
+      keyframesConfig,
+      (_keyframes, name) => `@keyframes ${prefix === undefined ? name : [prefix, name].join('')}`
+    )
+
     addUtilities(keyframesStyles, { respectImportant: false })
 
     const animationConfig = theme('animation')
     const utilities = _.mapValues(
       _.mapKeys(animationConfig, (_animation, suffix) => nameClass('animate', suffix)),
-      (animation) => ({ animation })
+      prefix === undefined
+        ? (animation) => ({ animation })
+        : function (animation) {
+            const { name } = animationParser(animation)
+            if (name === undefined) return { animation }
+            return { animation: animation.replace(name, [prefix, name].join('')) }
+          }
     )
     addUtilities(utilities, variants('animation'))
   }