How do I use post-css to autoprefix SCSS without compiling to CSS? - sass

Question

I have a static site that is generated using Jekyll.
Directory structure:
| _sass/
|---| subfolder/
|---|---| _component-1.scss
|---|---| _component-2.scss etc
| css/
|---| main.scss
| _site/
|---| css/
|---|---| main.css
main.scss imports all my SCSS components into one file, and Jekyll compiles the SCSS into the 'source' directory (where the static site is generated) - _site.
I want to use an autoprefixer on my SCSS components. There are Jekyll plugins that do this, however I host the site on GitHub pages, which disables plugins for security reasons. I could use the plugin locally and then just push the _site directory to GitHub, but I don't want to use this option.
I want to use a Gulp task to autoprefix my SCSS components, without first compiling the SCSS to CSS. I want to simply autoprefix in my Gulp build step, and let the Jekyll build process take care of the SCSS compilation.
So I've changed the sass_dir in the Jekyll _config.yml file to be _gulped-sass (or whatever) instead of _sass, and tried the following gulp task:
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var source = '_sass/**/*.scss';
var destination = '_gulped-sass';
gulp.task('autoprefixer', function() {
gulp.src(source)
.pipe(autoprefixer({
browsers: ['last 2 versions']
}))
.pipe(gulp.dest(destination));
});
..however this gives the error:
$ gulp autoprefixer
$ error: you tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser
Ok, so the docs for post-scss gives the useage as
var syntax = require('postcss-scss');
postcss(plugins).process(scss, { syntax: syntax }).then(function(result) {
result.content // SCSS with transformations
});
..and the docs for post-css give the useage as:
gulp.task('css', function () {
var postcss = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');
return gulp.src('src/**/*.css')
.pipe( sourcemaps.init() )
.pipe( postcss([ require('precss'), require('autoprefixer') ]) )
.pipe( sourcemaps.write('.') )
.pipe( gulp.dest('build/') );
});
I cannot work out from the docs how to use the postcss-scss parser in my Gulp task. I've tried many different combinations of the two examples from the docs, but none work.
So, how can I use post-css and/or post-scss in my Gulp task in order to autoprefix my SCSS without compiling it to CSS?

Answer 1

Figured it out. The post-scss parser (not plugin) can be assigned as the syntax property of an object passed as a second parameter to the postcss function. It starts to look really messy, but it works:
var gulp = require('gulp');
var source = '_sass/**/*.scss';
var destination = '_gulped-sass';
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
gulp.task('autoprefixer', function () {
return gulp.src(source)
.pipe(postcss([autoprefixer({
browsers: ['last 2 versions']
})], {
syntax: require('postcss-scss')
}))
.pipe(gulp.dest(destination));
});