尝试使用js代码清理错误的CSS规则

Question

我的css文件错误，包含这样的规则（我无法控制这些文件的生成）：

.class html {
}

.class2 html,.class3 html {

}

html {

}

html .class4 {

}

.class body {
}

.class2 body,.class3 body {    
}

body {    
}

body .class4 {    
}

如您所见，某些HTML和BODY规则在类名后放置。

我想要做的是颠倒这个规则以获得适当的限定符（标记然后是类）。

我的预期结果是：

html .class  {
}

html .class2 ,html .class3  {

}

html {

}

html .class4 {

}

body .class  {
}

body .class2 ,body .class3  {

}

body {

}

body .class4 {

}

我尝试使用正则表达式([^,]+\s+)(html|body)进行此替换：$2 $1，但我没有得到我想要的内容。 （Repro on regex101）

如何实现目标？

PS：这将以自定义gulp任务结束，因此需要js正则表达式解决方案。

Answer 1

您可以使用

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

并替换为$3$2$1。

正则表达式演示是here。

表达式详细信息：

• (\.\S+) - 带有一个或多个非空格（第1组）的文字点
• (\s+) - 一个或多个空格（第2组）
• (html|body) - html或body个文字字符序列（第3组）。

替换模式包含以相反方向进行交换的组反向引用。

要考虑.class .classN html等案例，请使用

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

使用(?:\s+\.\S+)*（（零次或多次）量化非捕获组*。