Do not prefix modern animation-direction values

Author: ai

lib/hacks/animation.js

@@ -0,0 +1,19 @@
+const Declaration = require('../declaration');
+
+class Animation extends Declaration {
+
+    static names = ['animation', 'animation-direction'];
+
+    /**
+     * Don’t add prefixes for modern values.
+     */
+    check(decl) {
+        return !decl.value.split(/\s+/).find(i => {
+            const lower = i.toLowerCase();
+            return lower === 'reverse' || lower === 'alternate-reverse';
+        });
+    }
+
+}
+
+module.exports = Animation;

lib/prefixes.js

@@ -18,6 +18,7 @@ Declaration.hack(require('./hacks/flex'));
 Declaration.hack(require('./hacks/order'));
 Declaration.hack(require('./hacks/filter'));
 Declaration.hack(require('./hacks/grid-end'));
+Declaration.hack(require('./hacks/animation'));
 Declaration.hack(require('./hacks/flex-flow'));
 Declaration.hack(require('./hacks/flex-grow'));
 Declaration.hack(require('./hacks/flex-wrap'));

test/autoprefixer.test.js

@@ -379,6 +379,7 @@ describe('hacks', () => {
     it('supports cross-fade()',         () => test('cross-fade'));
     it('supports grid layout',          () => test('grid'));
     it('supports text-decoration',      () => test('text-decoration'));
+    it('ignores modern direction',      () => test('animation'));
 
     it('supports appearance for IE', () => {
         const instance = autoprefixer({ browsers: 'Edge 15' });

test/cases/animation.css

@@ -0,0 +1,8 @@
+a {
+    animation-direction: alternate;
+    animation-direction: reverse;
+    animation-direction: REVERSE;
+    animation-direction: alternate-reverse;
+    animation: rotation-reverse;
+    animation: rotation-reverse reverse;
+}

test/cases/animation.out.css

@@ -0,0 +1,12 @@
+a {
+    -webkit-animation-direction: alternate;
+         -o-animation-direction: alternate;
+            animation-direction: alternate;
+    animation-direction: reverse;
+    animation-direction: REVERSE;
+    animation-direction: alternate-reverse;
+    -webkit-animation: rotation-reverse;
+         -o-animation: rotation-reverse;
+            animation: rotation-reverse;
+    animation: rotation-reverse reverse;
+}