0

I'm writing a desktop application with Electron and ReactJS that edits CSS files. I need to scan the CSS looking for a class selector, and then clear the following declaration block and add some new properties.

The tricky part is matching the class in the selector. I need the class to be the actual target (not a parent), but there might be multiple comma-separated selectors, and so I need to check all of them. For example, in this file I'm searching for the containerApp class:

.section-main .section-right , .menu .container-manu , .containerApp .container-nav  { 
         background: black; 
}

.section-main2 .section-left , .menu .container-manu , .section-group-d .containerApp  { 
         background: red; 
}

The first block doesn't match because .containerApp is only mentioned as the parent of the real target, .container-nav. The second block does match, and I would want to remove the background: red; and replace it with something else.

What's the best way to go about doing this CSS matching and rewriting?

Hanan Cohen
  • 3
  • 2
  • 1) Give an example of input file and desired output. 2) To manipulate files with complex standard formats, use existing tools that can parse those files. – Philippos May 26 '17 at 06:26
  • i added examples and i gess it could be implemented with the tools awk or sed. – Hanan Cohen May 26 '17 at 09:45

0 Answers0