[SOLVED] Gulp libsass/autoprefixer error on comments in sass file

Gulp libsass/autoprefixer error on comments in sass file

I am switching from gulp-ruby-sass to gulp-sass. Gulp ruby sass was working without errors, but to make life easy on our Windows devs I am trying to remove the dependency on Ruby.

I installed the packages at set up my gulp file like so:

    var sassFiles = './app/assets/sass/**/*.{scss,sass}';
    var cssFiles = './app/assets/css';
    var sassOptions = {
      errLogToConsole: true,
      outputStyle: 'compact'
    };
    var autoprefixerOptions = {
      browsers: ['last 2 versions']
    };


  gulp.task('sass', function () {
     return gulp
    .src(sassFiles)
    .pipe(sourcemaps.init())
    .pipe(autoprefixer(autoprefixerOptions))
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(cssFiles))
    .pipe(browserSync.stream());
});

Except it fails every time over the comments in my file:

[08:20:39] Starting 'sass'...

events.js:154
  throw er; // Unhandled 'error' event
  ^
 CssSyntaxError: /Users/stevelombardi/github/designsystem-  3/app/assets/sass/design_system.scss:1:1: Unknown word
 ////
 ^
/// This is a poster comment.

which maps to a comment in the scss file. Note that even if I remove this block, sass simply errors on the next comment.

If I comment out the autoprefixer pipe it works. So what's the issue here?

FWIW, I was following the guidelines from this site.

Solution

There are no Javascript-style single-line // comments in CSS, only multi-line /* */ comments. Single-line // comments are supported by SASS/SCSS, but stripped from the resulting CSS.

Since autoprefixer only operates on CSS not SASS/SCSS you need to run sass() before autoprefixer():

.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefixer(autoprefixerOptions))