Grep Or Regex to transform css

Question

I have several stylesheets with hundreds of lines of code. The stylesheets are conflicting with other stylesheets and I want to isolate there specificity to a single div. I don't want to use an iframe and I tried changing the precedence of the stylsheets in the head element.

Is there a grep or regex command that I can run to insert this string #isolated-div as the first selector in every line of all the specified stylsheets? That way, every style applied to an element will have to be an element that is a child of the div.

Nevermind top order elements like body or iframe.

blueimp.github.com/cdn/css/bootstrap.min.css But.. there are like several. I mean.. its css. So the format is going to be the same no matter what. Except for the ones that are minified. I can formt those with line breaks after every selector property pair. — user1464296
– user1464296, Commented Aug 24, 2012 at 2:59
Have you looked at less CSS? It enhances CSS by adding the capability to do clever things such as nesting selectors in other selectors. In this case it would mean that rather than changing every rule you could just wrap the whole stylessheet in a #isolated-div selector. There are various implementations of it for both clientside use and server side (I've been very happy with dotLess for .NET). — Chris
– Chris, Commented Aug 24, 2012 at 9:23

Barmar · Accepted Answer · 2012-08-24 10:58:41Z

1

Is an AWK solution OK?

awk -F'{' '{split($1, sel, ","); 
            for(i in sel) {if (i>1) printf(","); printf("#isolated-div %s", sel[i]); }
            printf("{%s\n", $2) }' filename.min.css > filename.new.min.css

answered Aug 24, 2012 at 10:58

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

Comments

Firas Dib · Accepted Answer · 2012-08-24 09:18:33Z

1

I don't know how the stylesheets look, but I will give it a go. Something as simple as this could work but is by no means perfect: http://regex101.com/r/gI1hV0

/^[^{}]+{/gm

But I can't guarantee it'll work every time.

answered Aug 24, 2012 at 9:18

Firas Dib

2,6211 gold badge21 silver badges40 bronze badges

Collectives™ on Stack Overflow

Grep Or Regex to transform css

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related