【postcss-cli】ひとつのpostcss.config.jsでファイルごとに異なる処理を実行するためのContextの使い方

CSSを書く上で役に立つPostCSS。
弊社では主にSass（SCSS）を利用していますが、CSSの調整にPostCSSも少しだけ利用しています。

今回はそんなPostCSSの postcss-cli を使って、対象のCSSファイル名を基準に処理を分ける方法について解説します。

はじめに：postcss-cli で autoprefixer を使っている状態からスタート

今回の記事ではpostcss-cli で /css/style.css に autoprefixer を実行している状態であると仮定して、説明していきます。

具体的には、以下のとおりです。

▼package.json

{
  "scripts": {
    "autoprefixer": "postcss ./css/style.css -o ./css/style.css"
  },
  "browserslist": [
    "last 2 versions"
  ],
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "postcss-cli": "^10.1.0"
  }
}

▼postcss.config.js

module.exports = () => ({
    plugins: {
        'autoprefixer':{},
    }
})

今回やりたいこと：style.cssを複製し、複製後のファイルにだけ別の処理をかけたい

この記事では、以下のことを実現するための方法を解説していきます。

• style.cssを元にadmin.cssを作る
• admin.css内のすべての記述に対して “#admin-wrap” のセレクタを追加する

つまり、以下のような style.css をもとに

.example{ display:grid; }

以下のようなadmin.css を作る、ということを行います。

#admin-wrap .example{ display:grid; }

プラグインの準備

処理の書き分けの前に、利用するプラグインを準備します。

セレクタを追加するためのPostCSSプラグインは複数ありますが、今回は「prepend-selector-postcss」を利用します。

npm install -D prepend-selector-postcss

package.json の scripts には ２つのコマンドを追加しておきましょう。

  "scripts": {
    "autoprefixer": "postcss ./css/style.css -o ./css/style.css",
    "copy": "postcss ./css/style.css -o ./css/admin.css",
    "prepend": "postcss ./css/admin.css -o ./css/admin.css"
  },

copy : style.css をもとにして admin.css をつくる処理
prepend : admin.css に #admin-wrap を追加する処理

今回のポイントは「prepend のタイミングのみ prepend-selector-postcss を実行してほしい」という部分になります。

本題：Contextを使った処理の書き分け

--config は今回の目的では使えない

postcss-cli には –config というオプションがありますが、このオプションを使って任意のファイル名の設定ファイルを読ませることはできません。

▼以下はできない

postcss style.css --config postcss.custom.config.js -o hoge.css

Context での処理の書き分け方

postcss.config.js を以下のようにすることで Context を使った処理の書き分けが可能となります。

module.exports = (ctx) => ({
    plugins: {
        '★プラグイン名★':ctx.file.basename === '★ファイル名★' ? {} : false,
    }
})

今回の場合だと、autoprefixer は いつも行い、prepend-selector-postcss については ctx.file.basename が admin.css のときだけ行うため、以下のような postcss.config.js となります。

▼postcss.config.js

module.exports = (ctx) => ({
    plugins: {
        'autoprefixer':{},
        'prepend-selector-postcss':ctx.file.basename === 'admin.css' ?{
            selector:'#admin-wrap ',
        }:false,
    }
})

Context の詳しい説明

今回利用したのは Context の file.basename です。
file.basename には 読み込んだファイルの名前（今回の場合は admin.css ）が入ります。
ファイル名が指定の名前と一致するかどうかで、処理の実行を行うかどうかの設定をしているのが今回の内容になります。

また Context には file（ファイル名や拡張子など）以外にenvとoptionがあり、postcss.config.js を以下のように変更してnpm run prependなどpostcss-cliのコマンドを実行すると確認できます。

▼postcss.config.js

module.exports = (ctx) => (console.log(ctx))

▼実行結果の例

{
  cwd: '/path/to/dirname',
  env: undefined,
  options: {
    map: { inline: true },
    parser: undefined,
    syntax: undefined,
    stringifier: undefined
  },
  file: {
    dirname: '/path/to/dirname/css',
    basename: 'admin.css',
    extname: '.css'
  }
}

ファイル名以外の条件を使いたい場合はその他のContextを上記の方法で確認してお試しください。

※Context の詳しい説明は、postcss-cliのGithub を御覧ください。

まとめ

postcss-cli では --config オプションを使って設定ファイルを分けることはできません。
しかし Context を使いこなせばファイル名などを判断基準として処理をかき分けることができることが分かりました。

postcss-cli を使ってCSSファイルに対して様々な処理をかけてみたい方はぜひ今回ご紹介した Context をお試しください！