Dealing with previous sourcemaps

Just a quick question about a problem I encountered. Here is a structure:

_ assets
    |_ dist
        |_ main.css
        |_ main.css.map
    |_ sources
        |_ scss
            |_ main.scss
            |_ _partials.scss

When node-sass parses main.scss, it creates main.css and main.css.map. In sourcemaps file, sources are relative, like for example: ../sources/scss/main.scss, but there is not sourceRoot. When postcss tries to use previous sourcemaps, it rewrites ../sources/scss/main.scss to ../sources/sources/scss/main.scss and it fails.

In map.generator.js:115, this.map.applySourceMap(map, from, this.relative(root)):

• from is equal to ../sources/scss/main.scss
• this.relative(root) is equal to ../sources/scss while it should be equal to ../scss to make it work.

Any idea where the problem is?

[mturnwall]

I think I found a solution using the prev key. When I first used prev I would get an error telling me that that it was an unsupported format.

    processor.process(css.css, {
            from: `./src/sass/${sassFilename}.scss`,
            to: `${cssDir}/master.css`,
            map: {
                prev: css.map,
                inline: false,
            },
        })

css.map is a properly formatted sourcemap from node-sass. The Postcss documentation says that prev accepts an object.

If I convert the map to a string then prev works just fine.

    processor.process(css.css, {
            from: `./src/sass/${sassFilename}.scss`,
            to: `${cssDir}/master.css`,
            map: {
                prev: css.map.toString(),
                inline: false,
            },
        })

[mturnwall]

I’m having the same issue. I have a single scss file that imports other scss files. The sourcemap from node-sass properly lists all the scss files in the sources array of the sourcemap. Once the css is run through Postcss the sources array now only points to the single scss file that imports everything.

This is my main scss file.

@import 'easing';

@import '../../node_modules/susy/sass/susy',
        '../../node_modules/css-wipe/index'; // css reset

@import 'config';

@import 'typography',
        'buttons',
        'forms';

@import 'global';

Here are my scripts for node-sass and postcss

function compileSass() {
    return sass.renderSync({
        file: `./src/sass/${sassFilename}.scss`,
        outFile: `${cssDir}/master.css`,
        outputStyle: 'expanded',
        sourceMap: true,
    });
}

function processCss(css) {
    const processor = postcss([autoprefixer]);
    processor.process(css.css, {
            from: `./src/sass/${sassFilename}.scss`,
            to: `${cssDir}/master.css`,
            map: {
                inline: false,
            },
        })
// mode code here to write files to disk

Here is what Postcss outputs for the sourcemap

{"version":3,"sources":["../../src/sass/master.scss"]...

How do I get Postcss to still reference all the correct scss files that are imported by the main scss file?