diff --git a/__tests__/purgecss.test.js b/__tests__/purgecss.test.js index 9854e3b0..e51de894 100644 --- a/__tests__/purgecss.test.js +++ b/__tests__/purgecss.test.js @@ -350,6 +350,10 @@ describe('keyframes', () => { it('removes flash', () => { expect(purgecssResult.includes('@keyframes flash')).toBe(false) }) + it('keeps keyframes from animations with multiple keyframes', () => { + expect(purgecssResult.includes('@keyframes scale')).toBe(true) + expect(purgecssResult.includes('@keyframes spin')).toBe(true) + }) }) describe('pseudo selectors', () => { diff --git a/__tests__/test_examples/keyframes/keyframes.css b/__tests__/test_examples/keyframes/keyframes.css index 19dced24..5d9e2b46 100644 --- a/__tests__/test_examples/keyframes/keyframes.css +++ b/__tests__/test_examples/keyframes/keyframes.css @@ -24,4 +24,28 @@ .flash { animation: flash -} \ No newline at end of file +} + +@keyframes scale { + from { + transform: scale(1); + } + + to { + transform: scale(2); + } +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +.scale-spin { + animation: spin 300ms linear infinite forwards,scale 300ms linear infinite alternate; +} diff --git a/__tests__/test_examples/keyframes/keyframes.html b/__tests__/test_examples/keyframes/keyframes.html index 7b1f750a..1b213260 100644 --- a/__tests__/test_examples/keyframes/keyframes.html +++ b/__tests__/test_examples/keyframes/keyframes.html @@ -1,2 +1,5 @@
+ +
+
diff --git a/src/index.js b/src/index.js index 4c79051e..56c58e34 100644 --- a/src/index.js +++ b/src/index.js @@ -327,7 +327,7 @@ class Purgecss { for (const { prop, value } of node.nodes) { if (this.options.keyframes) { if (prop === 'animation' || prop === 'animation-name') { - for (const word of value.split(' ')) { + for (const word of value.split(/[\s,]+/)) { this.usedAnimations.add(word) } }