長大な 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, '  '))