webpackでriotのcssをコンパイルしたい

riotのcssに自動でベンダプレフィックスをつけたかっただけなのに地味にハマったのでメモします。

ダメなパターン

webpack.config.js

const postcss = require('postcss');
const prefixer = require('autoprefixer')({ browsers: ['last 2 version'] });
module.exports = {
  // ・・・省略
  module: {
    rules: [
      // ・・・
      {
        test: /\.tag$/,
        exclude: /node_modules/,
        use: [{
          loader: 'riot-tag-loader',
          options: {
            hot: 'false',
            style: 'postcss',
            parsers: {
              css: {
                postcss: (tagName, css) => postcss([prefixer]).process(css).css
              }
            }
          }
        }]
      }
    ]
  }
};

実行すると以下のエラーが出ました。
Module build failed: Error: Riot parser "css.postcss" is not registered.
どうやらpostcssというパーサが登録されてないっぽいです。おかしいですね。
ちゃんとparsersの下にかいたはずなんですけどね。
調べてみたらあっさり解決法が出ました。>>> https://github.com/riot/tag-loader/issues/4

OKパターン

webpack.config.js

const postcss = require('postcss');
const prefixer = require('autoprefixer')({ browsers: ['last 2 version'] });

// new !!
const riot = require('riot');
riot.parsers.css.postcss = (tagName, css) => postcss([prefixer]).process(css).css

module.exports = {
  // ・・・省略
  module: {
    rules: [
      // ・・・
      {
        test: /\.tag$/,
        exclude: /node_modules/,
        use: [{
          loader: 'riot-tag-loader',
          options: {
            hot: 'false',
            style: 'postcss'
          }
        }]
      }
    ]
  }
};

どうやらriot-tag-loaderがカスタムパーサの登録をサポートしてない(?)ようで、riotに直接登録するとうまくいきます。

最後に

optionにriot.config.jsの内容をそのまま書けばいいと思ってもので地味にハマりました。