fix(css): link sourcemap with source correctly (#140)

* fix(css): link `sourcemap` with source correctly

* chore: fix comment typo

Author: lukeed

index.js

@@ -90,21 +90,23 @@ class CssWriter {
 
 		this.sourcemap = (file, mapping) => {
 			const ref = this.emit(file, this.code);
-			const filename = context.getFileName(ref);
+			const filename = context.getFileName(ref); // may be "assets/[name][ext]"
 
-			const mapfile = `${filename}.map`;
+			const mapfile = `${filename}.map`; // may be "assets/[name][ext]"
 			const toRelative = src => path.relative(path.dirname(file), src);
 
 			if (bundle[filename]) {
-				bundle[filename].source += `\n/*# sourceMappingURL=${mapfile} */`;
+				// use `basename` because files are siblings
+				// aka, avoid `sourceMappingURL=assets/bundle.css.map` from `assets/bundle.css`
+				bundle[filename].source += `\n/*# sourceMappingURL=${path.basename(mapfile)} */`;
 			} else {
 				// This should not ever happen, but just in case...
 				return this.warn(`Missing "${filename}" ("${file}") in bundle; skipping sourcemap!`);
 			}
 
 			const source = JSON.stringify({
 				...mapping,
-				file: filename,
+				file: path.basename(filename), //=> sibling file
 				sources: mapping.sources.map(toRelative),
 			}, null, isDev ? 2 : 0);
 

test/index.js

@@ -101,7 +101,7 @@ test('does not generate a CSS sourcemap by default', async () => {
 		assetFileNames: '[name][extname]',
 	});
 
-	assert.is(css.code.includes('sourceMappingURL'), false);
+	assert.not.match(css.code, 'sourceMappingURL');
 	assert.is(css.map, false);
 });
 
@@ -495,8 +495,8 @@ test('ensures sourcemap and original files point to each other\'s hashed filenam
 	const data1 = fs.readFileSync(path.join(assets, file), 'utf-8');
 	const data2 = fs.readFileSync(path.join(assets, sourcemap), 'utf-8');
 
-	assert.match(data1, sourcemap, 'file has `sourcemap` reference');
-	assert.match(data2, file, 'sourcemap has `file` reference');
+	assert.match(data1, `sourceMappingURL=${sourcemap}`, 'file has `sourcemap` reference');
+	assert.match(data2, `"file":"${file}"`, 'sourcemap has `file` reference');
 });
 
 test('handles filenames that happen to contain .svelte', async () => {