fix: data URI for image/svg+xml

lib/asset/AssetGenerator.js

@@ -141,7 +141,9 @@ class AssetGenerator extends Generator {
 								module.resourceResolveData &&
 								module.resourceResolveData.mimetype !== undefined
 							) {
-								mimeType = module.resourceResolveData.mimetype;
+								mimeType =
+									module.resourceResolveData.mimetype +
+									module.resourceResolveData.parameters;
 							} else if (ext) {
 								mimeType = mimeTypes.lookup(ext);
 							}
@@ -156,22 +158,33 @@ class AssetGenerator extends Generator {
 						}
 
 						let encodedContent;
-						switch (encoding) {
-							case "base64": {
-								encodedContent = originalSource.buffer().toString("base64");
-								break;
-							}
-							case false: {
-								const content = originalSource.source();
-								if (typeof content === "string") {
-									encodedContent = encodeURI(content);
-								} else {
-									encodedContent = encodeURI(content.toString("utf-8"));
+						if (
+							module.resourceResolveData &&
+							module.resourceResolveData.encoding === encoding
+						) {
+							encodedContent = module.resourceResolveData.encodedContent;
+						} else {
+							switch (encoding) {
+								case "base64": {
+									encodedContent = originalSource.buffer().toString("base64");
+									break;
+								}
+								case false: {
+									const content = originalSource.source();
+
+									if (typeof content !== "string") {
+										encodedContent = content.toString("utf-8");
+									}
+
+									encodedContent = encodeURIComponent(encodedContent).replace(
+										/[!'()*]/g,
+										character => "%" + character.codePointAt(0).toString(16)
+									);
+									break;
 								}
-								break;
+								default:
+									throw new Error(`Unsupported encoding '${encoding}'`);
 							}
-							default:
-								throw new Error(`Unsupported encoding '${encoding}'`);
 						}
 
 						encodedSource = `data:${mimeType}${

lib/schemes/DataUriPlugin.js

@@ -11,15 +11,14 @@ const NormalModule = require("../NormalModule");
 
 // data URL scheme: "data:text/javascript;charset=utf-8;base64,some-string"
 // http://www.ietf.org/rfc/rfc2397.txt
-const URIRegEx = /^data:(?:[^;,]+)?(?:(?:;[^;,]+)*?)(;base64)?,(.*)$/i;
-const URIMetaRegEx = /^data:([^;,]+)?(?:(?:;[^;,]+)*?)(?:;(base64))?,/i;
+const URIRegEx = /^data:([^;,]+)?((?:;[^;,]+)*?)(?:;(base64))?,(.*)$/i;
 
 const decodeDataURI = uri => {
 	const match = URIRegEx.exec(uri);
 	if (!match) return null;
 
-	const isBase64 = match[1];
-	const body = match[2];
+	const isBase64 = match[3];
+	const body = match[4];
 	return isBase64
 		? Buffer.from(body, "base64")
 		: Buffer.from(decodeURIComponent(body), "ascii");
@@ -38,10 +37,12 @@ class DataUriPlugin {
 				normalModuleFactory.hooks.resolveForScheme
 					.for("data")
 					.tap("DataUriPlugin", resourceData => {
-						const match = URIMetaRegEx.exec(resourceData.resource);
+						const match = URIRegEx.exec(resourceData.resource);
 						if (match) {
 							resourceData.data.mimetype = match[1] || "";
-							resourceData.data.encoding = match[2] || false;
+							resourceData.data.parameters = match[2] || "";
+							resourceData.data.encoding = match[3] || false;
+							resourceData.data.encodedContent = match[4] || "";
 						}
 					});
 				NormalModule.getCompilationHooks(compilation)

test/configCases/asset-modules/input-data-url-encoding/index.js

@@ -0,0 +1,33 @@
+it("should keep original encoding", () => {
+	const url = new URL(
+		"data:image/svg+xml;p=1;q=2,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke=\"%23343a40\" stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e",
+		import.meta.url
+	);
+	expect(url.href).toBe(
+		"data:image/svg+xml;p=1;q=2,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke=\"%23343a40\" stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"
+	);
+});
+
+it("should work with 'image/svg+xml'", () => {
+	const one = new URL(
+		"data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PHBhdGggZmlsbD0nbm9uZScgc3Ryb2tlPScjMzQzYTQwJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnIHN0cm9rZS13aWR0aD0nMicgZD0nTTIgNWw2IDYgNi02Jy8+PC9zdmc+",
+		import.meta.url
+	);
+	expect(one.href).toBe(
+		"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20fill%3D%27none%27%20stroke%3D%27%23343a40%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20stroke-width%3D%272%27%20d%3D%27M2%205l6%206%206-6%27%2F%3E%3C%2Fsvg%3E"
+	);
+	const two = new URL(
+		"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzQzYTQwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTIgNWw2IDYgNi02Ii8+PC9zdmc+",
+		import.meta.url
+	);
+	expect(two.href).toBe(
+		"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23343a40%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M2%205l6%206%206-6%22%2F%3E%3C%2Fsvg%3E"
+	);
+	const three = new URL(
+		"data:IMAGE/SVG+XML;param=123;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNyAxNyc+PHBhdGggZmlsbD0nbm9uZScgc3Ryb2tlPScjMzQzYTQwJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnIHN0cm9rZS13aWR0aD0nMicgZD0nTTIgNWw2IDYgNi02Jy8+PC9zdmc+",
+		import.meta.url
+	);
+	expect(three.href).toBe(
+		"data:IMAGE/SVG+XML;param=123,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2017%2017%27%3E%3Cpath%20fill%3D%27none%27%20stroke%3D%27%23343a40%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20stroke-width%3D%272%27%20d%3D%27M2%205l6%206%206-6%27%2F%3E%3C%2Fsvg%3E"
+	);
+});

test/configCases/asset-modules/input-data-url-encoding/webpack.config.js

@@ -0,0 +1,19 @@
+/** @type {import("../../../../").Configuration} */
+module.exports = {
+	mode: "development",
+	devtool: false,
+	module: {
+		rules: [
+			{
+				dependency: "url",
+				type: "asset",
+				generator: {
+					dataUrl: {
+						encoding: false
+					}
+				}
+			}
+		]
+	},
+	target: "web"
+};