css - 如何在Atom Editor中使用正则表达式来组合CSS中的冗余类

我正在寻找一种在CSS中找到冗余类并轻松组合它们的方法。
例如，我有：

#quote {
    padding-bottom: 20px;
    font-size: 3.6vmin;
}

#quote {
    text-align: center;
}

但不一定彼此相邻，我想找到一个或多个此类将其组合为示例：

#quote {
    padding-bottom: 20px;
    font-size: 3.6vmin;
    text-align: center;
}

现在，我知道我可以手工完成此操作，但是使用正则表达式似乎更有效，尤其是对于大型代码。
我尝试在查找和替换中键入#quote {*}，但是我的语法必须为off或其他原因，因为我没有找到匹配项。是的，我确实启用了正则表达式。

最佳答案

尽管我还没有机会对其进行全面测试，但是以下代码将为您提供一个思路。它将解析cssText变量，并通过删除多余的选择器和属性来减少它，无论它们有多少个。当然，它将仅保留重复属性的最后定义。 CSS对象被字符串化为整洁的文本，并带有将选择器属性左右对齐的选项，该选项由reduceCSS函数的布尔参数提供。您也可以在https://repl.it/CEkL/4上使用它。

var  cssText = '#quote { padding-bottom: 20px; font-size: 3.6vmin; } #quote { text-align: center; } .pinky{font-family: verdana; background-color: pink; font-family:impact;} .topic{font-size: 5vmin;} #quote {font-size: 3vmin; font-family: verdana;} #quote ~ pinky_pinky{background-color: blue;}';
function reduceCSS(cssText,rightJustify) {

  function parseAndReduce(ct){
    var allSelectors = ct.match(/[^}]+(?={)/g),
        selectorList = {};
    allSelectors.forEach((e,i,a) => a.indexOf(e) == i && (selectorList[e.trim()] = {}));
    Object.keys(selectorList).forEach( e => {
                                              var r = new RegExp(e + "\\s*{\\s*([^}]*)","g"),
                                              t = "";
                                              while (!!(res = r.exec(ct))) res[1].split(";").forEach( s => {
                                                if ((s = s.trim()) !== ""){
                                                  t = s.split(":");
                                                  selectorList[e][t[0].trim()] = t[1].trim();
                                                }});
                                            });
    return selectorList;
  }

  function stringify(co,rj){

    function getMaxLength(arr){
      return arr.reduce((p,c) => p.length >= c.length ? p:c,"").length;
    }

    function justify(s,n,r) {
      return r ? s = " ".repeat(n) + s : s = s + " ".repeat(n);
    }

    var     ct = "",
     selectors = Object.keys(co),
    sMaxLength = getMaxLength(selectors);
    selectors.forEach( s => {
                              var      n = sMaxLength - s.length,
                              properties = Object.keys(co[s]),
                              pMaxLength = getMaxLength(properties);
                              s = !!n ? justify(s,n,rj): s;
                              ct = ct + s + " {\n";
                              properties.forEach( p => {
                                                         var n = pMaxLength - p.length;
                                                         p = !!n ? justify(p,n,rj) : p;
                                                         ct = ct + " ".repeat(sMaxLength+3) + p + " : " + co[s.trim()][p.trim()] + ";\n";
		                      							});
                              ct = ct + " ".repeat(sMaxLength+1) + "}\n";
                            });
    return ct;
  }

  return stringify(parseAndReduce(cssText),rightJustify);
}
document.write("<pre>" + reduceCSS(cssText,true) + "</pre>");