Source-map error with bootstrap-sass ampersand

[aaronrobb]

Version: v7.3.0
Platform :Linux me-via-3384591 4.2.0-c9 #2 SMP Thu Oct 20 09:52:05 UTC 2016 x86_64 x86_64 x86_64 GNU/Linux
Subsystem:
I'm seeing the following error when running 'gulp' on a install that runs bootstrap-sass:

/home/ubuntu/workspace/wp-content/themes/mysite-sage/node_modules/source-map/lib/source-map-generator.js:277
throw new Error('Invalid mapping: ' + JSON.stringify({
^

Error: Invalid mapping: {"generated":{"line":2872,"column":48},"source":"../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss","original":{"line":46,"column":-13},"name":null}

It looks like source-map doesn't like bootstrap-sass's ampersands.
The actual line that the error refers to looks like:

&:focus, 
&.focus { 
color: $color; 
background-color: darken($background, 10%); 
border-color: darken($border, 25%); 
}

If I add a space after the ampersand, the error jumps down to the next line with an ampersand, etc.

Is there a way around this? Maybe a different version is needed to run bootstrap-sass??

[hupad]

@aaronrobb I am facing the same issue. Did you find any fix to this?

[aaronrobb]

@hupadhyayula I didn't find a clean solution. All i could do is in my gulp file, I found these lines and commented them out:

.pipe(function() { return gulpif(enabled.maps, sourcemaps.init()); })

This will just bypass the sourcemaps during the gulp process. Probably a bad idea, but it works for now!

[hupad]

@aaronrobb yeah, that's what I have done as well. This is only happening when you use source maps with scss files, and it's because of the negative column number you have "-13" in your case. Because in source-map-generator.js file, it's doing some validation and checking if the column value is positive or not.

[aaronrobb]

@hupadhyayula Yah its strange. I created a new install, set it up normally, ran a gulp and it worked. Then added in the bootstrap sass module and it broke again.

But its weird if this doesn't happen to other people. I'm just wondering if something in my code is triggering this error but the system sees it as a different error....

[hupad]

@aaronrobb the other thing that you could do, which I just started to explore is to use gulp-clean-css instead of using any other minifying plugins. This way

var minifyCSS = require('gulp-clean-css');

gulp.task('build-css', ['css-to-scss'], function() {
	return gulp.src(paths.scss.source)
		.pipe(sass())
		.pipe(concat(paths.scss.build_name))
		.pipe(minifyCSS({sourceMap: true}, function(details) {
			console.log(details.sourceMap);	// use this source map to write it to your destination path.
		}))
		.pipe(gulp.dest(paths.scss.build_destination));
});

[tfmccomas]

@hupadhyayula and @aaronrobb ... Upping. I'm experiencing this as well. Works in my local env and builds fine (Mac OSX), but bombs in production (Ubuntu).

Any clean fix on this?

[Patabugen]

Rather than commenting out the .pipe(function line, a neater way to disable sourcemaps would be by changing the enabled.maps function to false.

I've done it this way, to make it clear why it's disabled and what to do when the bug is fixed:

  // Disable source maps when `--production`
  // maps: !argv.production,
  maps: false, // Disabled due to this bug: https://github.com/nodejs/help/issues/429

That said, I believe this is a bug with gulp-sourcemaps rather than nodejs so the issue should probably be moved there.

[araphiel]

@Patabugen @tfmccomas @aaronrobb

Ran into this issue using roots/sage 8.5.1 gulp set up with bootstrap-sass. I was able to get around this by rolling gulp-sass back to v2.3.2 .

Others also had similar issues

[QuintinS]

+1

[hvalcourtSerdy]

It appears this may be related to sass/libsass#2312

[bmbsk]

@araphiel 's solution worked for me :-)

[hvalcourtSerdy]

For node-sass the version 3.4.2 is working, but the bug is not fixed, it's only a temporary solution

[jcapozzi]

EDIT: this doesn't result to the same selector see below.

Google brought me here after searching for a solution for sass/libsass#2312 which is sadly locked so I can't comment there but maybe this will help someone else:

Adding a space after the & after getting the error fixed it for me.

Before:
&:hover { color: red; }

After:
& :hover { color: red; }

[araphiel]

@jcapozzi

Does it still process correctly as
.target:hover { color: red; }
& not
.target :hover { color: red; }

https://codepen.io/anon/pen/EbGVQd

[jcapozzi]

@araphiel

Correct you are, that doesn't compile to the same selector. I was so excited to see the error disappear I forgot test the result.

Attempt 2:

.parent { @at-root #{&}:hover { color: red; } }

Ugly but at least I don't have to move my nested css and once fixed a find-and-replace should work.

https://codepen.io/anon/pen/ooJVVr

[montik]

I also replaced & with #{"&"} in the mixin and now it seems to work fine.