How to use postcss with Riot.js

app.tag

<app>
  <h1>Riot</h1>
  <p>A React-like user interface micro-library.</p>

  <style scoped type="external">
    :scope {
      display: block;
    }
    h1 {
      border-bottom: 1px solid black;
      flex: auto;
    }
  </style>
</app>

build.js

'use strict'

const
  co = require('co'),
  riot = require('riot-compiler'),
  postcss = require('postcss'),
  autoprefixer = require('autoprefixer'),
  fsp = require('fs-promise'),
  path = require('path')

let css = ''
// 独自パーサの定義
riot.parsers.css.external = (tagName, str) => {
  css += riot.style(str, tagName, 'scoped-css')
  return ''
}

co(function* (config) {
  const
    src = 'src/app.tag',
    dist = 'dist/app.js',
    distCss = 'dist/style.css',
    tag = yield fsp.readFile(src, 'utf8'),             // ファイルの読み出し
    js = riot.compile(tag),                            // タグのコンパイル
    p = postcss().use(autoprefixer()),                 // PostCSSのプラグイン指定
    processed = yield p.process(css, { src, distCss }) // PostCSSの処理

  yield fsp.mkdirs(path.dirname(dist))                 // 書き出し先のフォルダを確保
  yield fsp.writeFile(dist, js)                        // JavaScriptファイルに出力
  yield fsp.writeFile(distCss, processed)              // CSSファイルに出力
})

style.css

app,[riot-tag="app"],[data-is="app"]{ display: block; } app h1,[riot-tag="app"] h1,[data-is="app"] h1{ border-bottom: 1px solid black; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; }

最後のstyle.cssは出力結果です。
やっていることは次の通り。

1. externalというスタイルのタイプとそのパーサーを用意
2. パーサー内部でCSSを集める
3. PostCSSの処理をかける
4. JavaScriptと別途、CSSをファイルに書き出し

サンプル作っていただき有難うございます！