javascript - 使用 Javascript 从只包含需要的选择器的旧 css 文件生成新的 css

Question

我有超过 2000 行的 css 文件。有什么方法可以创建迷你 js 函数来解析 html，只从这个 .css 文件中获取需要的选择器并生成新的 css？

Answer 1

使用 IE9(因为其更强大的 StyleSheet DOM)。在您的 JavaScript 控制台中运行此脚本:

var used = [], unused = [];
[].forEach.call(document.styleSheets, function (ss) {
    [].forEach.call(ss.cssRules, function (r) {
        if (document.querySelector(r.selectorText)) {
            used.push(r);
        } else {
            unused.push(r);
        }
    });
});
console.log("Selectors that exist in this page: " + used.length);
console.log("Selectors that do not exist in this page: " + unused.length);

used.map(function (rule) {
    return rule.cssText;
}).join("\n");

它将仅在控制台中打印出给定页面所需的规则。