Closed CxRes closed 3 years ago
Hi @CxRes,
Should not be too hard to do, although I would like to know the use case for this one first.
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!
:tada: This issue has been resolved in version 3.13.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
@CxRes done, see transform
from sourcemap options
Usage example:
styles({
sourceMap: [true, { transform: m => (m.sources = ["virt"]) }]
})
@Anidetrix Thanks!!!!!!!!!!
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...
@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.
Released as a part of 3.14.0, hope it works for you
Do css sourcemaps even work with inject
mode? I cannot see css sources in the map file when I use inject
mode...
Sourcemap is always inlined as a comment in inject
and emit
modes, it's not in a separate file
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...
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.
Thats very strange, it seems like a bug (or maybe Rollup just filters all non-js files). Lets try asking Rollup people for help...
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.
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...
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};
Thank you for your efforts, will look into it.
Please provide an option to configure sourcemap path transformations like
output.sourcemapPathTransform
option that Rollup provides. Alternatively reuse theoutput.sourcemapPathTransform
property if sourcemaps are enabled for css.