fix: logic for asset/source

.editorconfig

@@ -15,6 +15,9 @@ indent_size = 2
 [test/cases/parsing/bom/bomfile.{css,js}]
 charset = utf-8-bom
 
+[test/configCases/css/no-extra-runtime-in-js/source.text]
+insert_final_newline = false
+
 [*.md]
 trim_trailing_whitespace = false
 

lib/asset/AssetModulesPlugin.js

@@ -179,7 +179,7 @@ class AssetModulesPlugin {
 					.tap(plugin, () => {
 						const AssetSourceGenerator = getAssetSourceGenerator();
 
-						return new AssetSourceGenerator();
+						return new AssetSourceGenerator(compilation.moduleGraph);
 					});
 
 				compilation.hooks.renderManifest.tap(plugin, (result, options) => {

lib/asset/AssetSourceGenerator.js

@@ -14,10 +14,23 @@ const RuntimeGlobals = require("../RuntimeGlobals");
 /** @typedef {import("../Generator").GenerateContext} GenerateContext */
 /** @typedef {import("../Module").ConcatenationBailoutReasonContext} ConcatenationBailoutReasonContext */
 /** @typedef {import("../NormalModule")} NormalModule */
+/** @typedef {import("../ModuleGraph")} ModuleGraph */
 
-const TYPES = new Set(["javascript"]);
+const JS_TYPES = new Set(["javascript"]);
+const CSS_TYPES = new Set(["css-url"]);
+const JS_AND_CSS_TYPES = new Set(["javascript", "css-url"]);
+const NO_TYPES = new Set();
 
 class AssetSourceGenerator extends Generator {
+	/**
+	 * @param {ModuleGraph} moduleGraph the module graph
+	 */
+	constructor(moduleGraph) {
+		super();
+
+		this._moduleGraph = moduleGraph;
+	}
+
 	/**
 	 * @param {NormalModule} module module for which the code should be generated
 	 * @param {GenerateContext} generateContext context for generate
@@ -25,33 +38,76 @@ class AssetSourceGenerator extends Generator {
 	 */
 	generate(
 		module,
-		{ concatenationScope, chunkGraph, runtimeTemplate, runtimeRequirements }
+		{ type, concatenationScope, getData, runtimeTemplate, runtimeRequirements }
 	) {
 		const originalSource = module.originalSource();
+		const data = getData
+			? /** @type {GenerateContext["getData"]} */
+				(getData)()
+			: undefined;
 
-		if (!originalSource) {
-			return new RawSource("");
+		switch (type) {
+			case "javascript": {
+				if (!originalSource) {
+					return new RawSource("");
+				}
+
+				let encodedSource;
+
+				if (data && data.has("encoded-source")) {
+					encodedSource = data.get("encoded-source");
+				} else {
+					const content = originalSource.source();
+
+					encodedSource =
+						typeof content === "string" ? content : content.toString("utf-8");
+
+					if (data) {
+						data.set("encoded-source", encodedSource);
+					}
+				}
+
+				let sourceContent;
+				if (concatenationScope) {
+					concatenationScope.registerNamespaceExport(
+						ConcatenationScope.NAMESPACE_OBJECT_EXPORT
+					);
+					sourceContent = `${runtimeTemplate.supportsConst() ? "const" : "var"} ${
+						ConcatenationScope.NAMESPACE_OBJECT_EXPORT
+					} = ${JSON.stringify(encodedSource)};`;
+				} else {
+					runtimeRequirements.add(RuntimeGlobals.module);
+					sourceContent = `${RuntimeGlobals.module}.exports = ${JSON.stringify(
+						encodedSource
+					)};`;
+				}
+				return new RawSource(sourceContent);
+			}
+			case "css-url": {
+				if (!originalSource) {
+					return;
+				}
+
+				let encodedSource;
+
+				if (data && data.has("encoded-source")) {
+					encodedSource = data.get("encoded-source");
+				} else {
+					const content = originalSource.source();
+
+					encodedSource =
+						typeof content === "string" ? content : content.toString("utf-8");
+
+					if (data) {
+						data.set("encoded-source", encodedSource);
+					}
+				}
+
+				if (data) {
+					data.set("url", { [type]: encodedSource });
+				}
+			}
 		}
-
-		const content = originalSource.source();
-		const encodedSource =
-			typeof content === "string" ? content : content.toString("utf-8");
-
-		let sourceContent;
-		if (concatenationScope) {
-			concatenationScope.registerNamespaceExport(
-				ConcatenationScope.NAMESPACE_OBJECT_EXPORT
-			);
-			sourceContent = `${runtimeTemplate.supportsConst() ? "const" : "var"} ${
-				ConcatenationScope.NAMESPACE_OBJECT_EXPORT
-			} = ${JSON.stringify(encodedSource)};`;
-		} else {
-			runtimeRequirements.add(RuntimeGlobals.module);
-			sourceContent = `${RuntimeGlobals.module}.exports = ${JSON.stringify(
-				encodedSource
-			)};`;
-		}
-		return new RawSource(sourceContent);
 	}
 
 	/**
@@ -68,7 +124,26 @@ class AssetSourceGenerator extends Generator {
 	 * @returns {Set<string>} available types (do not mutate)
 	 */
 	getTypes(module) {
-		return TYPES;
+		const sourceTypes = new Set();
+		const connections = this._moduleGraph.getIncomingConnections(module);
+
+		for (const connection of connections) {
+			if (!connection.originModule) {
+				continue;
+			}
+
+			sourceTypes.add(connection.originModule.type.split("/")[0]);
+		}
+
+		if (sourceTypes.has("javascript") && sourceTypes.has("css")) {
+			return JS_AND_CSS_TYPES;
+		} else if (sourceTypes.has("javascript")) {
+			return JS_TYPES;
+		} else if (sourceTypes.has("css")) {
+			return CSS_TYPES;
+		}
+
+		return NO_TYPES;
 	}
 
 	/**

test/__snapshots__/ConfigCacheTestCases.longtest.js.snap

@@ -4061,6 +4061,28 @@ Object {
 }
 `;
 
+exports[`ConfigCacheTestCases css no-extra-runtime-in-js exported tests should compile 1`] = `
+Array [
+  "/*!***********************!*\\\\
+  !*** css ./style.css ***!
+  \\\\***********************/
+.class {
+	color: red;
+	background:
+		url(img.png),
+		url(img.png),
+		url(data:image/png;base64,AAA);
+		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=),
+		url(resource.png),
+		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=),
+		url(7976064b7fcb4f6b3916.html),
+		url(https://example.com/img.png);
+}
+
+head{--webpack-main:&\\\\.\\\\/style\\\\.css;}",
+]
+`;
+
 exports[`ConfigCacheTestCases css pure-css exported tests should compile 1`] = `
 Array [
   "/*!*******************************************!*\\\\

test/__snapshots__/ConfigTestCases.basictest.js.snap

@@ -4061,6 +4061,28 @@ Object {
 }
 `;
 
+exports[`ConfigTestCases css no-extra-runtime-in-js exported tests should compile 1`] = `
+Array [
+  "/*!***********************!*\\\\
+  !*** css ./style.css ***!
+  \\\\***********************/
+.class {
+	color: red;
+	background:
+		url(img.png),
+		url(img.png),
+		url(data:image/png;base64,AAA);
+		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=),
+		url(resource.png),
+		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=),
+		url(7976064b7fcb4f6b3916.html),
+		url(https://example.com/img.png);
+}
+
+head{--webpack-main:&\\\\.\\\\/style\\\\.css;}",
+]
+`;
+
 exports[`ConfigTestCases css pure-css exported tests should compile 1`] = `
 Array [
   "/*!*******************************************!*\\\\

test/configCases/css/no-extra-runtime-in-js/index.js

@@ -0,0 +1,14 @@
+import "./style.css";
+
+it("should compile", () => {
+	const links = document.getElementsByTagName("link");
+	const css = [];
+
+	// Skip first because import it by default
+	for (const link of links.slice(1)) {
+		css.push(link.sheet.css);
+	}
+
+	expect(css).toMatchSnapshot();
+	expect(Object.keys(__webpack_modules__).length).toBe(3)
+});

test/configCases/css/no-extra-runtime-in-js/source.text

@@ -0,0 +1 @@
+data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=

test/configCases/css/no-extra-runtime-in-js/style.css

@@ -0,0 +1,12 @@
+.class {
+	color: red;
+	background:
+		url("./img.png"),
+		url("./img.png"),
+		url("data:image/png;base64,AAA");
+		url('./inline.png'),
+		url('./resource.png'),
+		url('./source.text'),
+		url('data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E'),
+		url('https://example.com/img.png');
+}

test/configCases/css/no-extra-runtime-in-js/test.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+	moduleScope(scope) {
+		const link = scope.window.document.createElement("link");
+		link.rel = "stylesheet";
+		link.href = "bundle0.css";
+		scope.window.document.head.appendChild(link);
+	}
+};

test/configCases/css/no-extra-runtime-in-js/webpack.config.js

@@ -0,0 +1,32 @@
+/** @type {import("../../../../").Configuration} */
+module.exports = {
+	target: "web",
+	mode: "development",
+	devtool: false,
+	experiments: {
+		css: true
+	},
+	module: {
+		rules: [
+			{
+				test: /resource\.png$/,
+				type: "asset/resource"
+			},
+			{
+				test: /inline\.png$/,
+				type: "asset/inline"
+			},
+			{
+				test: /source\.text$/,
+				type: "asset/source"
+			},
+			{
+				mimetype: "text/html",
+				type: "asset/resource"
+			}
+		]
+	},
+	output: {
+		assetModuleFilename: "[name][ext]"
+	}
+};