CSS sourcemaps cannot refer to the original .svelte files

[rproserpio]

I'm not sure if this is a bug or is intended. Since version 7 it seems to no longer be possible to create css sourcemaps that refer to the original Svelte files.
The sourcemap refers instead to the virtual .css files emitted by the plugin, but the map of the transformation processed by the Svelte compiler seems to be lost.
Maybe I'm missing something: I've tried on the official svelte template, adding rollup-plugin-postcss to handle the css sourcemap.

...
                svelte({
                        emitCss: true
                }),
                // we'll extract any component CSS out into
                // a separate file - better for performance
                //css({ output: 'bundle.css' }),
                postcss({
                        extract: true,
                        sourceMap: true
                }),
...

Changing the svelte plugin back to version 6 everything works as expected.
Is there any way to recover the old behaviour? If that is not possible, is there a way for a downstream plugin to access the .svelte -> .css sourcemap?

[Conduitry]

I haven't looked into this, but see also #163.

[rproserpio]

Thank you @Conduitry. I will look into using this.getCombinedSourcemap() as a temporary fix.
The only difference I can see in the output of the load hook between the two versions is that v6 appends the inline sourcemap in the code property:

p.svelte-1a7i8ec{color:red}
/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQXBwLnN2ZWx0ZSIsInNvdXJjZXMiOlsiQXBwLnN2ZWx0ZSJdLCJzb3VyY2VzQ29udGVudCI6WyI8cD5IaTwvcD5cblxuPHN0eWxlPlxuXHRwIHtcblx0XHRjb2xvcjogcmVkO1xuXHR9XG48L3N0eWxlPiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHQyxDQUFDLGVBQUMsQ0FBQyxBQUNGLEtBQUssQ0FBRSxHQUFHLEFBQ1gsQ0FBQyJ9 */

while v7 doesn't:

p.svelte-1a7i8ec{color:red}

Both have the full sourcemap in the map property.
I can't understand why Rollup would need that sourceMappingURL, though.

Anyway, adding that back works, but I don't understand why should be needed:

compiled.js.code += `\nimport ${JSON.stringify(fname)};\n`;
+ compiled.css.code += `\n/*# sourceMappingURL=${compiled.css.map.toUrl()} */`;
cache_emit.set(fname, compiled.css);

[rproserpio]

The problem seems to be related to how rollup-plugin-postcss works. It collects the extracted css modules (code and sourcemap) in an extracted Map during the transform phase and it bundles them together in the generateBundle hook. Rollup cannot know about the previous sourcemap chain that is thus lost.
Putting the sourcemap inline in the file allowes the bundling process to recover this information. This was the previous behavior of rollup-svelte-plugin.
I'm closing the issue since this could be considered to be a problem with rollup-plugin-postcss.

Edit:
I've forgot to add that, as suggested in #163, you can also recover the (collapsed) sourcemap chain information with getCombinedSourcemap() in the transform hook before collecting it in the extracted Map.

[benmccann]

Thanks for the explanation! Can you link to the rollup-plugin-postcss issue for other users that might stumble across this?

[rproserpio]

Thanks for the explanation! Can you link to the rollup-plugin-postcss issue for other users that might stumble across this?

Hi Ben, sure i'll create an issue there shortly.