Nuxt.js で PurgeCSS v3 を使う

nuxt-purgecss モジュールでは PurgeCSS v2 しか使えないので、PurgeCSS v3 の PostCSS プラグインを自分で設定します。

Tailwind CSS v1 を使っている場合は、そちらに PurgeCSS v2 を使ったパージ機能が付いています。後述の safelist.greedy や blocklist を使わなくてもよいのであれば、付属のパージ機能を使うことをお勧めします。

インストール

@fullhuman/postcss-purgecss をインストールしますが、Nuxt.js は PostCSS 7 を使っているため最新版は動きません。

PurgeCSS のリリース一覧を見ると v4 から PostCSS 7 をサポートしなくなったことが分かるので、v3 をインストールします。

$ npm i -D @fullhuman/postcss-purgecss@3

設定する

nuxt.config.js の build.postcss.plugins プロパティに追加します。キーをプラグイン名と一致させます。

// nuxt.config.js
export default {
  build: {
    postcss: {
      plugins: {
        '@fullhuman/postcss-purgecss': {}, // 値を false にすると無効になる
      },
    },
  },
}

このオブジェクトの中に設定を書いていきます。nuxt-purgecss や Vue でのデフォルト設定を見ながら、PurgeCSS v3 での設定に書き換えていきます。

'@fullhuman/postcss-purgecss': {
  content: [
    'components/**/*.vue',
    'layouts/**/*.vue',
    'pages/**/*.vue',
    'plugins/**/*.js',
  ],
  extractors: [
    {
      extractor: content => content.match(/[A-z0-9-:\\/]+/g) || [],
      extensions: ['html', 'vue', 'js'],
    },
  ],
  safelist: {
    standard: [
      'body',
      'html',
      'nuxt-progress',
      /-(leave|enter|appear)(|-(to|from|active))$/,
      /^(?!(|.*?:)cursor-move).+-move$/,
      /^router-link(|-exact)-active$/,
      /data-v-.*/,
    ],
  },
},

私は Vue ファイルに一切 CSS を書いていないので分かりませんが、そちらに CSS を書いている方は Vue のデフォルト設定の defaultExtractor を設定しないといけないかも知れません。

safelist の設定

PurgeCSS v3 から whitelist, whitelistPatterns などにかわり safelist が導入されました。

safelist.standard

文字列または正規表現を含む配列で、残したいセレクタを指定します。

/^hljs-/ を指定した場合、.hljs-comment や .hljs-class .hljs-title などの hljs- で始まるクラスのみで構成されたセレクタだけが残ります。v2 の whitelist と whitelistPatterns を合わせたようなオプションです。

'@fullhuman/postcss-purgecss': {
  //...
  safelist: {
    // hljs- で始まるセレクタのみ残る。.hljs クラス自体は対象外
    standard: [/^hljs-/],
  },
  //...
},

safelist.deep

正規表現の配列で、子や孫も含めて残したいセレクタを指定します。

/^hljs-/ を指定した場合、standard で残っていたセレクタに加えて .hljs-title.class_ などの hljs- で始まるセレクタをすべて残します。v2 の whitelistPatternsChildren のようなオプションです。

'@fullhuman/postcss-purgecss': {
  //...
  safelist: {
    // hljs- で始まるセレクタであれば .hljs-title.class_.inherited__ みたいなのも残る
    deep: [/^hljs-/],
  },
  //...
},

safelist.greedy

正規表現の配列で、先頭に限らずどこかしらの部分がマッチすれば残したいセレクタを指定します。

/^hljs-/ を指定した場合、deep で残っていたセレクタに加えて .diff .hljs-meta や .ruby .hljs-property などの先頭のクラスが hljs- で始まっていないセレクタも残します。

'@fullhuman/postcss-purgecss': {
  //...
  safelist: {
    // hljs- で始まるセレクタがどこかにあれば残す。.hljs クラス自体は変わらず対象外
    greedy: [/^hljs-/],
  },
  //...
},

CSS コメント

v2 同様、CSS ファイル内で特殊なコメントを使うことでも残したいセレクタを指定できます。

/* インポート先のスタイルをすべて残す（postcss-import を使っている場合） */
/*! purgecss start ignore */
@import "highlight.js/styles/base16/tomorrow-night";
/*! purgecss end ignore */

blocklist の設定

文字列か正規表現を含む配列で、ソース内に存在しているが取り除きたいセレクタを指定します。safelist で指定されているセレクタや CSS コメントで無視された範囲には効きません。

例えば Tailwind CSS Typography のスタイルを使うので .hljs クラスは不要である場合に 'hljs' を指定しておくと、ソースのどこかに hljs という文字列があっても pre code.hljs や .hljs ::selection, .hljs::selection といったセレクタが削除されます。

'@fullhuman/postcss-purgecss': {
  //...
  safelist: {
    greedy: [/^hljs-/],
  },
  // ソース内に hljs という文字列があっても .hljs、code.hljs などを取り除く
  blocklist: ['hljs'],
  //...
},