Select media query and contents in Sublime Text

Question

Is there a way to select every media query and its contents using Sublime Text 3? For example I have a CSS file with lots of @media print queries, I'd like to select all of them AND the contents in one go.

  @media print {
      .app-contact-panel__heading,
       .app-prose-scope h3 {
          font-size: 18pt;
          line-height: 1.15;
    }
   }

I know I can select one @media print and press CMD + D to select the next one. Or CTRL + CMD + D to select all @media print in the doc, but neither selects the properties as well?

Can anyone help?

Answer 1

One way to do this would be via a plugin. The following plugin highlights all the contents of those media queries that begin with @media print {

import sublime
import sublime_plugin

class HighlightMediaQueryCommand(sublime_plugin.TextCommand):

    def run(self, edit):
        # This finds all the regions that are @media print { 
        media_regions = self.view.find_all(r"@media print {")

        # This will clear the current Selection object.
        self.view.sel().clear()

        # We now add the region corresponding to the opening bracket of each media print query.
        for regions in media_regions:
            self.view.sel().add(sublime.Region(regions.end(), regions.end()))

        # Next, we move the selection to the end of the brackets. 
        self.view.run_command("move_to", { "to": "brackets" })

        # Now that we have access to the closing bracket of each media print query, we can construct the Region object for all media print queries with their contents also.
        for i, sel in enumerate(self.view.sel()):
            self.view.sel().add(sublime.Region(media_regions[i].begin(), sel.end() + 1))


    def is_enabled(self):
        # Enable the command to work only in a CSS file.
        return self.view.settings().get("syntax") == "Packages/CSS/CSS.sublime-syntax"

In order to use this plugin, you'll have to save this code in a .py file in the User directory (go to Preferences -> Browse Packages ... via the top menu). Once saved, you can use this plugin in either of the following ways :-

1. The quickest & easiest way is to just type view.run_command("highlight_media_query") in the sublime console input and pressing enter while you are in the desired css file (press ctrl/cmd + ` to access the console).

2. If you do this very often, you can bind it to a keyboard shortcut. To do that, you would have to create a .sublime-keymap file in the User directory (the keymap file name doesn't matter, though as a convention it's generally kept Default (os).sublime-keymap where os = Windows, Linux or OSX based on your OS). Then paste in the following (the key binding is of your choice, it can be anything as long as it doesn't conflict with existing ones):-

[
    { "keys": ["ctrl+alt+m"], "command": "highlight_media_query" }
]

Doing that & pressing the said key binding (you need to have opened the said css file), should now select all @media print queries.