postcss.config.jsに変数を渡す

babel7 + webpack4 + storybook4にバージョン上げる作業を頑張ったので、しばらくその辺の話を書いていく。

css-loaderが1.0.0からminimize optionを廃止されたため、代替手段としてcss-nanoを追加した。その際に、postcss.config.jsに変数を渡したくて、調べたら方法があったのでメモレベルで記事にする。

before

webpack.config.js の断片

          {
            loader: 'css-loader',
            options: {
              // CSS Loader https://github.com/webpack/css-loader
              importLoaders: 1,
              sourceMap: isDebug,
              // CSS Modules https://github.com/css-modules/css-modules
              modules: true,
              localIdentName: isDebug ? '[name]-[local]-[hash:base64:5]' : '[hash:base64:5]',
              // CSS Nano http://cssnano.co/options/
              // css-loader 1.0.0で廃止されたオプション
              minimize: !isDebug,
              discardComments: { removeAll: true },
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              config: {
                path: './postcss.config.js',
              },
            },
          },

after

webpack.config.js の断片

          {
            loader: 'css-loader',
            options: {
              // CSS Loader https://github.com/webpack/css-loader
              importLoaders: 1,
              sourceMap: isDebug,
              // CSS Modules https://github.com/css-modules/css-modules
              modules: true,
              localIdentName: isDebug ? '[name]-[local]-[hash:base64:5]' : '[hash:base64:5]',
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              config: {
                path: './postcss.config.js',
                ctx: {
                  isDebug,
                },
              },
            },
          },

postcss.config.js の断片

module.exports = ({ options }) => ({
  // The list of plugins for PostCSS
  // https://github.com/postcss/postcss
  plugins: [
    // ...略
    ...(!options.isDebug
      ? [
        require('cssnano')({
          preset: [
            'default',
            {
              discardComments: { removeAll: true },
            },
          ],
        }),
      ]
      : []),
  ],
});

公式ドキュメント

github.com