I'm currently using LESS to 'bubble' my media queries. So my outputted CSS is something like this -

header {
  color: red;
}
@media only screen and (min-width: 768px) {
  header {
    color: green;
  }
}
@media only screen and (min-width: 1024px) {
  header {
    color: blue;
  }
}

section {
  color: green;
}
@media only screen and (min-width: 768px) {
  section {
    color: blue;
  }
}
@media only screen and (min-width: 1024px) {
  section {
     color: red;
  }
}

As you can see there's a separate rule declaration for each element (header/section/whatever) for each media query being used.

Can I use jQuery to go through a CSS file and 'collate' all similar @media rules (whatever they are) and have an output (appendto?) bit of html to copy and paste?

EDIT: If I created an 'app' could I copy and paste the raw CSS and get jQuery to find/replace/collate the media queries so all the same ones are together?

EDIT: To hopefully stop any confusion I want to create an app that takes a RAW copy and pasted bit of text (that'll be CSS) which would then compile and merge the correct @media rules together. Which you could then paste back into your code editor. Not actually 'touching' a CSS file