cssnextおよびcssnanoを使用したPostCSSの概要

getdocs

2年前

PostCSS は、スタイルを変換するJavaScriptプラグインの開発を容易にする新しいツールです。これにより、CSSの操作をより簡単にする新しいプラグインの可能性の新しい世界が開かれます。この投稿では、最も人気のある2つのPostCSSプラグインcssnextとcssnanoを紹介しています。

cssnext を使用すると、CSSの未来を今日使用できます。今後の機能や、CSS変数やCSSカラー機能など、すべてのブラウザでサポートされていない機能を使用できます。 cssnext は、すべてのブラウザーで機能するようにスタイルを変換します。つまり、cssnextを使用すると、別のプリプロセッサ構文ではなく、実際のCSS構文を使用してスタイルを記述できます。 cssnext は、ベンダープレフィックスもスタイルに自動的に追加するため、CSSを作成するときに自分でプレフィックスを使用する必要はありません。

例を挙げると、次のCSSスタイルがあるとします。

:root {
  --text: hotpink;
  --bg-color: #F9EC31;
  --flex-center: {
    display: flex;
    margin: auto;
  }
}

.box {
  background-color: var(--bg-color);
  color: color(hotpink whiteness(25%));
  @apply(--flex-center);
}

.warn {
  @apply(--flex-center);
}

cssnext は、スタイルを次のように変換します。

.box {
  background-color: #F9EC31;
  color: rgb(255, 64, 159);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
}

.warn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
}

cssnano は、CSSを最小化および圧縮します。空白を削除し、重複するルールを削除し、古いベンダープレフィックスを削除し、コメントを削除し、その他の多くの最適化を実行します。

cssnextとcssnanoは、特定のニーズに応じて機能するように構成できますが、ここでは、デフォルトの使用方法を示します。これで、ほとんどのユースケースがカバーされるはずです。

この例ではPostCSS-CLIも使用しますが、ワークフローに適している場合は、WebpackまたはGruntでPostCSSを使用することもできます。

PostCSS、PostCSS-CLI、cssnext、cssnanoのインストール

npmを介してcssnextおよびcssnanoプラグインを使用してPostCSSをインストールします。

$ npm install --save-dev postcss postcss-cli postcss-cssnext cssnano

または糸を通して：

$ yarn add postcss postcss-cli postcss-cssnext cssnano --dev

PostCSS-CLIの使用

使用する入力ファイルと出力ファイル、およびPostCSSプラグインを提供することにより、PostCSSコマンドラインインターフェイスを使用します。 –use フラグを使用してプラグインを指定し、 –ouput フラグを使用して出力ファイルを指定し、入力ファイルはフラグなしで最後に提供されます。

$ postcss --use postcss-cssnext --use cssnano --output styles-out.css styles.css

PostCSS CLIを監視モードで使用して、入力ファイルへの変更をリッスンすることもできます。

$ postcss --use postcss-cssnext --use cssnano --output styles-out.css styles.css --watch

json構成ファイルでよりきめ細かい構成オプションを指定し、 –configフラグを使用して構成ファイルを指定することもできます。

$ postcss --config postcss-config.json

構成ファイルは次のようになります。

{
  "use": ["postcss-cssnext", "cssnano"],
  "input": "styles.css",
  "output": "styles-out.css"
}

npmスクリプト

ワークフローを簡単にするには、プロジェクトのpackage.jsonファイルにpostcssスクリプトを設定するだけです。

"scripts": {
  "postcss": "postcss --use postcss-cssnext --use cssnano --output styles-out.css styles.css"
}

これで、次のコマンドを実行するだけです。

$ npm run postcss