fix: YozhikM#38

Author: YozhikM

src/rules/media-prefers-reduced-motion/__tests__/index.js

@@ -24,6 +24,10 @@ testRule(rule, {
       code:
         'a { animation-name: skew; } @media screen and (prefers-reduced-motion) { a { animation: none } }',
     },
+    {
+      code:
+        '.foo { transition: all; @media (prefers-reduced-motion: reduce) { transition: none; } }',
+    },
   ],
 
   reject: [

src/rules/media-prefers-reduced-motion/index.js

@@ -12,6 +12,18 @@ export const messages = utils.ruleMessages(ruleName, {
 });
 const targetProperties = ['transition', 'animation', 'animation-name'];
 
+function checkChildrenNodes(childrenNodes, currentSelector, parentNode) {
+  return childrenNodes.some(declaration => {
+    const index = targetProperties.indexOf(declaration.prop);
+    if (currentSelector === 'animation-name' && targetProperties[index] === 'animation')
+      return true;
+    if (currentSelector !== targetProperties[index]) return false;
+    if (declaration.value !== 'none') return false;
+
+    return index >= 0 && parentNode.params.indexOf('prefers-reduced-motion') >= 0;
+  });
+}
+
 function check(selector, node) {
   const declarations = node.nodes;
   const params = node.parent.params;
@@ -48,24 +60,29 @@ function check(selector, node) {
       return parentNode.nodes.some(childrenNode => {
         const childrenNodes = childrenNode.nodes;
 
+        if (
+          childrenNode.type === 'atrule' &&
+          childrenNode.params.indexOf('prefers-reduced-motion') >= 0
+        ) {
+          return childrenNodes.some(declaration => {
+            const index = targetProperties.indexOf(declaration.prop);
+            if (currentSelector === 'animation-name' && targetProperties[index] === 'animation')
+              return true;
+            if (currentSelector !== targetProperties[index]) return false;
+            if (declaration.value !== 'none') return false;
+
+            return index >= 0;
+          });
+        }
+
         if (
           !parentNode.params ||
           !Array.isArray(childrenNodes) ||
           selector !== childrenNode.selector
         )
           return false;
 
-        const matchedChildrenNodes = childrenNodes.some(declaration => {
-          const index = targetProperties.indexOf(declaration.prop);
-          if (currentSelector === 'animation-name' && targetProperties[index] === 'animation')
-            return true;
-          if (currentSelector !== targetProperties[index]) return false;
-          if (declaration.value !== 'none') return false;
-
-          return index >= 0 && parentNode.params.indexOf('prefers-reduced-motion') >= 0;
-        });
-
-        return matchedChildrenNodes;
+        return checkChildrenNodes(childrenNodes, currentSelector, parentNode);
       });
     });