source maps are incorrect when compiling from SCSS

[alvint]

Sorry--this is actually the same as issue 54 but I'm not sure how to reopen it. As mentioned there, the problem does not lie with the other plugins in the compile chain. The issue is with this plugin because it relies on gulp-postcss, which is the ultimate culprit. The issue is easily reproduced with gulp-autoprefixer and any number of other plugins.

I have this Gulp code which compiles three SCSS files (first.scss, last.scss, and app.scss). All plugins are gulp-sourcemaps compatible:

return gulp.src(cssFiles)
    .pipe(plugins.if(addSourceMaps, plugins.sourcemaps.init({loadMaps: true})))
    .pipe(plugins.sass())
    .pipe(plugins.autoprefixer())

    // I have verified this code is not the issue--if commented out the problem remains.
    .pipe(plugins.if(!!config.cssFile,plugins.order(
      [
        config.sourceFolder + '**/first.css',
        '!' + config.sourceFolder + '**/*',
        '!' + config.sourceFolder + '**/last.css'
      ],
      {base: '.'}
    )))

    .pipe(plugins.if(!!config.cssFile, plugins.concat(config.cssFile)))
    .pipe(plugins.if(addSourceMaps, plugins.sourcemaps.write('.', {sourceRoot: '../src'})))
    ...

When autoprefixer is commented out, the source maps are produced properly:

{"version":3,"sources":["sass/first.scss","sass/app.scss","sass/last.scss"],"names":[],"mappings":"AAAA;ACAA;ACAA","file":"all.css","sourcesContent":["// All CSS files are combined into one big file called \"all.css\". This file is\n// guaranteed to be the first file added (the contents of this file will be at\n// the beginning of \"all.css\").\n\n","// app.scss\n\n","// All CSS files are combined into one big file called \"all.css\". This file is\n// guaranteed to be the last file added (the contents of this file will be at\n// the end of \"all.css\").\n\n"],"sourceRoot":"../src"}

When autoprefixer is enabled, the source maps are incorrect and point to nonexistent CSS files:

{"version":3,"sources":["sass/app.css","sass/first.css","sass/last.css"],"names":[],"mappings":"AAAA;ACAA;ACAA","file":"all.css","sourceRoot":"../src","sourcesContent":[]}

[Saturate]

I have the exact same problem with LESS files right now, if I remove gulp-autoprefixer everything works fine.

[Saturate]

Did the same thing as @mareksupruniuk, and it works. But it's still an issue on this package, I'll try to fix it.

[timkraut]

I have the same issue, too... Source maps are only properly generated without autoprefixer

[Maximaximum]

+1.

[callamwilliams]

+1

[sanmaopep]

+1

[dungdm93]

From autoprefixer #731

I use autoprefixer with gulp, but generated sourcemaps seem to have only files name in sources attribute.

src
|- app
|   \- components.css
\- main.css

// gulpfile.js
var $ = require("gulp-load-plugins")({ lazy: true });

gulp.task("compile:styles", function () {
    return gulp
        .src("./src/**/*.css")
        .pipe($.sourcemaps.init())
        .pipe($.autoprefixer())
        .pipe($.concat("styles/all.css"))
        .pipe($.sourcemaps.write(".", {includeContent: false, sourceRoot: '../src'}))
        .pipe(gulp.dest("./dist"));
});

Actual result:

// dist/styles/all.css.map

{"version":3,"sources":["styles.css","components.css"],"names":[],"file":"styles/all.css","sourceRoot":"../src","mappings":"..."}
// missing path ------------------------^

Expected result (when I disable autoprefixer):

{"version":3,"sources":["styles.css","app/components.css"],"names":[],"file":"styles/all.css","sourceRoot":"../src","mappings":"..."}

[GHowlett]

+1

[sorenjuul]

+1

[freemagee]

+1

I have experimented with a reduced test case as I was facing this issue. I am getting scss files that are nested in a sub-directory not generating correct sourcemaps. Specifically the problem seems to lie with the 'sources' array. I created a quick repo to show the output and dir structure: https://github.com/freemagee/nested-sass-sourcemaps/

With the prefix function running, the output sourcemap will be:

{"version":3,"sources":["nested.css"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,mBAAmB;EACnB,YAAY,EAAE;;AAEhB;EACE,YAAY,EAAE","file":"nested.css","sourceRoot":"../../src/scss"}

If the prefix function is commented out of my gulp task the output will be:

{"version":3,"sources":["nested/nested.scss","nested/_sameLevel.scss"],"mappings":"ACAA,AAAA,EAAE,CAAC;EACC,UAAU,EAAE,KAAM;EAClB,UAAU,EAAE,MAAO;EACnB,KAAK,EAAE,IAAK,GACf;;AAED,AAAA,CAAC,CAAC;EACE,KAAK,EAAE,IAAK,GACf","file":"nested.css","names":[],"sourceRoot":"../../src/scss"}

[jimmybrawn]

+1

[808loud]

+1

I'm thinking @freemagee might be on to something. I pulled my Sass files out of their sub-directory, and that fixed my issue.

[freemagee]

A solution I am happy with at the moment is to use CSSNext along with PostCSS to prefix.

So I use sass to process my sourcefiles into a css file within Gulp. I then pipe that into postcss using the postcss-cssnext plugin. CSSNext has autoprefixer as part of it.

I am not an expert on this yet as I only tried it this week. But I have seen my nested scss files get a proper sourcemap now, which is what I needed. It was quite a simple change and has helped me. My Gulpfile might provide insight to some, see the 'postCSS' task:

https://github.com/freemagee/nested-sass-sourcemaps/blob/master/gulpfile.js

[linkurzweg]

@freemagee, thanks for posting your solution.
I think this has the same effect as just using autoprefixer as a postCSS plugin directly.
For me it produces the same result. Sourcemaps are still off by a few lines unfortunately.
There is also a known issue with postCSS: postcss/postcss#926

[Fil923]

I've tried a different workaround (a task for sass and one for prefix the output css) but it didn't work for me. I've noticed that there is a new version of autoprefixer, there is a solution for this problem now?

[johanblumenberg]

I believe this pull request fixes this bug: #92

[franktopel]

If an issue as essential as this one hasn't been fixed in more than 2 years, imo usage of this should be discouraged and the plugin marked as deprecated.

[alvint]

@franktopel Agreed. The "It's a downstream problem" excuse is not much consolation when people depend on something to work. That's why most people have gone back to Grunt. Very embarrassing after I recommended Gulp at work. Never again.

[johanblumenberg]

@franktopel @alvint Agreed. I fixed the bug and pushed a PR, but it's not accepted.

From https://www.npmjs.com/package/gulp-sourcemaps

Important: Make sure the paths in the generated source map (file and sources) are relative to file.base (e.g. use file.relative).

As pointed out earlier in this thread, the files in the sources array are file names only, with no path information.

So it's a problem that gulp-sourcemaps is discarding path information in source files. It's fixed by #92.