Processing embedded css in an html page with Gulp

Question

I would like to use Autoprefixer for the embedded css within my html file.

I use jade and stylus for my nodejs project. Most of the css that I use are very small. Hence, I prefer to embed them into the jade files using stylus filter. Here's an example code.

style
  :stylus
    #container
      display: flex

I use Gulpjs as my build tool. gulp-autoprefixer works on .css files. How do I make it work for embedded style

Answer 1

I used gulp-replace plugin to replace embedded style within html files. Here's the snippet of my gulpfile.coffee

gulp.task 'autoprefix', ->
  gulp.src paths.html.source
    .pipe require('gulp-replace').replace /(<style>)((.|\n)*?)(<\/style>)/gm, (match, style_tag, prefixed)->
            style_tag + require('autoprefixer')('last 2 versions').process(String(prefixed)).css + "</style>"
    .pipe gulp.dest(paths.destination)

Would love to hear if there is more cleaner way to achieve the same.