css - 如何在原子编辑器中使用正则表达式来合并 CSS 中的冗余类

Question

我正在寻找一种在 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 {*}，但我的语法必须关闭或其他原因，因为我没有找到匹配项。是的，我确实打开了正则表达式。

Answer 1

虽然我还没有机会对其进行全面测试，但以下代码将为您提供一个思路。它将解析 cssText 变量并通过删除冗余选择器和属性来减少它，而不管它们存在多少。它当然只会保留重复属性的最后定义。 CSS 对象被字符串化为一个看起来整洁的文本，带有一个选项，可以将选择器属性向右或向左对齐，这是由 reduceCSS 函数的 bool 参数提供的。您也可以在 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>");