Nuxt.js で PurgeCSS を使ってみる

Nuxt.js
公開日：
更新日：

PurgeCSS は、HTML 等のテンプレートや JS ファイル内で使われている CSS セレクタを調べて、不要な CSS を削除してくれるツールです。

この記事の手順では PurgeCSS v2 がインストールされます。PurgeCSS v3 を使いたい方は「Nuxt.js でPurgeCSS v3 を使う」という記事で解説しています。

Tailwind CSS を使っている場合は、そちらに PurgeCSS v2 を使ったパージ機能が付いているので、わざわざインストールする必要はありません。

インストール

Nuxt.js 用に nuxt-purgecss というモジュールがあるので、そちらをインストールします。

Nuxt.js のバージョンが v2.9 以上なら devDependencies としてインストールします。もし v2.8 以下なら dependencies としてインストールするか、Nuxt.js をアップデートしてください。

$ npm i -D nuxt-purgecss # v2.9+
$ npm i nuxt-purgecss # v2.8-

インストールできたら nuxt.config.js の buildModules に追記します。こちらも v2.8 以下なら modules を使います。

// nuxt.config.js
export default {
  //...
  // v2.9+
  buildModules: [
    'nuxt-purgecss',
  ],
  // v2.8-
  modules: [
    'nuxt-purgecss',
  ],
  //...
}

ホワイトリストの設定

ここまでの設定では、ページテンプレートにあるクラスなどのセレクタは残りますが、記事用のスタイルなどはすべて消えてしまいます。消されたくないセレクタがある場合は、ホワイトリストを設定します。

purgeCSS の設定を変更するには、nuxt.config.js に purgeCSS プロパティを追加します。設定を変更したときに CSS が効いているかを確かめるには、enabled を設定の間だけ true にしておきます。設定を変更したあとは、ページをリロードしないと反映されなさそうです。

// nuxt.config.js
export default {
  //...
  purgeCSS: {
    enabled: true,
  },
  //...
}

purgeCSS プロパティでは、3種類のホワイトリストを設定することができます。

whitelist

削除されたくないセレクタを文字列の配列で指定します。'button' を指定した場合、button, .button, #button などのセレクタが削除されなくなります。

Highlight.js の hljs クラスが削除されないようにする場合は、単純に 'hljs' を指定します。

// nuxt.config.js
export default {
  //...
  purgeCSS: {
    whitelist: [
      'hljs',
    ],
  },
  //...
}

whitelistPatterns

削除されたくないセレクタを正規表現の配列で指定します。

Highlight.js の hljs-string や hljs-keyword などの「hljs-」で始まるクラスが削除されないようにする場合は、/^hljs-/ を指定します。

// nuxt.config.js
export default {
  //...
  purgeCSS: {
    whitelistPatterns: [
      /^hljs-/,
    ],
  },
  //...
}

whitelistPatternsChildren

削除されたくないセレクタ群の親を正規表現の配列で指定します。

記事用のスタイルが content というクラスの下で規定されている場合、/^content$/ を指定することで .content h2 や .content p, .content ul ul といったセレクタ群が削除されなくなります。 

// nuxt.config.js
export default {
  //...
  purgeCSS: {
    whitelistPatternsChildren: [
      /^content$/,
    ],
  },
  //...
}

CSS コメント

CSS ファイル内で特殊なコメントを使うことで、範囲内のセレクタが削除されないようにします。リセット CSS のような、上記の設定では指定しにくいものはこちらの方が良さそうです。

注意点として、purgeCSS より先に他の PostCSS や cssnano が動作する場合、それらがコメントを削除してしまい、purgeCSS がコメントを元に判断することができなくなってしまいます。これを防ぐために、特殊なコメントは /*! で始まる形式で書きましょう。

/*! purgecss start ignore */
@import "normalize.css/normalize.css";
/*! purgecss end ignore */