fix: partial animate.css refactor (#39)

.todo

@@ -5,3 +5,27 @@ Add tests
   advanced -- unit tests to ensure that the package actually works
 Improve npm package ratings
 Write medium article
+Fix issues with Animate.css
+
+
+---
+
+const plugin = require('tailwindcss/plugin');
+const withAnimations = require('animated-tailwindcss');
+
+module.exports = withAnimations({
+  variants: { animation: ['motion-reduce'] },
+  plugins: [
+    plugin(({ addUtilities }) => {
+      addUtilities({
+        '.animate-animated': {
+          '@media print, (prefers-reduced-motion: reduce)': {
+            '--animate-duration': '1ms',
+            '--animate-repeat': '1',
+          },
+        },
+        '.animate-foo': { '@media print, (prefers-reduced-motion: reduce)': { opacity: '0' } },
+      });
+    }),
+  ],
+});

src/index.ts

@@ -7,16 +7,18 @@ import createPlugin from 'tailwindcss/plugin';
 import keyframes from '@/keyframes';
 import utilities from '@/utilities';
 
+// overrides tailwind animations
+
 const withAnimations: Main = (config = {}, { experimental = false } = {}) => {
   // keyframes
   const configKeyframes: typeof keyframes = get(config, 'theme.extend.keyframes', {});
-  set(config, 'theme.extend.keyframes', { ...keyframes, ...configKeyframes });
+  set(config, 'theme.keyframes', { ...keyframes, ...configKeyframes });
 
   // animation
   const animation = Object.fromEntries(Object.keys(keyframes).map((k) => [k, k]));
   const configAnimations: typeof animation = get(config, 'theme.extend.animation', {});
 
-  set(config, 'theme.extend.animation', { ...animation, ...configAnimations });
+  set(config, 'theme.animation', { ...animation, ...configAnimations });
 
   // utilities
   const prefixed = Object.fromEntries(