gulp-autoprefixer: source maps are incorrect when compiling from SCSS

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":[]}

About this issue

  • Original URL
  • State: closed
  • Created 9 years ago
  • Reactions: 5
  • Comments: 19 (2 by maintainers)

Commits related to this issue

Most upvoted comments

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.

+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.

+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"}