PurgeCSS

ヒント

このドキュメントはPurgeCSS 3.0以上を対象としています。 PurgeCSS 2.xのドキュメントを参照するには、こちら新しいウィンドウで開くをクリックしてください。

セーフリスト

最終的なCSSに残すセレクタを指定できます。これは、PurgeCSSオプションの`safelist`、またはCSS内で特別なコメントを使用して行うことができます。

特定のセレクタ

`safelist`を使用して、セーフリストにセレクタを追加できます。

const purgecss = new Purgecss({
    content: [], // content
    css: [], // css
    safelist: ['random', 'yep', 'button']
})

この例では、セレクタ`.random`、`#yep`、`button`は最終的なCSSに残されます。

パターン

`safelist.standard`、`safelist.deep`、`safelist.greedy`を使用して、正規表現に基づいてセレクタをセーフリストに登録できます。

const purgecss = new Purgecss({
    content: [], // content
    css: [], // css
    safelist: {
      standard: [/red$/],
      deep: [/blue$/],
      greedy: [/yellow$/]
    }
})

この例では、`.bg-red`などの`red`で終わるセレクタ、`blue p`や`.bg-blue .child-of-bg`などの`blue`で終わるセレクタとその子、そして`button.bg-yellow.other-class`などの`yellow`で終わる部分を持つセレクタは、最終的なCSSに残されます。

パターンは正規表現です。regexr新しいウィンドウで開くを使用して、正規表現が探しているものに対応していることを確認できます。

CSSに直接記述

特別なコメントを使用して、CSSに直接セーフリストを記述できます。 `/* purgecss ignore */`を使用して、次のルールをセーフリストに登録します。

/* purgecss ignore */
h1 {
    color: blue;
}

`/* purgecss ignore current */`を使用して、現在のルールをセーフリストに登録します。

h1 {
    /* purgecss ignore current */
    color: blue;
}

`/* purgecss start ignore */`と`/* purgecss end ignore */`を使用して、ルールの範囲をセーフリストに登録できます。

/* purgecss start ignore */
h1 {
  color: blue;
}

h3 {
  color: green;
}
/* purgecss end ignore */

h4 {
  color: purple;
}

/* purgecss start ignore */
h5 {
  color: pink;
}

h6 {
  color: lightcoral;
}

/* purgecss end ignore */

注意点

PostCSSやcssnanoなどの一部のCSS最適化ツールは、ビルドプロセスでPurgeCSSが実行される前にコメントを取り除きます。これは、これらの手順が開発中は無効になっていることが多いため、気付かれない場合があります。これらのコメントが削除されないようにするには、感嘆符で重要としてマークできます。 `/* ! purgecss ignore */`

/*! purgecss start ignore */
h5 {
  color: pink;
}

h6 {
  color: lightcoral;
}

/*! purgecss end ignore */