CSS AST 分析器

Question

我有风格

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

很明显第一个选择器未被使用。我在 css 中搜索可以提供有关此类地点信息的工具。例如 getUnusedRule(styles) -> style.css 处的行号、规则、选择器等等。否则。

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

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

getTooLongSelectors(styles, maxNestingNum) -> 在源代码中查找位置的信息

我不想缩小输出 css，但需要在代码中找到这样的地方并手动修复它。关键是不是压缩代码，而是为了更好的维护和防止一堆不必要的东西，使源代码更准确。

我假设它可能是 css AST 分析器，它输出用于手动改进源代码的信息。

我更喜欢基于javascript的工具，我们团队有一些js程序。

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

Answer 1

你想要的基本上是一个 linter，也许你不需要自己构建。您可能对 CSSLint 感兴趣。它是用nodeJS做的，并且提出了很多预编码的规则。

否则，您可以使用 reworkCSS 访问简单的 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]);
});

CSS AST 分析器

CSS AST analyzer

javascript

css

optimization

abstract-syntax-tree