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

Viewed 4153

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?

1 Answers
Related