Skip to content

Instantly share code, notes, and snippets.

@GianlucaGuarini
Last active June 6, 2017 15:08
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save GianlucaGuarini/19e03124508d2d2b20397c5b63acc1d8 to your computer and use it in GitHub Desktop.
<cool>
<p>Hi { message() }</p>
<script>
message() {
return 'there'
}
</script>
<style type="postcss" scoped>
:scope {
p {
transform: translate3d(0, 0, 0);
}
}
</style>
</cool>
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('./'))
})
require('./cool.tag')
{
"name": "postcss-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Gianluca Guarini <gianluca.guarini@gmail.com> (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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment