console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

postcss-cliで複数のentryを扱いたい

webpackみたく、複数のアプリを1つの設定ファイルでよしなにしてほしい。

この気持ち・・わかりますか!

しかしpostcss-cli

現時点での最新は`v4.x`。

実は`v2.x`までは設定ファイルから入力と出力を指定できてたけど、`v3.x`になるときに廃止された。

なんでなんってIssue立てた覚えがある。

`from` field in `postcss.config.js` does not work in v3? · Issue #93 · postcss/postcss-cli · GitHub

なので、現時点ではCLI経由の場合、

postcss [input.css] [OPTIONS] [-o|--output output.css] [-w|--watch]

てな具合に指定するしかやりようがない。でも隣のwebpackが青い・・。

なので適当に書いた

Enable multiple entries with postcss-cli. · GitHub

これを使えば、webpackのconfigと同じフォーマットでpostcssで同じようにできる。

module.exports = {
  // このwebpack的な記述を追加
  context: rootPath,
  entry: {
    index: './src/index/main.css',
    room: './src/room/main.css',
  },
  output: {
    path: `${rootPath}/public`,
    filename: '[name].bundle.css',
  },

  // 今まで通り
  plugins: {
    'postcss-import': {},
    'postcss-nested': {},
  }
};

そうすると、

node ./postcss-multiple.js [-w]

ってできる。

フラグとか他にも追加すると思う。(開発が進んで、`NODE_ENV=production`なことを考える時にでも。)

需要ないの?

別に時間かけてないから良いんやけど、先人がラッパー作ってるならそれを使いたいので知ってたら教えてください。

需要あると思うんやけどなー・・。