sass/gulp-sass remains silent on certain errors (invalid properties)

Question

Yep, sass in my gulpfile ([email protected]) reports many errors (and keeps continuing the watch, just as it should...), but not errors like these:

=clearfix()
    &:after
        content: ""
        display: table
        clear both

content and display make it correctly into the actual class (where the mixin is referenced), but clear doesn't (because I missed the colon). This is a syntax error (so it's not like rareproperty: 42px; handled gracefully). → still: No errors seen, no interruption.

My gulp task:

gulp.task('sass', function() {

    return gulp.src(src.scssMaster)
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(  sass({
                    debugInfo   : true,
                    lineNumbers : true,
                    outputStyle: 'expanded'
                })
                .on('error', function(err){
                    gutil.log(err);    // stackoverflow.com/a/30742014/444255
                    this.emit('end');
                })
            )
        .pipe(autoprefixer({
            browsers: ['iOS >= 5', 'ie 8', 'Firefox > 2'],
            cascade:   true,
            remove:    true
        }))
        .pipe(rename('lznet.css'))
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest(src.cssDir))

        .pipe(reload({stream: true}))
        .on('end', () => gutil.log('sass thing done'));
});

Mille grazie ❤

Answer 1

This is a syntax error → still: No errors seen, no interruption.

It's not a syntax error at all. Take this example:

.foo
  color: blue
  clear both

This compiles to the following CSS:

.foo {
  color: blue; 
}

It certainly looks like the error of the wrongly specified clear both property is silently ignored. What is actually happening is that you have defined a nested .foo clear both selector. But since your .foo clear both selector is empty it is optimized away by the SASS compiler.

This becomes clear when you look at what happens with another SASS example:

.foo
  color: blue
  clear both
    color: red

This compiles to the following CSS:

.foo {
  color: blue; 
}
.foo clear both {
  color: red; 
}

Now the .foo clear both selector isn't empty and the CSS is no longer optimized away by the compiler.

SASS doesn't know or care about the fact that there isn't actually a clear or both element in any of the HTML specifications. This is a feature and not a bug since:

• Elements can get added and removed from HTML. This would make changes to SASS necessary any time a new HTML version is standardized.
• You can already define custom HTML elements (although in this case clear and both wouldn't be valid names even for web components).
• CSS (and therefore SASS) is in no way limited to HTML. You can also use CSS to style XML documents which obviously let you define custom elements like clear or both.