diff --git a/__tests__/plugins/animation.test.js b/__tests__/plugins/animation.test.js index 19409d52f535..80a6f59ed87b 100644 --- a/__tests__/plugins/animation.test.js +++ b/__tests__/plugins/animation.test.js @@ -80,13 +80,52 @@ test('defining animation and keyframes with prefix', () => { } } } - + @layer utilities { @variants { .tw-animate-none { animation: none; } .tw-animate-spin { animation: tw-spin 1s linear infinite; } .tw-animate-ping { animation: tw-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } } - } + } + `) +}) + +test('defining animation and keyframes with prefix (skip undefined animations)', () => { + 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)' } }, + }, + }, + variants: { + animation: [], + }, + } + + const { utilities } = processPlugins([plugin()], config) + + expect(css(utilities)).toMatchCss(` + @layer utilities { + @variants { + @keyframes tw-spin { + to { transform: rotate(360deg); } + } + } + } + + @layer utilities { + @variants { + .tw-animate-none { animation: none; } + .tw-animate-spin { animation: tw-spin 1s linear infinite; } + .tw-animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } + } + } `) }) diff --git a/src/plugins/animation.js b/src/plugins/animation.js index c3a839b5a944..b3d7d07690e4 100644 --- a/src/plugins/animation.js +++ b/src/plugins/animation.js @@ -18,7 +18,7 @@ export default function () { _.mapKeys(animationConfig, (_animation, suffix) => nameClass('animate', suffix)), (animation) => { const { name } = parseAnimationValue(animation) - if (name === undefined) return { animation } + if (name === undefined || keyframesConfig[name] === undefined) return { animation } return { animation: animation.replace(name, prefixName(name)) } } )