I'm working on a node script which uses regex to parse CSS files, and it works perfectly... except when dealing with @media queries. The problem is due to the nested curly-brackets which are giving me fits. I essentially want to create a capturing group of ALL the content inside a media query: Here's what I've got so far.

@media[^{]+\{([^}]+)}\s*}

This works fine on something simple like:

@media (max-width: 868px) {
  aside .size-toggle {
    display: none;
  }
}

But can't pick up multiple nested rules, like this:

@media (max-width: 767px) {
  #wrapper.sidebar-display aside {
    left: 0;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
  }
  #wrapper.sidebar-display #top-nav {
    left: 0;
    right: -194px;
  }
}

How do I need to modify my regex so that the capturing group contains all the selectors and rules inside each individual @media query?

I'm working on a node script which uses regex to parse CSS files, and it works perfectly... except when dealing with @media queries. The problem is due to the nested curly-brackets which are giving me fits. I essentially want to create a capturing group of ALL the content inside a media query: Here's what I've got so far.

@media[^{]+\{([^}]+)}\s*}

This works fine on something simple like:

@media (max-width: 868px) {
  aside .size-toggle {
    display: none;
  }
}

But can't pick up multiple nested rules, like this:

@media (max-width: 767px) {
  #wrapper.sidebar-display aside {
    left: 0;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
  }
  #wrapper.sidebar-display #top-nav {
    left: 0;
    right: -194px;
  }
}

How do I need to modify my regex so that the capturing group contains all the selectors and rules inside each individual @media query?

• javascript
• css
• regex
• node.js

• What language / platform are you using? – p.s.w.g Commented Mar 10, 2014 at 22:05
• This sounds very dangerous. How does your parser handle internet explorer specific image filters? They have very different patterns that is mon in CSS and might easily break a parser. – user1467267 Commented Mar 10, 2014 at 22:07
• It's javascript running on node. It handles IE specific crap just fine as far as I can tell. The code uses a ([^@{}]+)} to capture the entire content of each selector and then each rule gets broken up into essentially key/value pairs based off the :. It's the double { that causes it to break down in the case of media queries which is what I need help with. My plan is to capture the entire content of the media query and then run that content through the regular portion of the script, essentially treating it as a self contained CSS file. – Mordred Commented Mar 10, 2014 at 22:19
• 2 See this related question stackoverflow./questions/14145620/… The answer is written in PHP, but it should be easy to port to JS. – p.s.w.g Commented Mar 10, 2014 at 22:23
• 1 Your question lacks a context of what exactly you want to achieve, but usually it's a bad idea to write your own "parser" with regex. You should probably use some mature modules like css-parse instead. – lukaszfiszer Commented Mar 11, 2014 at 2:13

1 Answer 1

Try this regex:

/@media[^{]+\{([\s\S]+?})\s*}/g

Demo http://regex101./r/iT2eR5/1