CSSファイルから使われていないCSSを削除する方法【PurifyCSS】

CSSファイルから不要な（使われていない）CSSを削除する方法を紹介します。
Node.js の PurifyCSS というパッケージを使用します。

環境

• Windows 10
• Node.js 11.11.0

Node.js はあらかじめインストールしておいてください。
以下からインストーラもしくはバイナリをダウンロードできます。

• Download | Node.js

PurifyCSS をインストール

まずは PurifyCSS をインストールしましょう。

npm i -D purify-css

PurifyCSS で不要な CSS を削除する

以下が PurifyCSS の簡単な使い方になります（ファイルパスは適宜書き換えてください）。Node.js で実行します。

const purify = require("purify-css")

var content = ['./public/**/*.js', './public/**/*.html'];  // CSSを使用しているhtmlやjsのソースファイル（globパターンで記述可能）
var css = ['./public/css/main.css'];                           // 対象のcssファイル（globパターンで記述可能）

var options = {
    output: './output.css',  // 出力先の（不要なCSSが削除された）CSSファイル
    minify: true,            // CSSファイルを圧縮する（デフォルト：false）
    info: true,              // 何パーセントのCSSが削除されたかをログ表示する（デフォルト：false）
    rejected: true,          // 削除されたCSSをログ表示する（デフォルト：false）
    whitelist: ['*:not*'],   // 削除したくないCSSセレクタを配列で指定する。文字列を*で囲むとそれを含む全てのセレクタを表す。
};

purify(content, css, options);

htmlファイル、jsファイル、cssファイルを指定して purify 関数を実行することで、不要なcssセレクタが削除された新しいcssファイルが作成されます。
jsファイル内で使用されているcssセレクタについても検知するようです。

その他オプションについては、ソース内のコメントを参考にしてください。
※不要なオプションは削除するなりコメントアウトするなりして大丈夫です。

（おまけ）コマンドラインから直接実行する方法

Node.js から実行するのではなく、コマンドラインからプログラムを実行することもできます。

下記を実行してインストールします。

npm install -g purify-css

コマンドラインから purifycss --help を実行できれば無事インストールされています。

使い方は以下となります（ファイルパスは適宜書き換えてください）。コマンドラインから実行します。

purifycss ./public/css/main.css ./public/**/*.html ./public/**/*.js --min --info --rejected --whitelist *:not* --out ./output.css

オプションについては前項で説明したものと同じなのでそちらの解説を参照してください。
※もちろん不要なオプションは削除しても大丈夫です。

おわりに

使われていない CSS を削除するツールやサービスはたくさんあるようですが、今回の方法の良いところはローカルの Node.js で実行できるので開発工程に組み込みやすいことです。開発ではそのままの CSS を使用して、デプロイする前に未使用 CSS を削除することで CSS を軽量化できます。

関連記事