Handle source maps for nested assets where sourceMappingURL contains the subdirectory

[DimitriosLisenko]

We're using esbuild to compile our assets, and we have two separate application.css files - "application.css" and "javascript/application.css".

We've configured esbuild to have publicPath of "/assets", and we're seeing that the sourceMappingURL is correct for "application.css" but incorrect for "javascript/application.css".

Here's what the results of my testing was:

# no publicPath set in esbuild config
app/assets/builds/application.css => /*# sourceMappingURL=application.css.map */
app/assets/builds/javascript/application.css => /*# sourceMappingURL=application.css.map */
public/assets/application-ee89888f.css => /*# sourceMappingURL=/assets/application-2242cc06.css.map */
public/assets/javascript/application-7ca550ac.css => /*# sourceMappingURL=/assets/javascript/application-366197c5.css.map */

# publicPath: "assets" in esbuild config
WARNING LOGS: Removed sourceMappingURL comment for missing asset 'javascript/assets/javascript/application.css.map' from javascript/application.css

app/assets/builds/application.css => /*# sourceMappingURL=application.css.map */
app/assets/builds/javascript/application.css => /*# sourceMappingURL=assets/javascript/application.css.map */
public/assets/application-ee89888f.css => /*# sourceMappingURL=/assets/application-2242cc06.css.map */
public/assets/javascript/application-da8cc934.css => EMPTY

# publicPath: "/assets" in esbuild config
WARNING LOGS: Removed sourceMappingURL comment for missing asset 'javascript/javascript/application.css.map' from javascript/application.css

app/assets/builds/application.css => /*# sourceMappingURL=application.css.map */
app/assets/builds/javascript/application.css => /*# sourceMappingURL=/assets/javascript/application.css.map */
public/assets/application-ee89888f.css => /*# sourceMappingURL=/assets/application-2242cc06.css.map */
public/assets/javascript/application-57c47cf6.css => EMPTY

Note how it's basically joining the directories twice when publicPath is supplied (resulting in "javascript/javascript/application.css.map" which is invalid.

Given how in the case of no publicPath the sourceMappingURL just contains the basename of the asset map, it seems to me it's safe to get the basename from sourceMappingURL and then search for that file in the directory where the asset is - this will work as long as the asset and its map are in the same directory. I am not sure whether this is always the case, but it seems reasonable. Would be good for someone with more knowledge on this topic to weigh in!

Here is what it looks like post the changes in this branch:

# publicPath: "/assets" + File.basename change
app/assets/builds/application.css => /*# sourceMappingURL=application.css.map */
app/assets/builds/javascript/application.css => /*# sourceMappingURL=/assets/javascript/application.css.map */
public/assets/application-ee89888f.css => /*# sourceMappingURL=/assets/application-2242cc06.css.map */
public/assets/javascript/application-42990d6a.css => /*# sourceMappingURL=/assets/javascript/application-f62ecdcd.css.map */

This is based on the work done in #170.

Alternatively, perhaps what could be done is to get the common parts of the asset location and asset map location, and then join the remainder of the asset map path to the common part.