CSS最適化ツールの比較: Autoprefixer、cssnano、PostCSS、PurifyCSS

現代のフロントエンド開発では、CSSを効率的に処理・最適化することがパフォーマンスやメンテナンス性に直結します。ここでは、autoprefixer、cssnano、postcss、purify-css の4つの主要なnpmパッケージを、実際の開発現場での使い方を中心に深く比較します。

🧩 基本的な役割と関係性

まず、これらのパッケージは互いに独立しているわけではありません。特に重要なのは PostCSS です。

• postcss は、CSSを変換するためのプラットフォーム（エンジン）です。単体では何もしませんが、プラグインを組み込むことで強力な機能を提供します。
• autoprefixer と cssnano は、どちらも PostCSSのプラグインとして動作します。
• purify-css はPostCSSとは無関係で、未使用CSSを削除するスタンドアロンツールです（ただし、現在は非推奨）。

つまり、実際のプロジェクトでは postcss を中心に、autoprefixer や cssnano をプラグインとして使うのが一般的です。

🛠️ PostCSS：CSS変換の基盤

postcss は、CSSをAST（抽象構文木）として解析し、JavaScriptで操作できるようにするツールです。これにより、カスタムルールや既存プラグインを使ってCSSを変換できます。

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')
  ]
};

この設定だけで、ベンダープレフィックスの自動付与とCSSの圧縮が可能になります。PostCSS自体は「何をするか」を決めません — 全てはプラグイン次第です。

🌐 Autoprefixer：ブラウザ互換性の自動対応

autoprefixer は、指定したブラウザサポート範囲に基づいて、必要なベンダープレフィックス（例：-webkit-、-moz-）を自動で追加します。

/* 入力CSS */
.example {
  display: flex;
  transition: all 0.3s;
}

/* 出力CSS（古いブラウザ向け） */
.example {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

ブラウザターゲットは .browserslistrc ファイルや package.json で定義します：

// .browserslistrc
> 1%
last 2 versions

Autoprefixerを使うことで、開発者は手動でプレフィックスを書く必要がなくなり、CSSが常に最新かつ安全になります。

📦 cssnano：プロダクション向けCSS圧縮

cssnano は、不要な空白・コメント・重複ルールなどを削除し、CSSファイルを最小化します。これはプロダクションビルドでのみ有効です。

/* 入力CSS */
.button {
  /* ボタンスタイル */
  color: #ffffff;
  background-color: #000000;
  padding: 10px 20px;
}

.button {
  color: white; /* 重複宣言 */
}

/* 出力CSS（圧縮後） */
.button{color:#fff;background:#000;padding:10px 20px}

cssnano はPostCSSプラグインとして動作し、以下のように設定します：

// postcss.config.js
module.exports = {
  plugins: [
    require('cssnano')({
      preset: 'default'
    })
  ]
};

注意点として、cssnano は「安全な最適化」のみを行うよう設計されていますが、一部の高度な最適化（例：calc() の簡略化）はオプトインが必要です。

🗑️ PurifyCSS：未使用CSSの削除（非推奨）

purify-css は、HTMLやJavaScriptファイルをスキャンして、実際に使われているCSSセレクタだけを残し、それ以外を削除するツールでした。

// purify-css の使用例（非推奨）
const purify = require('purify-css');

purify(['index.html', 'app.js'], ['styles.css'], {
  output: 'purified.css'
});

しかし、公式npmページおよびGitHubリポジトリによると、purify-css は現在非推奨（deprecated）であり、新規プロジェクトでの使用は推奨されていません。代わりに、より現代的で信頼性の高い代替手段（例：PurgeCSS）が広く使われています。

PurifyCSSには以下のような問題がありました：

• 動的クラス名（例：class="btn-${type}"）を正しく検出できない
• JavaScriptフレームワーク（React, Vueなど）との連携が不安定
• 長期間メンテナンスされていない

そのため、未使用CSSの削除が必要な場合は、PurgeCSS（PostCSSプラグインとしても利用可能）を検討すべきです。

🔁 実際のワークフローにおける統合

典型的なビルドパイプラインでは、これらを以下のように組み合わせます：

1. Sass/Less → 標準CSS
2. PostCSS + Autoprefixer → ベンダープレフィックス追加
3. PostCSS + cssnano → 圧縮（プロダクション時のみ）

Webpackでの例：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  ['autoprefixer', {}],
                  process.env.NODE_ENV === 'production' ? ['cssnano', {}] : null
                ].filter(Boolean)
              }
            }
          }
        ]
      }
    ]
  }
};

このように、postcss をハブとして、autoprefixer と cssnano を条件付きで適用するのがベストプラクティスです。

⚠️ PurifyCSSの代替：PurgeCSSへの移行

もし未使用CSSの削除が必要なら、PurgeCSS を使うことを強く推奨します。これはPostCSSプラグインとしても利用でき、Vue CLIやTailwind CSSなど多くのツールで標準採用されています。

// postcss.config.js with PurgeCSS
module.exports = {
  plugins: [
    require('@fullhuman/postcss-purgecss')({
      content: ['./src/**/*.html', './src/**/*.vue', './src/**/*.js'],
      defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
    })
  ]
};

PurgeCSSは動的クラスにも対応しており、安全性と精度が大幅に向上しています。

📊 まとめ：各パッケージの位置づけ

💡 最終的なアドバイス

• 新しいプロジェクトでは、必ず postcss を導入し、その上に autoprefixer と cssnano を乗せる。
• purify-css は絶対に使わない。未使用CSSの削除が必要なら PurgeCSS を検討する。
• PostCSSの設定は環境ごとに切り替える（例：開発時は圧縮なし、プロダクション時は圧縮あり）。

これらのツールを正しく組み合わせることで、高速で保守性の高いCSSワークフローを構築できます。