HTMLとCSSのファイルを解析し、未使用のCSSをお掃除してくれる便利なツール -DropCSS

Post on:2019年3月28日

DropCSSの特徴

DropCSSは未使用のCSSを掃除してくれる、わずか60行のスクリプトです。 HTMLとCSSを入力として受け取り、使用されたCSSのみを出力として返します。

対象となるセレクタはcss-selectのおかげで、実質的に考えられるすべてのセレクタの削除が達成されます。
参考: サポートされているセレクタ
CSSTreeを使用すると、特別な処理を行わなくても、メディアクエリを他のすべてのブロックと同じように透過的に処理および削除できます。
解析済みHTMLからチェックできないすべての一時的な擬似クラスおよび擬似要素セレクタは保持されます。

合わせて、clean-cssのようなオプティマイザを使ってセレクタをグループ化したり、冗長なルールをマージ・削除したり、未使用のキーフレームを削除したりすることもお勧めします。順番としては、最初にDropCSSを実行するのが合理的です（最適化・軽量化してからDropCSS、最適化してDropCSSして軽量化、にするのか）。

DropCSSの使い方

DropCSSのインストール

npm install -D dropcss

1	npm install -D dropcss

使い方とAPI

const dropcss = require('dropcss');

let html = `
    <html>
        <head></head>
        <body>
            <p>Hello World!</p>
        </body>
    </html>
`;

let css = `
    .card {
      padding: 8px;
    }

    p:hover a:first-child {
      color: red;
    }
`;

const whitelist = /#foo|\.bar/;

let dropped = new Set();

// returns { css }
let cleaned = dropcss({
    html,
    css,
    keepText: false,
    shouldDrop: (sel) => {
        if (whitelist.test(sel))
            return false;
        else {
            dropped.add(sel);
            return true;
        }
    },
});

console.log(cleaned.css);

console.log(dropped);

const dropcss = require('dropcss');

let html = `

<html>

<body>

<p>Hello World!</p>

</body>

</html>

let css = `

.card {

padding: 8px;

}

p:hover a:first-child {

color: red;

}

const whitelist = /#foo|\.bar/;

let dropped = new Set();

// returns { css }

let cleaned = dropcss({

html,

css,

keepText: false,

shouldDrop: (sel) => {

if (whitelist.test(sel))

return false;

else {

dropped.add(sel);

return true;

}

});

console.log(cleaned.css);

console.log(dropped);

shouldDropは、HTML内で一致できなかったすべてのCSSセレクタに対して呼び出されます。保持する場合はfalse、削除する場合はtrueを返します。さらに、このフックを使用して、削除されたすべてのセレクタをログに記録することができます。
keepText: デフォルトではDropCSSはごく少数のセレクタがテキストをターゲットにできないため、処理する前にHTMLからすべてのテキストノードを削除します。テキストノードを処理する必要がないことは、パフォーマンスを大幅に向上させます。しかし、:blankや:emptyなどいくつかの珍しい疑似クラスはテキストノードでアサートします。例えば、:not(:empty)のように組み合わせた場合、これは誤った削除、または誤ったセレクタの保持を招く可能性があります。
keepTextをtrueに設定すると、パフォーマンスを犠牲にしてこれらを適切に機能させることができます。

DropCSSのパフォーマンス

似たような効果を持つツールでのパフォーマンスの比較です。

入力ファイル

test.html
18.8 KB minified, 502 dom nodes
styles.min.css
27.67 KB（clean-cssで最適化・軽量化）

ツール	ツールのサイズ	出力サイズ	削減率	時間	未使用バイト数
DropCSS	2.16 MB	6.60 KB	76.15%	138ms	575 / 8.5%
UnCSS	13.7 MB	6.72 KB	75.71%	429ms	638 / 9.3%
Purgecss	2.53 MB	8.01 KB	71.05%	78ms	1,806 / 22.0%
PurifyCSS	3.45 MB	15.4 KB	44.34%	186ms	9,440 / 59.6%