From beb825b2ef0f24f42edeae214d4dfdb66f50c395 Mon Sep 17 00:00:00 2001 From: Jeff Astor Date: Mon, 13 Dec 2021 20:40:37 -0800 Subject: [PATCH] Fix broken sourcemap comment generation for `.css` files At the moment `.css` files generated when the `sourcemap` flag is `true` have a sourcemap comment at the bottom of the file that makes the file invalid: `//# sourceMappingURL=index.css.map` As indicated in the MDN [docs](https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map) and the [specification](https://sourcemaps.info/spec.html#h.lmz475t4mvbx) for source map, the comment pointing to the source map for CSS files needs to use the `/*# sourceMappingURL=/path/to/sourcemap.map */` syntax. This PR should create a valid sourcemap comment for both `.css` and `.js` files. Feel free to adjust the code to fit whatever style makes the most sense for your library. --- src/plugin.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/plugin.ts b/src/plugin.ts index d4054344..4b938e64 100644 --- a/src/plugin.ts +++ b/src/plugin.ts @@ -160,7 +160,7 @@ export class PluginContainer { await outputFile( info.path, info.type === 'chunk' - ? info.code + getSourcemapComment(!!info.map, info.path) + ? info.code + getSourcemapComment(!!info.map, info.path, isCSS(file.path)) : info.contents, { mode: info.type === 'chunk' ? info.mode : undefined } ) @@ -183,6 +183,9 @@ export class PluginContainer { } } -const getSourcemapComment = (hasMap: boolean, filepath: string) => { - return hasMap ? `//# sourceMappingURL=${path.basename(filepath)}.map` : '' +const getSourcemapComment = (hasMap: boolean, filepath: string, isCssFile: boolean) => { + if (!hasMap) return '' + const prefix = isCssFile ? '/*' : '//' + const suffix = isCssFile ? ' */' : '' + return `${prefix}# sourceMappingURL=${path.basename(filepath)}${suffix}` }