cool.tag

<cool>
  <p>Hi { message() }</p>
  <script>
    message() {
      return 'there'
    }
  </script>

  <style type="postcss" scoped>
    :scope {
      p {
        transform: translate3d(0, 0, 0);
      }
    }
  </style>
</cool>

gulpfile.js

const gulp     = require('gulp'),
  browserify   = require('browserify'),
  riotify      = require('riotify'),
  riot         = require('riot'),
  sass         = require('node-sass'),
  postcss      = require('postcss'),
  prefixer     = postcss([require('autoprefixer')]),
  source       = require('vinyl-source-stream')

// create a new custom riot css parser
riot.parsers.css.postcss = function(tagName, css, opts, url) {
  var res = sass.renderSync({ data: css })
  return prefixer.process(res.css.toString()).css
}

gulp.task('default', function() {
  browserify({ entries: ['index.js'] })
  .transform(riotify) // pass options if you need
  .bundle()
  .pipe(source('index.out.js'))
  .pipe(gulp.dest('./'))
})

index.js

require('./cool.tag')

package.json

{
  "name": "postcss-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Gianluca Guarini <[email protected]> (http://gianlucaguarini.com)",
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "^6.5.0",
    "browserify": "^13.1.0",
    "gulp": "^3.9.1",
    "node-sass": "^3.10.1",
    "postcss": "^5.2.4",
    "riotify": "^1.0.1",
    "sass": "^0.5.0",
    "vinyl-source-stream": "^1.1.0"
  }
}