fix: 🐛 prevent css injection if emitCss is set to true

Author: Christian Kaisermann

index.js

@@ -6,9 +6,8 @@ const hotApi = require.resolve('./lib/hot-api.js');
 
 const { version } = require('svelte/package.json');
 const major_version = +version[0];
-const { compile, preprocess } = major_version >= 3
-	? require('svelte/compiler')
-	: require('svelte');
+const { compile, preprocess } =
+	major_version >= 3 ? require('svelte/compiler') : require('svelte');
 
 const pluginOptions = {
 	externalDependencies: true,
@@ -21,7 +20,7 @@ const pluginOptions = {
 	shared: true,
 	style: true,
 	script: true,
-	markup: true
+	markup: true,
 };
 
 function makeHot(id, code, hotOptions) {
@@ -71,11 +70,17 @@ function normalize(compiled) {
 	// compatibility
 	const js = compiled.js || { code: compiled.code, map: compiled.map };
 
-	const css = compiled.css && typeof compiled.css === 'object'
-		? compiled.css
-		: { code: compiled.css, map: compiled.cssMap };
+	const css =
+		compiled.css && typeof compiled.css === 'object'
+			? compiled.css
+			: { code: compiled.css, map: compiled.cssMap };
 
-	return { js, css, ast: compiled.ast, warnings: compiled.warnings || compiled.stats.warnings || [] };
+	return {
+		js,
+		css,
+		ast: compiled.ast,
+		warnings: compiled.warnings || compiled.stats.warnings || [],
+	};
 }
 
 const warned = {};
@@ -85,7 +90,9 @@ function deprecatePreprocessOptions(options) {
 	['markup', 'style', 'script'].forEach(kind => {
 		if (options[kind]) {
 			if (!warned[kind]) {
-				console.warn(`[svelte-loader] DEPRECATION: options.${kind} is now options.preprocess.${kind}`);
+				console.warn(
+					`[svelte-loader] DEPRECATION: options.${kind} is now options.preprocess.${kind}`
+				);
 				warned[kind] = true;
 			}
 			preprocessOptions[kind] = options[kind];
@@ -99,7 +106,10 @@ const virtualModuleInstances = new Map();
 
 module.exports = function(source, map) {
 	if (this._compiler && !virtualModuleInstances.has(this._compiler)) {
-		virtualModuleInstances.set(this._compiler, new VirtualModules(this._compiler));
+		virtualModuleInstances.set(
+			this._compiler,
+			new VirtualModules(this._compiler)
+		);
 	}
 
 	const virtualModules = virtualModuleInstances.get(this._compiler);
@@ -109,12 +119,13 @@ module.exports = function(source, map) {
 	const options = Object.assign({}, this.options, getOptions(this));
 	const callback = this.async();
 
-	const isServer = this.target === 'node' || (options.generate && options.generate == 'ssr');
+	const isServer =
+		this.target === 'node' || (options.generate && options.generate == 'ssr');
 	const isProduction = this.minimize || process.env.NODE_ENV === 'production';
 
 	const compileOptions = {
 		filename: this.resourcePath,
-		format: options.format || (major_version >= 3 ? 'esm' : 'es')
+		format: options.format || (major_version >= 3 ? 'esm' : 'es'),
 	};
 
 	const handleWarning = warning => this.emitWarning(new Error(warning));
@@ -131,50 +142,61 @@ module.exports = function(source, map) {
 		if (!pluginOptions[option]) compileOptions[option] = options[option];
 	}
 
+	if (options.emitCss) compileOptions.css = false;
+
 	deprecatePreprocessOptions(options);
 	options.preprocess.filename = compileOptions.filename;
 
-	preprocess(source, options.preprocess).then(processed => {
-		if (processed.dependencies && this.addDependency) {
-			for (let dependency of processed.dependencies) {
-				this.addDependency(dependency);
-			}
-		}
-
-		let { js, css, warnings } = normalize(compile(processed.toString(), compileOptions));
-
-		if (major_version >= 3) {
-			warnings.forEach(
-				options.onwarn
-					? warning => options.onwarn(warning, handleWarning)
-					: handleWarning
-			);
-		}
-
-		if (options.hotReload && !isProduction && !isServer) {
-			const hotOptions = Object.assign({}, options.hotOptions);
-			const id = JSON.stringify(relative(process.cwd(), compileOptions.filename));
-			js.code = makeHot(id, js.code, hotOptions);
-		}
-
-		if (options.emitCss && css.code) {
-			const cssFilepath = compileOptions.filename.replace(
-				/\.[^/.]+$/,
-				`.svelte.css`
-			);
-
-			css.code += '\n/*# sourceMappingURL=' + css.map.toUrl() + '*/';
-			js.code = js.code + `\nimport '${posixify(cssFilepath)}';\n`;
-
-			if (virtualModules) {
-				virtualModules.writeModule(cssFilepath, css.code);
-			}
-		}
-
-		callback(null, js.code, js.map);
-	}, err => callback(err)).catch(err => {
-		// wrap error to provide correct
-		// context when logging to console
-		callback(new Error(`${err.name}: ${err.toString()}`));
-	});
+	preprocess(source, options.preprocess)
+		.then(
+			processed => {
+				if (processed.dependencies && this.addDependency) {
+					for (let dependency of processed.dependencies) {
+						this.addDependency(dependency);
+					}
+				}
+
+				let { js, css, warnings } = normalize(
+					compile(processed.toString(), compileOptions)
+				);
+
+				if (major_version >= 3) {
+					warnings.forEach(
+						options.onwarn
+							? warning => options.onwarn(warning, handleWarning)
+							: handleWarning
+					);
+				}
+
+				if (options.hotReload && !isProduction && !isServer) {
+					const hotOptions = Object.assign({}, options.hotOptions);
+					const id = JSON.stringify(
+						relative(process.cwd(), compileOptions.filename)
+					);
+					js.code = makeHot(id, js.code, hotOptions);
+				}
+
+				if (options.emitCss && css.code) {
+					const cssFilepath = compileOptions.filename.replace(
+						/\.[^/.]+$/,
+						`.svelte.css`
+					);
+
+					css.code += '\n/*# sourceMappingURL=' + css.map.toUrl() + '*/';
+					js.code = js.code + `\nimport '${posixify(cssFilepath)}';\n`;
+
+					if (virtualModules) {
+						virtualModules.writeModule(cssFilepath, css.code);
+					}
+				}
+
+				callback(null, js.code, js.map);
+			},
+			err => callback(err)
+		)
+		.catch(err => {
+			// wrap error to provide correct
+			// context when logging to console
+			callback(new Error(`${err.name}: ${err.toString()}`));
+		});
 };