pack same CSS media query rules into one media query rule

.foo {
  width: 10px;
}

@media (min-width: 640px) {
  .foo {
    width: 150px;
  }
}

.bar {
  width: 20px;
}

@media (min-width: 320px) {
  .bar {
    width: 200px;
  }
}

@media (min-width: 640px) {
  .bar {
    width: 300px;
  }
}

Output:

.foo{width:10px}@media (min-width:640px){.foo{width:150px}}.bar{width:20px}@media (min-width:320px){.bar{width:200px}}@media (min-width:640px){.bar{width:300px}}

But we can merge @media (min-width:640px). https://github.com/hail2u/node-css-mqpacker he knows how to do it. Maybe add it to the kernel, or to implement the same behavior in one of the plugins. Also pay attention to the option sort.