add reduced-motion variant

Author: bentzibentz

README.md

@@ -31,7 +31,7 @@ plugins: [
           bounceOutSpeed: 750,
           animationDelaySpeed: 1000
         },
-        variants: ['responsive'],
+        variants: ['responsive', 'hover', 'reduced-motion'],
       }),
 ]
 ```
@@ -73,6 +73,24 @@ All of these settings are optional, if not set basic animate.css fallback animat
 
 The plugin generates all the animate.css utility classes for you.
 
+### Varinats
+Generating different class variants is super easy, just add the desired variant to the variants array at the plugin options.
+```js
+plugins: [
+  // Other plugins
+  require('tailwindcss-animatecss')({
+        classes: [],
+        settings: {},
+        variants: ['responsive', 'hover', 'reduced-motion'],
+      }),
+]
+```
+#### Available variants
+* responsive
+* hover
+* reduced-motion [Read more](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)
+
+
 ### Available Animate CSS classes
 * .animated
 * .infinite

animate/animate.js

@@ -14,7 +14,7 @@ const keyframesFadeIn = require('./keyframes/fadeIn');
 const keyframesFadeOut = require('./keyframes/fadeOut');
 
 module.exports = function ({ classes = [], settings = {}, variants = ['responsive'] }) {
-    return function ({ e, addUtilities, prefix }) {
+    return function ({ e, addUtilities, prefix, addVariant, postcss }) {
 
         // set fallback if speed not defined
         const animatedSpeed = settings.animatedSpeed ? settings.animatedSpeed : 1000;
@@ -405,5 +405,14 @@ module.exports = function ({ classes = [], settings = {}, variants = ['responsiv
         addUtilities(utilities, { variants, respectImportant: false });
 
         addUtilities(keyFrames, { respectImportant: false });
+
+        addVariant('reduced-motion', ({ container, separator }) => {
+            const supportsRule = postcss.atRule({ name: 'media', params: '(prefers-reduced-motion: reduce)' })
+            supportsRule.append(container.nodes)
+            container.append(supportsRule)
+            supportsRule.walkRules(rule => {
+                rule.selector = `.${e(`reduced-motion${separator}${rule.selector.slice(1)}`)}`
+            })
+        })
     };
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-animatecss",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Add Animate CSS as Tailwind CSS plugin to your project.",
   "main": "index.js",
   "repository": {
@@ -12,7 +12,9 @@
     "tailwindcss",
     "animatecss",
     "animate.css",
-    "css"
+    "css",
+    "awesome",
+    "awesome-list"
   ],
   "author": "Fabian Bentz",
   "license": "MIT",