Question

我有风格

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

很明显，第一个选择器未使用。我搜索一个工具，在css中提供有关这些地方的信息。例如getUnusedRule(styles) - ＆gt; style.css，rule，selector，smth中的行号。其他

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

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

getTooLongSelectors(styles, maxNestingNum) - ＆gt;信息在源代码中找到位置

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

我认为它可能是css AST analizer，它输出手动源代码改进的信息。

我首选 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分析器

1 个答案: