長大な CSS セレクターを見つける
でっかいサイズの CSS セレクターがないかどうかを調べるためのツール。Node.js 製。実行すると result.json
に、セレクターが長大な順から並ぶ。該当行数や元コードなどの情報は表示していない。
類似ツールはきっとありふれているんだろうと思う。
コード
const fs = require('fs')
const postcss = require('postcss')
const css = fs.readFileSync('bundle.css', { encoding: 'utf-8' })
const root = postcss.parse(css)
const selectors = []
root.walkRules((rule) => {
selectors.push({
size: rule.selector.length,
selector: rule.selector,
})
})
selectors.sort((selector1, selector2) => {
return selector2.size - selector1.size
})
fs.writeFileSync('result.json', JSON.stringify(selectors, null, ' '))