Javascript CSS AST分析器

我有自己的风格

.a{width: 10px;}
...
.a{width: 20px;}

很明显，第一个选择器未使用。 我搜索一个工具，它可以在css中为我提供有关这些位置的信息。 例如

getUnusedRule（styles）

->style.css中的行号、规则、选择器、smth。否则

第二种情况是通知嵌套选择器太多

.a .b .c .d{...}

getTooLongSelectors（样式，maxNestingNum）

->在源代码中查找位置的信息

我不想缩小输出css，但需要在代码中找到这样的位置并手动修复。 重点不是缩小代码，而是使源代码更准确，以便更好地维护，并防止不必要的事情

我想可能是css AST analizer输出了用于手动源代码改进的信息

我推荐基于javascript的工具，我们团队中有一些js程序

---

有什么想法吗？不仅仅是现成的工具，而是思维方式

你想要的基本上是一根短绒，也许你不需要自己制作。你可能会对它感兴趣。它是用nodeJS制作的，并提出了许多预先编码的规则

否则，您可以使用来访问简单的AST

'use strict';

var fs = require('fs');
var path = require('path');
var rework = require('css');

// Usage control
if (process.argv.length != 3) {
    console.log('Usage: node index.js ./path/to/my/stylesheet.css');
    process.exit();
}

// Read a file (relative path) with node
function readFile(fileName, cb) {
    var filePath = path.join(__dirname, fileName);
    fs.readFile(filePath, {encoding: 'utf-8'}, function (error, data) {
        if (error) {
            console.log(error);
            process.exit();
        }

        cb(data);
    });
}

// A nice way to walk through every rule
function walkRules(rules, linters) {
    rules.forEach(function(rule) {
        if (rule.rules) {
            walkRules(rule.rules);
        }
        linters.forEach(function(linter){
            linter(rule);
        });
    });
}

// A custom linter
function checkRule(rule) {
    if (rule.selectors) {
        rule.selectors.forEach(function(selector) {
            if (selector.length > 20) {
                console.log('Line ' + rule.position.start.line + ': too long selector "' + selector + '"');
            }
        });
    }
}

// Main part
var fileName = process.argv[2];
readFile(fileName, function(css) {
    var ast = rework.parse(css);
    walkRules(ast.stylesheet.rules, [checkRule]);
});

---

我更新了我的答案，以共享一个可用的nodejs脚本，该脚本可以处理多个linting，并且当前验证每个选择器是否少于20个字符