CSSのAST・アナライザ

Question

は私が

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

のスタイルを持っている第一のセレクタ未使用であることは明らかです。 私はcssのそのような場所に関する情報を私に与えるツールを探します。 例：getUnusedRule(styles) - > style.css、rule、selector、smthの行番号。 else。

後者の場合は、あまりにも、ネストされたセレクタ

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

getTooLongSelectors(styles, maxNestingNum)について通知するものである - >インフォソースコード内の場所を見つけるために、私は、出力のCSSを縮小化、しかし、そのような場所を見つける必要があるしたくない

手動で修正してください。 コードを小さくしないでくださいが、より良い保守とパイル不要なものの防止のためにソースコードをより正確にすることです。

手動ソースコード改善のための情報を出力するCSS ASTアナライザーかもしれないと思います。

私は、javacriptベースのツールを使用しています。チームにはいくつかのjsプログラムがあります。

アイデア？単に準備ツールではなく、考え方を歓迎します。

Answer 1

あなたが望むのは基本的にリンターです。あなた自身でビルドする必要はありません。 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]); 
});