Incorrect position on minified css with sourcemaps #882

roose opened this Issue Sep 9, 2016 · 6 comments


None yet

4 participants

roose commented Sep 9, 2016 edited

In Firefox devtools on inspect body I see base.css:3 not header.css:3.
If styles not minified all ok, in Chrome devtools all ok in both case.
If I add custom selector e.g. .nothing {color:#000} in the top of header.css Firefox shown: header.css:1, but really selector on position 2.

Windows 10
nodejs v6.2.2
gulp v3.9.1

Gulp task:

gulp.task('css', () => {
  const processors = [
    autoprefixer({browsers: ['last 2 versions']}),
  return gulp.src('src/css/main.css')


$blue: #056ef0;
@import "base.css";
@import "parts/header.css";


a {
  color: $blue;


body {
  background: $blue;
ai commented Sep 9, 2016

Could you create some test project?

@ai ai added the bug label Sep 26, 2016

+1, I am having a similar problem.

I use grunt-sass to first compile our SCSS into CSS files, then I use grunt-postcss to do autoprefixer and cssnano and I have noticed that:

  • Sourcemaps output from just grunt-sass have correct line numbers
  • Sourcemaps output from grunt-postcss often have incorrect line numbers, like 1

This is basically my configuration in grunt:

sass: {
    options: {
        sourceMap: true,
        outputStyle: 'compact',
        includePaths: ['assets/styles']
    dist: {
        files: {
            'assets/main.min.css' : 'assets/styles/main.scss',

 postcss: {
    options: {
        map: true,
        processors: [
                browsers: ['last 4 versions']
    dist: {
        src: ['assets/*.css']
ai commented Dec 31, 2016

Sorry, I will take a look on it only in the end of January. Feel free to look into PostCSS code if you need fix faster.

jonathantneal commented Jan 3, 2017 edited

@roose, thanks for sharing an isolated example of your issue. I was able to replicate this in Firefox. Very curious.

I narrowed it down to the precss plugin you are using. When I swap that out for postcss-import, the source maps are correct in Firefox. I even confirmed this by spotting a difference in the mappings field of the sourcemap file. Good news; your issue is unrelated to PostCSS, itself.

@bcole808, if you are able to produce a similar example, I will gladly look into it. Are you using any PostCSS plugins besides autoprefixer and cssnano?

bcole808 commented Jan 3, 2017 edited

Thanks for helping look into this, @jonathantneal!

I created an isolated example of the problem for you to see here:

And here is a quick video illustrating the problem:

You can see in the video that I inspect the color of the link to see where the color:red property is being set. When I run just grunt sass, the sourcemap points to line 5 of box.scss (correct line), but when I run grunt postcss suddenly it points to line 1 of box.scss (wrong line).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment