Feature Request: Sourcemap Path Transformations

[CxRes]

Please provide an option to configure sourcemap path transformations like output.sourcemapPathTransform option that Rollup provides. Alternatively reuse the output.sourcemapPathTransform property if sourcemaps are enabled for css.

[Anidetrix]

Hi @CxRes,

Should not be too hard to do, although I would like to know the use case for this one first.

[CxRes]

My use case involves repos that have source code in a src/ directory and the Rollup bundles are placed in a dist/ or lib/ directory. Now, I remap the source paths as if the code existed in the lib/dist folder, so that all ../src/path/to/file are path/to/file. However, this does not carry over to the css file maps meaning that the devTools > sources show a src folder with just css files. Right now, I am cheating by doing a find and replace on the map file, which has the potential of going wrong though. Therefore, it would be nice if css sourcemap path transforms was a also part of the Rollup build process and my request here!

[github-actions]

🎉 This issue has been resolved in version 3.13.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[Anidetrix]

@CxRes done, see transform from sourcemap options

Usage example:

styles({
  sourceMap: [true, { transform: m => (m.sources = ["virt"]) }]
})

[CxRes]

@Anidetrix Thanks!!!!!!!!!!

[CxRes]

I just tried to implement the feature in my code and I realized you would need to expose sourcemapPath, like sourcemapPathTransform function in Rollup does...

[Anidetrix]

@CxRes be aware that this will only work for extract mode since resulting file name is not available inside transform hook, which is when inject and emit modes are finished.

[Anidetrix]

Released as a part of 3.14.0, hope it works for you

[CxRes]

Do css sourcemaps even work with inject mode? I cannot see css sources in the map file when I use inject mode...

[Anidetrix]

Sourcemap is always inlined as a comment in inject and emit modes, it's not in a separate file

[CxRes]

My bad, I missed the sourcemap comment. I was looking in the js sourcemap file!

Though it seems a little strange. Is it not possible or for some reason undesirable that sourcemap is not written to the sourcemap file? I thought the magic-string library allowed one to do that in transform hook...

[Anidetrix]

Seems to not be possible at the moment, since it's already passed down the build pipeline, Rollup just doesn't seem to want to use it itself.

[CxRes]

Thats very strange, it seems like a bug (or maybe Rollup just filters all non-js files). Lets try asking Rollup people for help...

[CxRes]

After a lot of looking around I suspect that the issue is with the generated css map here. I have been able to get Rollup to accept sourcemap for a non-js file (html imported as string) in a plugin that I fixed in the last couple of days. Have a look at rollup-plugin-html-string.

[CxRes]

I went code-spelunking today and have been able to figure out why the maps are not being passed.

The transformed code in the transformed hook inserts the css injector function using an import statement. This confuses rollup which now resolves only the injector function file and puts its map into combined sourcemap and ignores the map that was passed in the transform hook.

If you remove the injector function (of course this breaks the functionality), the sourcemap is passed correctly. So, it seems there must a canonical way of importing code during a transform, but I just cannot figure out what that way is. The documentation on plugins is so terse that it might as well be written in Latin! I'll try to figure something out...

[CxRes]

Also the order in which the injector is introduced is wrong. If you look at res.code returned as code in the transform function. It first exports var css and then imports the injector function and then exports the default css. The import must always precede the export. It should be like:

import injector from '...'
var css = '...' 
injector(css);
export default css; export {css};

[Anidetrix]

Thank you for your efforts, will look into it.