PurgeCSS

エクストラクター

PurgeCSSは、ニーズに合わせて調整できます。未使用のCSSが大量に削除されていないことに気付いた場合は、特定のエクストラクターを使用することをお勧めします。

PurgeCSSは、ファイルで使用されているセレクターのリストを取得するために、エクストラクターに依存しています。セレクターを含むファイルには、htmlファイル、pugのようなテンプレートファイル、さらにはjavascriptファイルなど、複数の種類があります。

デフォルトのエクストラクター

PurgeCSSは、すべての種類のファイルで動作するデフォルトのエクストラクターを提供していますが、制限があり、使用しているファイルの種類やCSSフレームワークに完全に適合しない場合があります。

デフォルトのエクストラクターは、ファイルのすべての単語をセレクターと見なします。デフォルトのエクストラクターには、いくつかの制限があります。

  • @、:、/などの特殊文字は考慮されません。

エクストラクターの使用

PurgeCSSが未使用のCSSを十分に削除しない場合、または使用済みのCSSを削除する場合、エクストラクターを使用すると便利です。

拡張子に特定のエクストラクターを使用すると、最高の精度が得られます。htmlファイルのみをパージする場合は、purgecss-from-htmlエクストラクターを検討することをお勧めします。

PurgeCSS設定ファイルでextractorsオプションを設定することにより、エクストラクターを使用できます。

import purgeJs from "purgecss-from-js";
import purgeHtml from "purgecss-from-html";

const options = {
  content: [], // files to extract the selectors from
  css: [], // css
  extractors: [
    {
      extractor: purgeJs,
      extensions: ["js"],
    },
    {
      extractor: purgeHtml,
      extensions: ["html"],
    },
  ],
};
export default options;

エクストラクターの作成

エクストラクターは、ファイルの内容を文字列として受け取り、セレクターの配列を返す単純な関数です。慣例により、npmパッケージの名前はpurgecss-from-[ファイルの種類]です（例：purgecss-from-pug）。この規則を使用すると、ユーザーはnpmでpurgecss-fromを検索することで、エクストラクターのリストを見つけることができます。

const purgeFromJs = (content) => {
  // return array of css selectors
};

利用可能なエクストラクターのリスト（進行中）

警告

これらのエクストラクターはまだ開発中です。本番環境での使用はまだ推奨されていません。