Issue with sourcemaps (later transformations)

[glen-84]

Please refer to https://github.com/floridoo/gulp-sourcemaps/issues/124.

I am experiencing exactly the same problem using the following Gulp task (ES2015):

gulp.task("build-css", () => {
    return gulp.src(cssSrc)
        .pipe(newer({
            dest: cssDest,
            ext: ".css"
        }))
        .pipe(sourcemaps.init({debug: true}))
        .pipe(sass({
            // See: https://github.com/sass/node-sass/issues/957
            //outputStyle: "compressed"
            outputStyle: "expanded"
        }).on("error", sass.logError))
        .pipe(autoprefixer({
            // Default for Browserslist (https://github.com/ai/browserslist) @ 2015/09/18
            browsers: ["> 1%", "last 2 versions", "Firefox ESR"]
        }))
        .pipe(sourcemaps.write(".", {debug: true}))
        .pipe(gulp.dest(cssDest));
});

Could it be the same thing described in this comment?

Versions:

• OS: Windows 7 (x64)
• Node: 4.1.1
• NPM: 3.3.4
• [email protected]
• [email protected]
• [email protected]

[xzyfer]

@glen-84 please create a small github repo with a working gulp task that shows this issue in action. There is simply too much noise in these issue to get a clear idea of what is happening. We need to see this issue in action to begin debugging it.

[glen-84]

https://github.com/glen-84/gulp-sass-sourcemaps-issue

$ npm install $ gulp

Notes:

• The issue does not occur when the file is in the root of the src folder (test.scss).
• To view the working CSS, uncomment the first link element in dist/index.html.
• The issue occurs with the src/app/styles/test2.scss file.
• Look at the button element btn class for an example, it should point to _buttons.scss, not test2.css.

Let me know if you need anything else.

Thanks.

[xzyfer]

Sorry for the delay, I will take a look a look at this shortly.

[xzyfer]

@glen-84 in the mean time, are you able to create a failing test case?

[xzyfer]

Note to self, this could be related to https://github.com/sass/node-sass/issues/1194

[glen-84]

@glen-84 in the mean time, are you able to create a failing test case?

That was my failing test case. :grin:

But seriously, I don't know much about unit testing JavaScript. :disappointed:

[glen-84]

@xzyfer Did you find anything?

[xzyfer]

@glen-84 I have not had time to look into this. I'm busy until LibSass 3.3.0 ships. Sorry.

[mariusGundersen]

This could be related to https://github.com/mozilla/source-map/issues/216

[glen-84]

@mariusGundersen I don't think so, it doesn't work in Chrome either.

[clee704]

Hi guys, here is a similar problem.

Reproduction scenario:

git clone https://github.com/clee704/gulp-autoprefixer-test.git
cd gulp-autoprefixer-test
npm install
git checkout error
gulp css  # Unhandled 'error' event
git checkout lost
gulp css
head -c 200 build/css/app.css.map  # "sources" array is incomplete
git checkout works
gulp css
head -c 200 build/css/app.css.map  # correct "sources"

It works if gulp-autoprefixer is not used. It seems the source map object returned by gulp-sass is not standard complient.

[saschaeggi]

I also experience a problem with gulp-sass 2.1.0 and gulp-sourcemaps 1.6.0. It always shows the highest level in the sass code and not the deepest one.

[backflip]

The last version where the tests we specified in https://github.com/unic/estatico/tree/develop/test/css still work (clone the repo and run npm test) is 2.0.3 in combination with node-sass <= 3.3.3.

• Updating gulp-sass to 2.0.4 or 2.1.0 (and keeping node-sass at 3.3.3) leads to an incomplete sources array.
• Updating node-sass to 3.4.1 (and keeping gulp-sass at 2.0.3) breaks the line mapping.
• Updating both breaks every aspect. :)

[glen-84]

@xzyfer Now that LibSass 3.3.0 has shipped, when do you think that you might have time to look into this?

[xzyfer]

Unfortunately no one has submitted a test case showing exactly what sass is required to break source maps. We know there are issue but source maps complicated and with very specific test cases there isn't much we can do. On 11 Dec 2015 9:10 pm, "Glen" [email protected] wrote:

@xzyfer https://github.com/xzyfer Now that LibSass 3.3.0 has shipped, when do you think that you might have time to look into this?

— Reply to this email directly or view it on GitHub https://github.com/dlmanning/gulp-sass/issues/354#issuecomment-163898753 .

[glen-84]

@xzyfer I don't understand. I took the time to create a very simple repo that clearly shows the issue (see this comment).

@clee704 and @backflip have also supplied test cases, and @backflip has even specified what breaks and in which versions it breaks.

What else could you need? :confused:

[backflip]

Switching from gulp-autoprefixer to gulp-postcss (as suggested in https://github.com/sindresorhus/gulp-autoprefixer/pull/66#issuecomment-238671153) seems to "fix" the incomplete sources. However, line-numbers are still off when nesting selectors in SCSS (pointing everything to the root selector's line). Same for introducing an intermediate sourcemap write as suggested in https://github.com/floridoo/gulp-sourcemaps/issues/60#issuecomment-220313018

[backflip]

@xzyfer, would you mind having another look at this?

[backflip]

Let's wait for https://github.com/sass/libsass/pull/2216 to land in node-sass, it certainly sounds promising.

[glen-84]

I just updated my test repo, and the problem is still there.

[bonovski]

My issue was that the sourcemap was pointing to the wrong files in developer tools.

To get everything working the way it should you have to pipe like this:

1. gulp-sass (use anything but compressed, compressing before all other pipes will mess with sourcemaps)
2. gulp-autoprefixer
3. cssnano (or the uglifier of your choice)

gulp.task( 'styles', function() {
	gulp.src( [ styleSRC ] )
		.pipe( sourcemaps.init() )
		.pipe( sass({
			includePaths: [ foundation, motionUI, datepicker ],
			errLogToConsole: true,
			outputStyle: 'compact'
		}) )
		.on( 'error', notify.onError( function (error) {
			return 'An error occurred while compiling sass.\nLook in the console for details.\n' + error;
		} ) )
		.pipe( autoprefixer({ browsers: [ 'last 3 versions', '> 5%', 'Firefox ESR' ] }) )
		.pipe( postcss( [ cssnano() ] ))
		.pipe( rename( { suffix: '.min' } ) )
		.pipe( sourcemaps.write( mapURL ) )
		.pipe( gulp.dest( styleURL ) )
		.pipe( browserSync.stream() );
});