Autoprefixer: Nested Sass always shows line number for parent selector in sourcemaps when using autoprefixer

[linkurzweg]

See this issue here:
https://github.com/floridoo/gulp-sourcemaps/issues/161

When using autoprefixer, sourcemaps stop working correctly for nested selectors. They always show the line number of the parent selector. When I remove autoprefixer everything works fine.

The author of gulp-sourcemaps points out this is a problem with autoprefixer, not with the sourcemaps plugin. Could you please look into this?

[ai]

Autoprefixer is just a PostCSS plugin. All work for CSS transformation and source maps is in PostCSS :).

[ai]

I think this issue is related https://github.com/postcss/postcss/issues/926

[linkurzweg]

Ah, alright, I didn't know that. Thanks for the info, I'll subscribe to the postcss issue then :)

[cyphix333]

I don't think this has to do with postCSS at all as I'm not using postCSS in my build; eg;

gulp.task('styles', function() {
    return gulp.src('scss/**/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: [
                'last 4 Chrome versions',
                'last 4 Firefox versions',
                'last 4 Edge versions',
                'last 2 Safari versions',
                'ie >= 10',
                '> 1.49%',
                'not ie <= 9'
            ],
            cascade: false
        }))
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest('./css/'));
});

So it can't have to do with postCSS.

[ai]

@cyphix333 there is no way to use Autoprefixer without PostCSS. Autoprefixer is just a PostCSS plugins.

So you are PostCSS user even if you use gulp-autoprefixer, because it just use PostCSS inside https://github.com/sindresorhus/gulp-autoprefixer/blob/master/index.js#L6

Also please migrate from gulp-autoprefixer to gulp-postcss. I have issue reports about gulp-autoprefixer every few week, only gulp-postcss is a official way.

[cyphix333]

Oh ok thanks, That's good to know and also answers my question I had on SO last year :)

[SenHengDesamis]

cross posting from https://github.com/gulp-sourcemaps/gulp-sourcemaps/issues/161

I've been having this issue and the only way I've managed to fix it is to run both autoprefixer and cssNano together. I'd prefer to not minify when local dev because there's a legacy stylesheet with 20k lines in it... but this was the only thing that worked.

Maps work perfectly fine in Chrome, a little bit funky in FF (sometimes goes to closing bracket) and breaks in Safari (Goes to parent).

const gulp = require('gulp');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const gulpIf = require('gulp-if');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const nano = require('cssnano');

const processors = [
  autoprefixer({browsers: ['last 2 version']}),
  nano(),
];

gulp.task('sass', () =>
  gulp.src(config.main)
    .pipe(gulpIf(env === 'dev', sourcemaps.init()))
    .pipe(sass(config.settings))
    .on('error', handleErrors)
    .pipe(postcss(processors))
    .pipe(gulpIf(env === 'dev', sourcemaps.write()))
    .pipe(gulp.dest(config.dest))
);

versions

"autoprefixer": "^7.1.5",
"cssnano": "^4.0.0-rc.2",
"gulp": "3.9.1",
"gulp-postcss": "^7.0.0",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.6.1",

[cyphix333]

I just wish someone would fix this problem so we didn't have to rely on workarounds.

[ai]

Use PostCSS based preprocessors, they don't have compatible issue since they use same parser and AST 😏