regex finding css block

Asked Oct 01 '18 at 07:44

Active Oct 01 '18 at 07:51

Viewed 50 times

I have this CSS block:

@component HelloWorld {
  background-color: red;
  padding: 1rem;

  @modifier red {
    color: green;
  }
}

and I want to find all the contents in this block until the blocks end (with })

I wrote the following regex and I don't know how to ignore all of the brackets inside the block and find only the closing one.

[\s]{0,}@([\w]+)[ ]{1,}([\w\d]+)[ ]{0,}{.+?(?=})

and also I want to match all of the blocks if I have the following CSS:

@modifier red {
  color: green;
}

@modifier red {
  color: green;
}

edited Oct 01 '18 at 07:51

asked Oct 01 '18 at 07:44

Nir Berko

`.+}` will match everything before `}` – Vaibhav Vishal Oct 01 '18 at 07:48
@VaibhavVishal, please look at this example: https://regex101.com/r/WrGWZo/2, i want to match two of the blocks – Nir Berko Oct 01 '18 at 07:50
try this `.+?}` – Vaibhav Vishal Oct 01 '18 at 07:51
@VaibhavVishal, and now I have a problem with the first example, I edited the question with more information. I hope my question is understandable – Nir Berko Oct 01 '18 at 07:53
You need `[^}]*`, `\s*@(\w+)\s+(\w+)\s*{[^}]+}`, see https://regex101.com/r/WrGWZo/3 – Wiktor Stribiżew Oct 01 '18 at 07:53
@WiktorStribiżew, try this on the first example: https://regex101.com/r/WrGWZo/5 – Nir Berko Oct 01 '18 at 07:56
Ok, so you need a CSS parser. – Wiktor Stribiżew Oct 01 '18 at 07:56
@WiktorStribiżew, this is no possible by one regex query? – Nir Berko Oct 01 '18 at 07:59
No............... – Wiktor Stribiżew Oct 01 '18 at 08:02
https://regex101.com/r/WrGWZo/8 this is the best I can think of right now, nested blocks will create problems – Vaibhav Vishal Oct 01 '18 at 08:09
thank you @VaibhavVishal, I will use CSS parser as Wiktor said. – Nir Berko Oct 01 '18 at 08:12

0 Answers0