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

您可以使用以下内容：

<强> to find

(?im)([.#][\w-]+)\s*\{([^}]+)\}\s*\1\s*\{([^}]+?)\}

<强> to replace

$1{$2$3}

我相信你的编辑至少支持PCRE flavor。希望这会有所帮助。

Answer 2

试试这个

^(.*?)\s*#quote {(.*?)\s*}(.*)(#quote {)(.*?)(}.*)$

换人：

\1\3\4\2\5\6

Regex demo

输入：

#any1 {
}

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

#any2 {
}

#quote {
    text-align: center;
}

#any3 {
}

输出：

#any1 {
}

#any2 {
}

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

#any3 {
}

Answer 3

虽然我没有机会完全测试它，但下面的代码会给你一个想法。它将解析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>");

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

3 个答案: