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

この記事は2020年2月16日にそめによって書かれました。