Ruby RegExp - Match all CSS selectors and directives

Question

I'm trying to match all the CSS selectors and directives below excluding any comments and any media queries.

a {color: red !important;}

#p1 {
        margin-top: 20px !important
      }

/* Client-specific styles */

      .ExternalClass,  
      .ExternalClass p,  
      .ExternalClass span,  
      .ExternalClass font,  
      .ExternalClass td,  
      .ExternalClass div {
        line-height: 100%;
      }

a {}

@media query {
    a { display:none }  
}

I've come up with the following RegEx: [a-zA-Z#.:*]{1}[^\/*]+?{[\s\S]*?}. This matches everything correctly but includes the @media query. I've tried using a negative lookahead e.g. (?!.+@media.+) but that didn't help.

What can I do to extract only the selectors/directives?

Example: https://regex101.com/r/JmjthP/3

Solution

With help from @Wiktor Stribiżew the working solution was this:

/^(?!.*@media)[\t ]*([a-zA-Z#.:*\[][^{\/]*\s*){[\s\S]*?}/

Thanks a lot. I made a few tweaks and it's working great. Do you want to post that as an answer and I'll accept it? — user1032752
– user1032752, Commented Sep 26, 2018 at 15:34

Wiktor Stribiżew · Accepted Answer · 2018-09-26 15:50:42Z

2

You may use

^(?!.*@media) *[a-zA-Z#.:*][^{]*{[\s\S]*?}

See the regex demo

Details

^ - start of string
(?!.*@media) - no @media allowed after any 0+ chars other than line break chars
* - 0+ spaces
[a-zA-Z#.:*] - a letter, #, ., : or *
[^{]* - zero or more chars other than {
{ - a { char
[\s\S]*? - 0+ chars, as few as possible.
} - a } char

answered Sep 26, 2018 at 15:50

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Ruby RegExp - Match all CSS selectors and directives

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related