From 5dcb9f903520d65013ce3a897e50fd89d09c3014 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Fri, 24 Jul 2020 15:26:55 -0400
Subject: [PATCH] Add reduce-motion variant

---
 __tests__/variantsAtRule.test.js     | 23 +++++++++++++++++++++++
 src/lib/substituteVariantsAtRules.js | 12 ++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js
index 12f836f9a..c208c0b82 100644
--- a/__tests__/variantsAtRule.test.js
+++ b/__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 {
diff --git a/src/lib/substituteVariantsAtRules.js b/src/lib/substituteVariantsAtRules.js
index d553beba1..7c2941b64 100644
--- a/src/lib/substituteVariantsAtRules.js
+++ b/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 => {