Autoprefixer is causing problems with sourcemaps when imports are wrapped in a class

Basically if you have autoprefixer and imports that are wrapped by a class :

.random-class {
    display: flex;
    @import "box";
    @import "inbox";
}

Instead of getting :

I am getting this :

[phated]

@stephenbe you still need the other code, just remove the sourcemap part like:

var gulp = require("gulp");

gulp.task("css", function() {
  var sass = require("gulp-sass");
  var postcss = require("gulp-postcss");
  var sourcemaps = require("gulp-sourcemaps");
  var autoprefixer = require("autoprefixer");
  var filter = require("gulp-filter");

  return gulp
    .src("./test.scss", { sourcemaps: true })
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("./", { sourcemaps: '.' }))
    .pipe(filter("./*.css"))
    .pipe(postcss([autoprefixer({ browsers: ["last 1 major versions, last 3 Chrome versions, ie 11"] })]))
    .pipe(gulp.dest("./"));
});

[phated]

@stephenbe Awesome!!! Thanks for posting your solution. In the above example, you can totally just use the built-in sourcemap support in gulp4 and it should work wonderfully. Check out the docs: https://gulpjs.com/docs/en/api/src#sourcemaps