Add reduce-motion variant

Author: adamwathan

__tests__/variantsAtRule.test.js

@@ -177,6 +177,29 @@ test('it can generate focus-visible variants', () => {
   })
 })
 
+test('it can generate reduce-motion variants', () => {
+  const input = `
+    @variants reduce-motion {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+    }
+  `
+
+  const output = `
+    .banana { color: yellow; }
+    .chocolate { color: brown; }
+    @media (prefers-reduced-motion: reduce) {
+      .reduce-motion\\:banana { color: yellow; }
+      .reduce-motion\\:chocolate { color: brown; }
+    }
+  `
+
+  return run(input).then(result => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
 test('it can generate first-child variants', () => {
   const input = `
     @variants first {

src/lib/substituteVariantsAtRules.js

@@ -23,6 +23,18 @@ function ensureIncludesDefault(variants) {
 
 const defaultVariantGenerators = config => ({
   default: generateVariantFunction(() => {}),
+  'reduce-motion': generateVariantFunction(({ container, separator, modifySelectors }) => {
+    const modified = modifySelectors(({ selector }) => {
+      return selectorParser(selectors => {
+        selectors.walkClasses(sel => {
+          sel.value = `reduce-motion${separator}${sel.value}`
+        })
+      }).processSync(selector)
+    })
+    const mediaQuery = postcss.atRule({ name: 'media', params: '(prefers-reduced-motion: reduce)' })
+    mediaQuery.append(modified)
+    container.append(mediaQuery)
+  }),
   'group-hover': generateVariantFunction(({ modifySelectors, separator }) => {
     return modifySelectors(({ selector }) => {
       return selectorParser(selectors => {