【Tailwind CSS】cssnanoを利用してファイルサイズを縮小化する方法を解説

なやむくん

Tailwind Tailwind CSSでビルドされたCSSファイルのサイズを縮小化したい…。

なやむさん

縮小時の設定をカスタマイズできる方法を知りたい...。

などの疑問や悩みを解決してまいります。

本記事の目次

1 cssnanoとは
2 cssnanoの導入方法
3 ビルド実行
4 cssnano最適化のルール
5 まとめ

cssnanoとは

cssnanoは、CSSファイルを最適化し、圧縮するためのPostCSS プラグインです。

具体的に不要な空白、改行、コメントを削除したりなどのコードの最適化を行う事でファイルサイズを縮小し、ページの読み込み速度を向上させるために使用されます。

なやむくん

空白は改行の削除だけなら--minifyオプションを追加しても、minify化してくれますよね？

みつた

そうですね！ただ--minifyよりもcssnanoの方が圧縮する上で設定できる項目も多く、プロジェクトに合わせて圧縮方法をカスタマイズできるというのが大きなポイントです！

cssnanoの導入方法

それではcssnanoの導入方法を解説します。

前提条件

本記事では、前提として以下記事のディレクトリをそのまま使用している形になります。

: Tailwind CSSとは？Tailwind CSSをプロジェクトに導入する方法を解説

続きを見る

■ディレクトリ構成

├── package-lock.json
├── package.json
├── postcss.config.js
├── dist // 本番用
│ ├── index.html
│ └── style.css
├── src // 開発用
│ ├── index.html
│ └── style.css
└── tailwind.config.js

postcss-cliとcssnanoのインストール

cssnanoを導入するには以下のコマンドを実行し、postcss-cliとcssnanoをインストールします。

npm install -D postcss-cli cssnano

ファイルの編集

■postcss.config.js

cssnanoを使用するため、以下のように編集します。

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    cssnano: {
      preset: 'default',
    },
  },
};

preset: 'default' は、cssnanoが提供する最適化ルールの設定です。

■package.json

ビルド時の処理内容を以下のように変更します。

"build": "postcss src/style.css -o dist/style.css && cp src/index.html dist/index.html"

ビルド実行

以下のコマンドでビルド実行します。

npm run build

実行するとdist内のstyle.css内にcssnanoで設定した圧縮されたコードが生成されます。

みつた

生成されたコードはpreset: 'default' に基づいて最適化されています。

cssnano最適化のルール

単にコードのminify化だけならわざわざcssnanoをインストールしなくても、--minifyオプションを使うだけで十分です。

しかし、cssnanoを使用するメリットとして最適化の項目の多さにあります。

みつた

cssnanoの最適化項目とプリセットはこちらに記載されています。

プリセットを使用しなくても、以下のように最適化のルールを独自に設定することも可能です。

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    cssnano: {
      // presetを使わずに独自に設定
      cssDeclarationSorter: true,
      discardComments: { removeAll: true },
      discardDuplicates: true,
      discardEmpty: true,
      discardOverridden: true,
      mergeLonghand: true,
      mergeRules: true,
      normalizeWhitespace: true,
      orderedValues: true,
      reduceTransforms: true,
    },
  },
};

最適化できる項目は数が多いので、いくつかピックアップしてご紹介します。

cssDeclarationSorter

cssDeclarationSorterは、CSSプロパティの順序を最適化します。

/*! cssDeclarationSorter */
/*! プロパティ名に基づいて並べ替え */

/* before */
.cssDeclarationSorter {
  font-size: 20px;
  color: #444;
  font-weight: bold;
  background-color: #ccc;
  font-family: sans-serif;
}

/* after */
.cssDeclarationSorter {
  background-color: #ccc;
  color: #444;
  font-family: sans-serif;
  font-size: 20px;
  font-weight: 700;
}

discardComments

discardCommentsは、CSSファイル内のコメントを削除します。

/*! discardComments */
/*! コメント削除 */

/* before */
.discardComments {
  font-size: 16px; /* 文字サイズ */
  font-weight: 500; /* 文字の太さ */
}

/* after */
.discardComments {
  font-size: 16px;
  font-weight: 500;
}

/*! */のように、!マークがついているコメントは削除されません。

discardDuplicates

discardDuplicatesは、同じプロパティやセレクタが重複している場合に、重複したルールを削除します。

/*! discardDuplicates */
/*! 重複プロパティを削除 */

/* before */
.discardDuplicates {
  border: 1px solid silver;
}
.discardDuplicates {
  border: 1px solid silver;
}

/* after */
.discardDuplicates {
  border: 1px solid silver;
}

discardEmpty

discardEmptyは、空指定のルールを削除します。

/*! discardEmpty */
/*! 空の指定の削除 */

/* before */
.discardEmpty {}
@media screen {}

/* after */
/*! 削除 */

mergeLonghand

mergeLonghandは、個別のCSSロングハンドプロパティをショートハンドプロパティに変換します。

/*! mergeLonghand */
/*! ロングハンドプロパティをショートハンドプロパティに変更 */

/* before */
.mergeLonghand {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

/* after*/
.mergeLonghand {
  margin: 10px 20px;
}

mergeRules

mergeRulesは、同じセレクタやプロパティが複数回登場する場合に、それらを1つのルールにまとめます。

/*! mergeRules */
/*! ロングハンドプロパティをショートハンドプロパティに変更 */

/* before */
.mergeRules {
  color: blue;
}
.mergeRules {
  font-weight: 700;
}


/* after*/
.mergeRules {
  color: blue;
  font-weight: 700;
}

normalizeWhitespace

normalizeWhitespaceは、CSSファイル内の不要な空白や改行を削除し最適化します。

/*! normalizeWhitespace */
/*! ルール、セレクター、宣言の内部と周囲の空白をトリミングし、各セレクター内の最後のセミコロンを削除 */

/* before */
.normalizeWhitespace {
  text-decoration: underline;
  color: red !important;
}

/* after */
.normalizeWhitespace {text-decoration:underline;color:red!important}

orderedValues

orderedValuesは、CSSプロパティの値を最適な順序に並べ替えます。

/*! orderedValues */
/*! 変換の影響を受けるプロパティの引数の順序を並び替え */

/* before */
.orderedValues {
  border: #fff solid 1px;
}

/* after */
.orderedValues {
  border: 1px solid #fff;
}

reduceTransforms

reduceTransformsは、CSSのtransformプロパティを短縮し、最適化します。

/*! reduceTransforms */
/*! 同等の短縮形がある場合、変換関数を短縮系に変換 */

/* before */
.reduceTransforms {
  transform: translate3d(0, 0, 0);
}

/* after */
.reduceTransforms {
  transform: translateZ(0);
}