CSS AST анализатор

Question

У меня есть стили

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

Является ли очевидно, что первый селектор не используется. Я ищу инструмент, который дает мне информацию о таких местах в css. например getUnusedRule(styles) -> номер строки в стиле.css, правило, селектор, что-л. остальное.

Второй случай является извещение о слишком вложенных селекторах

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

getTooLongSelectors(styles, maxNestingNum) -> Информация, чтобы найти место в исходном коде

Я не хочу преуменьшать вывод CSS, но нужно найти такие места в кода и исправить его вручную. Точка не для того, чтобы минимизировать код, но чтобы сделать исходный код более точным для лучшего обслуживания и предотвратить ненужные вещи.

Я предполагаю, что это может быть css AST analizer, который выводит информацию для улучшения исходного кода.

I prefe javascript основанный инструмент, у нас есть несколько js-программ в команде.

Любые идеи? Не только готовые инструменты, но и образ мышления.

Answer 1

Что вы хотите - это, в основном, linter, возможно, вам не нужно создавать свои собственные. Вас может заинтересовать CSSLint. Он создается с помощью nodeJS и предлагает множество предварительно закодированных правил.

В противном случае вы можете использовать reworkCSS, чтобы иметь доступ к простому АСТ.

'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]); 
});