Incorrect position on minified css with sourcemaps #882

Open
roose opened this Issue Sep 9, 2016 · 6 comments

Projects

None yet

4 participants

@roose
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 = [
    precss(),
    autoprefixer({browsers: ['last 2 versions']}),
    csswring
  ];
  return gulp.src('src/css/main.css')
    .pipe($.sourcemaps.init())
    .pipe($.postcss(processors))
    .pipe($.sourcemaps.write('.'))
    .pipe(gulp.dest('dist/css'))
});

main:css:

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

base.css:

a {
  color: $blue;
}

header.css:

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

Could you create some test project?

@ai ai added the bug label Sep 26, 2016
@bcole808

+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: [
            require('autoprefixer')({
                browsers: ['last 4 versions']
            }),
            require('cssnano')()
        ]
    },
    dist: {
        src: ['assets/*.css']
    }
},
@ai
Member
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
Contributor
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
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:
https://github.com/bcole808/postcss-examples/tree/issue-882/sourcemap-line-number-bug

And here is a quick video illustrating the problem:
http://www.bencole.net/s/2017-01-03_13-11-25.mp4

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