fix: media-prefers-reduced-motion couple fixes

Author: dangreen

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

@@ -162,7 +162,7 @@ export default function mediaPrefersReducedMotion(actual, _, context) {
       const isAccepted = check(selector, node)
 
       if (context.fix && !isAccepted) {
-        const media = parse('@media screen and (prefers-reduced-motion: reduce) {}')
+        const media = parse('\n@media screen and (prefers-reduced-motion: reduce) {}')
 
         media.nodes.forEach((o) => {
           o.raws.after = '\n'
@@ -176,17 +176,24 @@ export default function mediaPrefersReducedMotion(actual, _, context) {
           after: '\n',
           semicolon: true
         }
-        cloneRule.nodes.forEach((o) => {
-          if (o.prop === 'animation-name') {
-            o.prop = 'animation'
-          }
 
-          if (targetProperties.indexOf(o.prop) >= 0) {
-            o.value = 'none'
+        cloneRule.removeAll()
+
+        node.nodes.forEach((declaration) => {
+          if (targetProperties.indexOf(declaration.prop) >= 0) {
+            const newDeclaration = declaration.clone()
+
+            if (newDeclaration.prop === 'animation-name') {
+              newDeclaration.prop = 'animation'
+            }
+
+            newDeclaration.value = 'none'
+            cloneRule.append(newDeclaration)
           }
         })
+
         media.first.append(cloneRule)
-        node.before(media)
+        node.after(media)
 
         return
       }

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

@@ -26,30 +26,40 @@ testRule({
     },
     {
       code: '.foo { transition: all; @media (prefers-reduced-motion: reduce) { transition: none; } }'
+    },
+    {
+      code: '.foo { transition: all 5s; color: red; } @media screen and (prefers-reduced-motion: reduce) { .foo { transition: none } }'
     }
   ],
 
   reject: [
     {
       code: 'a { animation-name: skew; }',
       fixed:
-        '@media screen and (prefers-reduced-motion: reduce) {\na { animation: none;\n}\n}\na { animation-name: skew; }',
+        'a { animation-name: skew; }\n@media screen and (prefers-reduced-motion: reduce) {\na { animation: none;\n}\n}',
       message: messages.expected('a'),
       line: 1,
       column: 3
     },
     {
       code: 'a { animation-name: skew; } @media screen and (prefers-reduced-motion) { a { transition: none; } }',
       fixed:
-        '@media screen and (prefers-reduced-motion: reduce) {\na { animation: none;\n}\n} a { animation-name: skew; } @media screen and (prefers-reduced-motion) { a { transition: none; } }',
+        'a { animation-name: skew; }\n@media screen and (prefers-reduced-motion: reduce) {\na { animation: none;\n}\n} @media screen and (prefers-reduced-motion) { a { transition: none; } }',
       message: messages.expected('a'),
       line: 1,
       column: 3
     },
     {
       code: '.foo { animation: 1s ease-in; } @media screen and (prefers-reduced-motion) { .foo { animation: 1s ease-in; } }',
       fixed:
-        '@media screen and (prefers-reduced-motion: reduce) {\n.foo { animation: none;\n}\n} .foo { animation: 1s ease-in; } @media screen and (prefers-reduced-motion) { .foo { animation: 1s ease-in; } }',
+        '.foo { animation: 1s ease-in; }\n@media screen and (prefers-reduced-motion: reduce) {\n.foo { animation: none;\n}\n} @media screen and (prefers-reduced-motion) { .foo { animation: 1s ease-in; } }',
+      message: messages.expected('.foo'),
+      line: 1,
+      column: 3
+    },
+    {
+      code: '.foo { transition: all 5s; color: red; }',
+      fixed: '.foo { transition: all 5s; color: red; }\n@media screen and (prefers-reduced-motion: reduce) {\n.foo { transition: none;\n}\n}',
       message: messages.expected('.foo'),
       line: 1,
       column: 3