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

Question

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

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

#quote {
    text-align: center;
}

但不一定相邻，我想找到一个或多个这样的 class 将其组合成示例：

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

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

Answer 1

您可以在下面使用：

to find

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

to replace

{}

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

Answer 2

试试这个

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

替换：

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 中组合冗余类

How to use regex in atom editor to combine redundant classes in CSS

css

regex

atom-editor

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

How to use regex in atom editor to combine redundant classes in CSS

css

regex

atom-editor

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