How do I extract all the media queries in a CSS stylesheet file easily?

Question

currently i have a very large css file with over 2000 lines of code. now in this file its littered with media queries all over the place. Basically its very sloppy coding organization.

I want to be able to extract all these media queries in this file into its own responsive.css stylesheet so i can conditionally turn these queries off when needed.

Now the question is what is the fastest way of doing this? Is there a program or script that can automate this tedious task as right now im doing it by hand.

Answer 1

If you have Sublime Text or Visual Studio Code (or any other IDE with regex search support and a Find All option) it's very simple:

1. CMD+F to find
2. Match all the @media queries with the regex:

@media[^{]*\{(?:(?!\}\s*\}).)*}}

3. Click "Find All"
4. CMD+C to copy
5. Open up a blank document and paste them in CMD+V

Super quick and easy.

Answer 2

the way i did it was using the VIM editor to do the extraction process. What i did was while on the starting line of the @media section. I would go into visual mode (v) then place my cursor on the starting bracket { of the media query. Now i press % to jump to the matching bracket of that media query. This in effect would highlight everything in the media query.

Now i cut that snippet of code with dd and paste it into my other file i have open with a split window view (:split responsive.css). To jump back and forth the splits you do ctrl-ww

this essentially speeds up extracting the media queries alot faster than finding it line by line to see where the media query ends. its should even be possible to macro script this in vim, but that is a whole entire new post. any one else is welcome to post that solution up!