Gulp SASS Sourcemap sources are incorrect

Question

I am struggling to get my SASS sourcemaps to work correctly. The problem seems to be the "sources" attribute within the sourcemap and how my SASS files are nested.

I have a Gulp task that compiles SASS to CSS. Here is an example of that

var paths = {
    styles: {
        src: './Stylesheets/SCSS/',
        files: './Stylesheets/SCSS/**/*.scss',
        dest: './Stylesheets/CSS/'
    }
}

gulp.task('compile-sass', function (){
    return gulp.src(paths.styles.files)
        .pipe(sourcemaps.init())
        .pipe(sass({
            outputStyle: 'compressed',
            includePaths : [paths.styles.src]
        }))
        .pipe(prefix({
            browsers: ['last 2 Chrome versions'],
            cascade: false
        }))
        .pipe(sourcemaps.write('../Maps/', {
            includeContent: false,
            sourceRoot: '../SCSS'
        }))
        .pipe(gulp.dest(paths.styles.dest));
});

The above works for everything else - writing maps to disk, prefixing etc. I am using latest nodejs, gulpjs and relevant npm packages.

An example of folder/asset structure from within my Stylesheets folder:

SCSS/print.scss  
SCSS/sectionA/style.scss  
SCSS/sectionA/partial/_partialA.scss  
SCSS/sectionA/partial/_partialB.scss  
SCSS/sectionB/... etc

For SASS files in the root of SCSS/ the sourcemaps work properly. Chrome will show where the source styles are.

For SASS files in a subfolder within SCSS/ the sourcemaps do not work. The problem is the "sources": attribute has the wrong file listed in it.

The print.scss map for example will correctly have "sources":["print.scss"]. But sectionA/style.scss map will have "sources":["style.css"] instead of "sources":["partial/_partialA.scss", "partial/_partialB.scss"] as I would expect.

I have confirmed moving /SCSS/sectionA/style.scss to /SCSS/style.scss and amending any import paths does solve the issue. But I need it to be nested, not in the root of /SCSS.

If I can provide more detail please let me know. I have tried the answer from Path to source map is wrong and it does not solve my issue. I have also tried manipulating mapSources with no avail.

Vivien

I've seen some strange behavior reported with sourcemaps.write('../Maps/" try removing that last slash "../Maps" just to see if any difference. Also I would do the same for paths.styles.src and paths.styles.dest. These changes shouldn't matter but I believe I have seen some gulp fixes by removing those. – Zacynthus

Thank you for the response Mark. I have removed the trailing slash. It did not affect my particular issue though. I have tried a non gulp solution to process the SCSS as a test [PrePos] and it handles the maps for nested partials absolutely fine. So I believe the problem lies in my Gulp task. I just can't seem to nail down where at the moment! – Vivien

I have another suggestion. Read through npmjs.com/package/gulp-relative-sourcemaps-source sometimes gulp has trouble properly setting the "sources" value. – Zacynthus

I have just done a reduced test case. Tried to get to the basics of the problem. Created a project with a scss folder. Inside is a root.scss and a nested.scss which exists in a /nested folder. Both import their own seperate partials. After various attempts to remove any options I was passing into the various gulp modules, I can currently pin the effect on gulp-autoprefixer. If I prefix, the nested sourcemap has incorrect sources array. If I do not prefix, the nested sourcemap has correct source array. I am now trying to work out what to do about that! I may raise an issue on Github. – Vivien

This is the map without prefix: {"version":3,"file":"nested.css","sources":["nested/nested.scss","nested/_sameLevel.scss"],"mappings":"ACAA,AAAA,EAAE,CAAC;EACC,UAAU,EAAE,KAAM;EAClB,UAAU,EAAE,MAAO;EACnB,KAAK,EAAE,IAAK,GACf;;AAED,AAAA,CAAC,CAAC;EACE,KAAK,EAAE,IAAK,GACf","names":[],"sourceRoot":"../../src/scss"} – Vivien

This is the map with prefix: {"version":3,"sources":["nested.css"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,mBAAmB;EACnB,YAAY,EAAE;;AAEhB;EACE,YAAY,EAAE","file":"nested.css","sourceRoot":"../../src/scss"} – Vivien

There is an inelegant hack here github.com/ByScripts/gulp-sample/blob/master/gulpfile.js that may help. – Zacynthus

Answer 1

@ Update 2019-05-24

My answer talks about using CSSNext. CSSNext was deprecated. The theory in my answer is still applicable using postcss-preset-env.

@ Update 2017-03-08

After experimenting with PostCSS, I have used CSSNext to process the CSS after SASS has converted it. CSSNext auto-prefixes and doing it this way retains the connection to the original scss files in the sourcemap.

See my GitHub repo for an example.

---

After following Mark's feedback and investigating the gulp-autoprefixer module I believe this issue raised on the GitHub repo for gulp-autoprefixer is related to the incorrect sourceroot problem.

Using a variation of the hack from ByScripts I am able to get sourcemaps with the correct sourceroot for nested scss files. The hack used in the ByScripts gulpfile inits the sourcemaps function twice. Once before prefixing, and once after.

I have created a GitHub repo to try and illustrate a reduced test case and a workaround. Inspecting the css produced by the workaround shows the correct relationship back to the source scss.

Vivien