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

webpackでriotのcssをコンパイルする方法を紹介します。

webpackの細かい設定とかはスキップします。

1. プリプロセッサを登録する

webpack.config.js

const postcss = require('postcss');
const prefixer = require('autoprefixer')({ overrideBrowserslist: ["last 2 versions"] });
const compiler = require('@riotjs/compiler');

//第二引数はプリプロセッサの名前
compiler.registerPreprocessor('css', 'postcss', (code, option) => {
  return {
    code: postcss([prefixer]).process(code).css, //ここでcssをコンパイルする
    map: null
  }
});

2. @riotjs/webpack-loaderのオプションに設定する

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.riot$/,
        exclude: /node_modules/,
        loader: '@riotjs/webpack-loader',
        options: {
          css: 'postcss' //プリプロセッサの名前を指定
        }
      }
    ]
  }
};

3. riotコンポーネントで使う

app.riot

<app>
  <div>R</div>
  <div>i</div>
  <div>o</div>
  <div>t</div>
  <!-- type="{name}"に使うプリプロセッサを指定する -->
  <style type="postcss">
    :host {
      display: flex;
    }
  </style>
</app>

以上！

さいごに

いちいちtype指定するの、いつか指定し忘れそう・・ riot v3ではいちいち指定しなくてもできたのに・・・