PostCSS/postcss.config.js

postcss.config.js は、PostCSS の設定ファイルです。PostCSS は、CSS を変換するためのツールで、プラグインを組み合わせて使用することで、CSS の処理をカスタマイズできます。このファイルに設定を記述することで、使用するプラグインや各種オプションを指定します。

以下に postcss.config.js のプロパティとその意味、用例を説明します。

プロパティと意味

1. plugins

PostCSS で使用するプラグインを指定します。オブジェクト形式でプラグイン名とオプションを渡します。

意味: 利用する PostCSS プラグインのリストを定義。

例:

  plugins: {
    autoprefixer: {},
    cssnano: { preset: 'default' }
  }

2. parser

CSS を解析するカスタムパーサーを指定します。特定の構文（例えば SCSS や LESS）をサポートするために使用します。

意味: カスタム構文用のパーサーを指定。
例:
```
  parser: require('postcss-scss')
```

3. stringifier

CSS を出力するためのカスタムストリンギファイアを指定します。特定の形式で出力する場合に使用します。

意味: カスタム出力用ストリンギファイアを指定。
例:
```
  stringifier: require('postcss-less')
```

4. syntax

parser と stringifier の両方を含むカスタム構文設定を指定します。

意味: カスタムの構文解析と生成を指定。
例:
```
  syntax: require('postcss-scss')
```

5. コンテキスト（`ctx` オブジェクト）

設定を動的に変更するためのオブジェクト。ctx は、PostCSS が呼び出されたときのコンテキスト情報を含みます。

意味: 実行環境やファイルごとに異なる設定を動的に適用。

例

module.exports = (ctx) => ({
  plugins: {
    autoprefixer: {},
    cssnano: ctx.env === 'production' ? { preset: 'default' } : false
  }
});

用例

最小限の設定

最も基本的な構成で、autoprefixer を使用する例。

module.exports = {
  plugins: {
    autoprefixer: {}
  }
};

複数のプラグインを使用

autoprefixer と cssnano を組み合わせて使用する例。

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

構文（SCSS）をサポート

postcss-scss を使用して SCSS 構文を解析する例。

module.exports = {
  parser: require('postcss-scss'),
  plugins: {
    autoprefixer: {}
  }
};

ファイル拡張子ごとに設定を分岐

ファイル拡張子に応じて適切なパーサーを使用する例。

module.exports = (ctx) => ({
  parser: {
    ".sass": require('postcss-sass'),
    ".scss": require('postcss-scss'),
    ".less": require('postcss-less')
  }[ctx.file.extname],
  plugins: {
    autoprefixer: {},
    cssnano: ctx.env === 'production' ? { preset: 'default' } : false
  }
});

高度な設定

開発環境と本番環境で異なるプラグインを使い分ける例。

module.exports = (ctx) => ({
  plugins: {
    autoprefixer: {},
    cssnano: ctx.env === 'production' ? { preset: 'default' } : false,
    'postcss-nested': {}
  },
  parser: ctx.file.extname === '.scss' ? require('postcss-scss') : undefined
});

設定ファイルを利用するコマンド例

PostCSS CLI を使う場合:

postcss src/style.css -o dist/style.css --config postcss.config.js

ポイント

postcss.config.js は PostCSS の柔軟性を最大限に活用するための中心的な設定ファイル。
プロジェクトや環境に応じて、プラグインや設定を動的に変更可能。
拡張性を高めるには ctx を活用すると便利。