Cannot make sourcemaps work

[sqal]

Hi everyone. I am fighting to get sourcemaps working with gulp-postcss plugin but I've run out of ideas, and don't know how to fix it. My sass task looks like this:

gulp.task('sass:dev', function() {
    gulp.src('app/styles/**/*.scss)
        .pipe($.sourcemaps.init())
        .pipe($.sass(config.sass).on('error', $.sass.logError))
        .pipe($.postcss([
            autoprefixer({
                browsers: ['last 2 versions']
            })
        ]))
        .pipe($.sourcemaps.write('.'))
        .pipe(gulp.dest('.tmp/assets/styles'))
        .pipe(reload({ stream: true }));
});

Above config generates app.css.map file in destination directory as it should but sourcemaps does not works in browser. Here you can see that source map file (broken): https://gist.github.com/sqal/f894149870da902707f8 However If i remove postcss from my task, everything works as it should: https://gist.github.com/sqal/d3328b6c283ddbfee88f
Is there some bug in postcss or am I missing something here? Any hints on why it is not working for me would be greatly appreciated :) Thanks.

// Forgot to mention. I am using gulp-postcss 5.1.6, gulp-sourcemaps 1.5.2 and autoprefixer-core 5.1.11

[w0rm]

@sqal which version of gulp-sass do you use?

[sqal]

@w0rm 2.0.1. But is sass version relevant here? Sourcemaps only does not work with postcss in the task, as I mentioned before.

[w0rm]

@sqal it may be, if the relative file name doesn't match the one specified in the sourcemap that is coming from the sass, then sourcemaps won't be combined.

[sqal]

Hmm OK. But i also tested it with only one scss file, outcome was the same - postcss breaks sorucemaps :(

[w0rm]

Probably this is connected with dlmanning/gulp-sass#106

[w0rm]

@sqal can you create a minimal project that reproduces this issue?

[ai]

Maybe this issuw is relevant to postcss/autoprefixer#453

[w0rm]

@ai my idea is to check that file.relative and file.sourceMap.file are the same after gulp-sass, otherwise source maps won't be properly combined by vinyl-sourcemaps-apply.

Perhaps a glob pattern app/styles/**/*.scss sets a different file.base, but gulp-sass doesn't take this into account when generating source map.

[sqal]

@w0rm here you go: https://github.com/sqal/gulp-postcss-issue-40

[w0rm]

Awesome, thanks, I'll look into it tonight

On 26 May 2015, at 09:39, sqal notifications@github.com wrote:

@w0rm here you go: https://github.com/sqal/gulp-postcss-issue-40

—
Reply to this email directly or view it on GitHub.

[w0rm]

@sqal works perfectly fine for me https://yadi.sk/i/GsfUZ1OJgtKDt

[sqal]

@w0rm That's weird. This is what it looks like to me:

Why I don't have path to .scss file but .css? however i can still edit .scss file in sources panel (chrome), doesn't work in Firefox at all. I think this is not working properly, right?

[w0rm]

@sqal maybe it is a limitation of Firefox or has something to do with how browserSync does its live updates. The source map is generated properly.

[w0rm]

Closing this, because live updates and browser edit features are not related to gulp-postcss, and the correct sourcemap file is generated.

[sqal]

Hmm.. but this is what it looks like in FF when gulp-postcss is on http://prntscr.com/79perd (can't edit scss), and this is when it's off (can edit) http://prntscr.com/79pgcq am i wrong or not? because to me looks like something doesn't work correctly after all.

[w0rm]

@sqal cannot see your screenshots.

[sqal]

@w0rm Sorry for that..

with gulp-postcss - https://www.dropbox.com/s/0tkv2ow9clfr6zm/LRR32yD.png
without - https://www.dropbox.com/s/drpadlxvxsdl4xm/Zs4Yfy0.png

[w0rm]

@sqal since its working in Chrome, might be a Firefox issue.

I downloaded recent Firefox, tried to reproduce, but couldn't. Screencast: https://yadi.sk/i/5D9I3FxtgtQWs

[sqal]

@w0rm I have the latest version of Firefox. Maybe this is Windows related issue? Perhaps someone with Windows 7 can confirm this issue?

[w0rm]

@sqal sorry I can't help you with this.

If you want to verify source maps, remove browserSync, generate style.css and style.css.map, link to the css from a static html file, then open html file in the browser.

If you don't see scss there, then you have style.css and style.css.map that are not working in your version of Firefox.

[sqal]

@w0rm browser-sync has nothing to do with that, gulp-postcss seems to be still the problem, but all right, I give up on this.Thank you for your time anyway :)

[w0rm]

If you have just three files, test.html style.css and style.css.map, then this might be reduced test case for the Firefox.

[w0rm]

@sqal I might give it a try tomorrow. Will try to download windows7 from modern.ie.

[w0rm]

@sqal I can see app.scss in the recent Firefox for Windows 7.