Error thrown when SASS ampersand present

[davewallace]

Hi,

I've found quite a few similar mentions on various other sites about this, and there's a general thread here: nodejs/help#429

Some people are experiencing the issue with Bootstrap SASS, I'm not using Bootstrap.

Essentially, I have a gulp task that looks like this:

gulp.task('css-compile', 'Compile SASS into CSS', function () {

    if (pkg_argv.debug) {
        console.log(SCSSPaths.length + ' .scss paths have been found in the codebase, they will now be processed.');
    }

    var tasks = SCSSPaths.map(function (themePath) {

        themePath = themePath + '/static';

        if (pkg_argv.debug) {
            console.log('Compiling CSS for ' + pkg_color(themePath, 'BLUE'));
        }

        return gulp.src('sass/**/*.scss', {cwd: themePath})
            .pipe(pkg_sourcemaps.init())
            .pipe(pkg_gulpif(pkg_argv.production !== 'false', pkg_sass().on('error', pkg_sass.logError), pkg_sass({
                outputStyle: 'expanded',
                sourceMapEmbed: true
            }).on('error', pkg_sass.logError)))
            .pipe(pkg_stripComments.text())
            .pipe(pkg_header(FILE_HEADER, { pkg : pkg }))
            .pipe(pkg_sourcemaps.write('.'))
            .pipe(gulp.dest('style', {cwd: themePath}));
    });

    return pkg_es.concat.apply(null, tasks);
});

Up until I made a simple change to a SASS file, everything was working just fine.

This is the code I wrote and successfully compiled:

@mixin debugMarker($debugText: 'hello?') {
  position: relative;
}

After the simple amendment:

@mixin debugMarker($debugText: 'hello?') {
  position: relative;
  &:after {
    content: $debugText;
  }
}

So it appears to be the introduction of & that throws the following error when I run my Gulp build task (or when gulp watching):

[10:09:25] Starting 'build'...
[10:09:25] Starting 'css-compile'...
[10:09:25] Finished 'build' after 36 ms
/Users/davew/dev/social/src/node_modules/source-map/lib/source-map-generator.js:277
      throw new Error('Invalid mapping: ' + JSON.stringify({
      ^

Error: Invalid mapping: {"generated":{"line":2369,"column":17},"source":"_mixin.scss","original":{"line":14,"column":-11},"name":null}
    at SourceMapGenerator_validateMapping [as _validateMapping] (/Users/davew/dev/social/src/node_modules/source-map/lib/source-map-generator.js:277:13)
    at SourceMapGenerator_addMapping [as addMapping] (/Users/davew/dev/social/src/node_modules/source-map/lib/source-map-generator.js:101:12)
    at /Users/davew/dev/social/src/node_modules/concat-with-sourcemaps/index.js:60:28
    at Array.forEach (native)
    at SourceMapConsumer_eachMapping [as eachMapping] (/Users/davew/dev/social/src/node_modules/source-map/lib/source-map-consumer.js:155:14)
    at Concat.add (/Users/davew/dev/social/src/node_modules/concat-with-sourcemaps/index.js:58:18)
    at DestroyableTransform.TransformStream [as _transform] (/Users/davew/dev/social/src/node_modules/gulp-header/index.js:61:12)
    at DestroyableTransform.Transform._read (/Users/davew/dev/social/src/node_modules/readable-stream/lib/_stream_transform.js:159:10)
    at DestroyableTransform.Transform._write (/Users/davew/dev/social/src/node_modules/readable-stream/lib/_stream_transform.js:147:83)
    at doWrite (/Users/davew/dev/social/src/node_modules/readable-stream/lib/_stream_writable.js:347:64)
    at writeOrBuffer (/Users/davew/dev/social/src/node_modules/readable-stream/lib/_stream_writable.js:336:5)

It appears to be directly related to this particular lib, because when I comment out .pipe(pkg_sourcemaps.init()) and .pipe(pkg_sourcemaps.write('.')) above, everything then continues to compile again. Likewise, if I leave sourcemap generation on, but refrain from using & in that @mixin - everything works again.

Any idea on fixes/workarounds?

Thanks!

[phated]

Based on following linked issues, this looks like a problem with the source-map and node-sass modules not working together. This is not a gulp-sourcemaps issue.

[hvalcourtSerdy]

Maybe the cause is libsass sass/libsass#2312 (libsass is a dependency of node-sass)