Rename reduced-motion to motion-reduced, add motion-safe

Author: adamwathan

__tests__/variantsAtRule.test.js

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

src/lib/substituteVariantsAtRules.js

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