gulp-clean-css: is not in the SourceMap error

@scniro: I’m experiencing this bug and I have created a minimal project to reproduce it:

https://github.com/arechsteiner/cleancss-bug

In my case, the bug is caused by importing a SCSS file from a third-party npm package like so:

@import "../node_modules/bootstrap/scss/mixins/_breakpoints.scss";
@import "../node_modules/bootstrap/scss/_variables.scss";

@joaocunha @arechsteiner hey guys thanks for supplying some more info on this one. I’ve been so unusually busy lately and haven’t been as attentive as I’d like looking into these things. Hopefully I’ll get a chance to do so very soon! I’ll keep you all posted if I find anything. Thanks for understanding

@joaocunha I’m taking the day off just to code for fun, so I grabbed your gulp task from your initial post, added in the mods that @scniro mentioned, then added {sourceRoot: null} to the first sourcemaps.write() call, and it seemed to work! (At least in my test project.)

// Compile SCSS
gulp.task('sass', () =>
  gulp.src('./src/main.scss')
    .pipe(plumber({
        errorHandler: notify.onError('Sucky SCSS! <%= error.message %>')
    }))
    .pipe(sourcemaps.init())
    .pipe(sass({
        includePaths: [normalizePaths, neatPaths, bourbonPaths] // Replace these with whatever you need, obviously
    }))
    .pipe(colorguard())
    .pipe(autoprefixer())
    .pipe(sourcemaps.write('./', {sourceRoot: null}))
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(gulp.dest('./dist/css'))
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(rename('./dist/css/main.min.css'))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(''))
    .pipe(browserSync.stream())
);

Okay guys I’ve dug into this a little bit this morning. A bit tricky to pin the blame here, but I think it can be traced back to gulp-sourcemaps. I found this issue which seems to complain of encountering the same problem, which led me down the path of exploring write-options - which has a sourceRoot option. Playing with this, I modified the gulp task as such…

gulp.task('default', function() {
    return gulp .src('scss/**/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(sourcemaps.write({includeContent: false, sourceRoot: './scss'}))
        .pipe(gulp.dest('dist/css/'))
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(cleanCss())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist/css/min/'));
});

After implementing this, the error goes away and all seems to work as expected. I forked the error reproduction project supplied by @arechsteiner with the modified task and added a small express server file to glue everything together in the browser, and I can see the styles with the mapping. Can someone check this out when they get time and share your thoughts on if this seems sensible? Thanks all!

@kilianc @arechsteiner @joaocunha @dcwarwick @gregbrown1229 whirlwind of stuff yesterday, try 2.1.3 please

@dcwarwick I don’t think the issue is isolated to (or perhaps even related to–I’m not sure) cleancss(), since I ran into this issue never having used it. In fact, I only installed it to test my solution for @joaocunha’s problem. I just happened upon this issue after googling for the error message I was encountering. It seems like it has to do with the combination of includePaths in the gulp-sass call and gulp-sourcemaps, but I only dug far enough to find a workaround, since I found that gulp-sourcemaps already has a solution in their upcoming release.

OK, this might help: it seems that it is any time a sass import has one or more ../ at the start of the path. Those ../ seem to be getting lost. Example:

If I put a file _foo.scss, and then make a subdirectory sub in which I put a file bar.scss, and in bar.scss I have

  @import '../foo';

and in my gulp build I pipe sub/bar.scss to sourcemaps(), then to sass(), then to cleancss(), it will give this error:

  Error: "/foo.scss" is not in the SourceMap.

Notice that the path here, /foo.scss, seem to have lost the ../ from the start.

I hope this helps.

@scniro my case follows @arechsteiner’s.

See the comments below:

// Compile SCSS
gulp.task("sass", () =>
  gulp.src("./src/scss/main.scss")
    .pipe(plumber({
      errorHandler: notify.onError("Sucky SCSS! <%= error.message %>")
    }))
    .pipe(sourcemaps.init())
    .pipe(sass({
      includePaths: require("node-normalize-scss").includePaths, // WORKS FINE WITH NORMALIZE
      includePaths: require("bourbon-neat").includePaths // BREAKS WITH NEAT
    }))
    .pipe(colorguard())
    .pipe(autoprefixer())
    .pipe(sourcemaps.write("./"))
    .pipe(gulp.dest("./dist/css"))
    .pipe(cleanCSS({compatibility: "ie8"}))
    .pipe(rename("./dist/css/main.min.css"))
    .pipe(sourcemaps.write("./"))
    .pipe(gulp.dest(""))
    .pipe(browserSync.stream())
);

Error:

/Users/.../node_modules/source-map/lib/source-map-consumer.js:704
      throw new Error('"' + aSource + '" is not in the SourceMap.');
      ^

Error: "/node_modules/bourbon-neat/app/assets/stylesheets/grid/_box-sizing.scss" is not in the SourceMap.
  at SourceMapConsumer_sourceContentFor [as sourceContentFor] (/Users/.../node_modules/source-map/lib/source-map-consumer.js:704:13)