Trying to clean up wrong CSS rules using js code

Question

I have bad css files with rules like this (I can't control the generation of these files):

.class html {
}

.class2 html,.class3 html {

}

html {

}

html .class4 {

}

.class body {
}

.class2 body,.class3 body {    
}

body {    
}

body .class4 {    
}

as you can see, some HTML and BODY rules are put after class name.

What I want to do is to reverse this rules to obtain proper qualifier (tag then class).

My expected result is:

html .class  {
}

html .class2 ,html .class3  {

}

html {

}

html .class4 {

}

body .class  {
}

body .class2 ,body .class3  {

}

body {

}

body .class4 {

}

I tried using a regex : ([^,]+\s+)(html|body) with this substitution : $2 $1, but I don't get what I want. (Repro on regex101)

How to reach my goal ?

PS: this will ends in a custom gulp task, so a js regex solution is required.

@Tushar: only body and html tag are concerned; because they are higher in the dom than my root classes; — Steve B
– Steve B, Commented Jul 6, 2016 at 16:17
@WiktorStribiżew: this worked. You should add an answer so I can reward you — Steve B
– Steve B, Commented Jul 6, 2016 at 16:18
@SteveB, it wasn't me but I'm guessing because you haven't really explained what you have tried in order to solve the issue yourself. Especially where this solution looks like you're asking for a hack. Why can't you just your CSS instead? — Godwin
– Godwin, Commented Jul 6, 2016 at 16:28

Wiktor Stribiżew · Accepted Answer · 2016-07-06 16:26:14Z

2

You can use

(\.\S+)(\s+)(html|body)

and replace with $3$2$1.

The regex demo is here.

Expression details:

(\.\S+) - a literal dot followed with one or more non-whitespaces (Group 1)
(\s+) - one or more whitespaces (Group 2)
(html|body) - either html or body literal character sequences (Group 3).

The replacement pattern contains the group backreferences that follow in the opposite direction for swapping to occur.

To account for cases like .class .classN html, use

/(\.\S+(?:\s+\.\S+)*)(\s+)(html|body)/g

where a noncapturing group (?:\s+\.\S+)* is quantified with * ((zero or more times).

edited Jul 6, 2016 at 16:26

answered Jul 6, 2016 at 16:21

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

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

3 Comments

Steve B Over a year ago

Works perfectly. As a side note, in my gulpfile I put .pipe(replace(/(\.\S+)(\s+)(html|body)/g,'$3$2$1')) // Tweak rules order (html and body before classname) to include this tweak.

Steve B Over a year ago

hum, not actually an issue in my case, but this fails if two classes are defined before the html tag (ex: .class1 .class2 html is converted to .class1 html .class2

Wiktor Stribiżew Over a year ago

I added this scenario regex to the answer. Sorry for slow typing on my mobile.

Collectives™ on Stack Overflow

Trying to clean up wrong CSS rules using js code

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related