[fix] use consistent relative source filename for js sourcemaps (#6598)

src/compiler/compile/Component.ts

@@ -343,19 +343,21 @@ export default class Component {
 				? { code: null, map: null }
 				: result.css;
 
+			const sourcemap_source_filename = get_sourcemap_source_filename(compile_options);
+
 			js = print(program, {
-				sourceMapSource: compile_options.filename
+				sourceMapSource: sourcemap_source_filename
 			});
 
 			js.map.sources = [
-				compile_options.filename ? get_relative_path(compile_options.outputFilename || '', compile_options.filename) : null
+				sourcemap_source_filename
 			];
 
 			js.map.sourcesContent = [
 				this.source
 			];
 
-			js.map = apply_preprocessor_sourcemap(this.file, js.map, compile_options.sourcemap as (string | RawSourceMap | DecodedSourceMap));
+			js.map = apply_preprocessor_sourcemap(sourcemap_source_filename, js.map, compile_options.sourcemap as (string | RawSourceMap | DecodedSourceMap));
 		}
 
 		return {
@@ -1551,3 +1553,15 @@ function get_relative_path(from: string, to: string) {
 
 	return from_parts.concat(to_parts).join('/');
 }
+
+function get_basename(filename: string) {
+	return filename.split(/[/\\]/).pop();
+}
+
+function get_sourcemap_source_filename(compile_options: CompileOptions) {
+	if (!compile_options.filename) return null;
+
+	return compile_options.outputFilename
+		? get_relative_path(compile_options.outputFilename, compile_options.filename)
+		: get_basename(compile_options.filename);
+}

test/sourcemaps/samples/sourcemap-basename-without-outputname/_config.js

@@ -0,0 +1,33 @@
+
+import {magic_string_bundle} from '../../helpers';
+
+export const component_filepath = 'src/some/deep/path/input.svelte';
+export const component_file_basename = 'input.svelte';
+export const css_file_basename = 'input.css';
+
+const input_css = ' h1 {color: blue;}';
+
+export default {
+	preprocess: [
+		{
+			style: ({ content, filename }) => {
+				const style_to_add = `/* Filename from preprocess: ${filename} */` + input_css;
+				return  magic_string_bundle([
+					{ code: content, filename: component_file_basename },
+					{ code: style_to_add, filename: css_file_basename }
+				],component_filepath);
+			}
+		}
+	],
+	js_map_sources: [component_file_basename],
+	css_map_sources: [css_file_basename,component_file_basename],
+	options: {
+		filename: component_filepath
+	},
+	compile_options: {
+		filename: component_filepath,
+		// ../../index.ts initializes output filenames, reset to undefined for this test
+		outputFilename: undefined,
+		cssOutputFilename: undefined
+	}
+};

test/sourcemaps/samples/sourcemap-basename-without-outputname/input.svelte

@@ -0,0 +1,2 @@
+<h1>sourcemap-basename-without-outputname</h1>
+<style src="input.css">h1 {color: red;}</style>

test/sourcemaps/samples/sourcemap-basename-without-outputname/test.js

@@ -0,0 +1,3 @@
+// no additional test needed, _config.js values and the js.map.sources assertion in ../../index.ts cover it
+export function test() {}
+