Merge pull request #1068 from Poimen/duplicated-keyframes-fix

fix: empty @Keyframes emitted

Author: ChristianMurphy

src/index.js

@@ -111,9 +111,23 @@ module.exports = (options) => {
             while (rule.nodes.length > 0) {
               destination.append(rule.nodes[0]);
             }
+
+            // store the original rule parent before removal in case an atrule
+            // becomes empty as a result of the removal
+            const ruleParent = rule.parent;
+
             // remove duplicated rule
             rule.remove();
 
+            // on removal of the node, the parent atrule could have no
+            // declarations associated. This is an issue for @keyframes that
+            // interpret @keyframes <name> {} as overwriting existing keyframe
+            // transitions.
+            if (ruleParent.type === 'atrule' && ruleParent.nodes.length === 0) {
+              const ruleParentIndex = ruleParent.parent.index(ruleParent);
+              ruleParent.parent.nodes[ruleParentIndex].remove();
+            }
+
             if (
               options.removeDuplicatedProperties ||
               options.removeDuplicatedValues

test/duplicated-css.js

@@ -227,14 +227,39 @@ const cases = [
     background: green;
   }
 }
-@media print { }
 `,
   },
   {
     label: 'keyframe selectors with same percentage',
     input: '@keyframes a {0% { color: blue; } 0% { background: green; }}',
     expected: '@keyframes a {0% { color: blue; background: green; }}',
   },
+  {
+    label: 'keyframe selectors with duplicate animation properties',
+    input: minify`
+@keyframes ping {
+  75%,
+  to {
+      transform: scale(2);
+  }
+}
+@keyframes ping {
+  75%,
+  to {
+      opacity: 0;
+  }
+}
+`,
+    expected: minify`
+@keyframes ping {
+    75%,
+    to {
+      transform: scale(2);
+      opacity: 0;
+    }
+  }
+`,
+  },
   {
     label: 'multiple print media queries with different case',
     input: minify`
@@ -256,7 +281,6 @@ const cases = [
     background: green;
   }
 }
-@MEDIA print { }
 `,
   },
   {