diff --git a/lib/CssModule.js b/lib/CssModule.js
index 8e9a96912..e811ba3e7 100644
--- a/lib/CssModule.js
+++ b/lib/CssModule.js
@@ -6,6 +6,7 @@
 "use strict";
 
 const NormalModule = require("./NormalModule");
+const makeSerializable = require("./util/makeSerializable");
 
 /** @typedef {import("./RequestShortener")} RequestShortener */
 /** @typedef {import("./Module")} Module */
@@ -49,9 +50,9 @@ class CssModule extends NormalModule {
 		const readableIdentifier = super.readableIdentifier(requestShortener);
 
 		return `css ${readableIdentifier}${
-			this.csslayer ? ` (layer ${this.csslayer})` : ""
-		}${this.supports ? ` (supports ${this.supports})` : ""}${
-			this.media ? ` (media ${this.media})` : ""
+			this.csslayer ? ` (layer ${this.csslayer || ""})` : ""
+		}${this.supports ? ` (supports ${this.supports || ""})` : ""}${
+			this.media ? ` (media ${this.media || ""})` : ""
 		}`;
 	}
 
@@ -70,6 +71,14 @@ class CssModule extends NormalModule {
 		this.media = m.media;
 	}
 
+	serialize(context) {
+		const { write } = context;
+		write(this.csslayer);
+		write(this.supports);
+		write(this.media);
+		super.serialize(context);
+	}
+
 	static deserialize(context) {
 		const obj = new CssModule({
 			// will be deserialized by Module
@@ -102,4 +111,6 @@ class CssModule extends NormalModule {
 	}
 }
 
+makeSerializable(CssModule, "webpack/lib/CssModule");
+
 module.exports = CssModule;
diff --git a/lib/dependencies/CssImportDependency.js b/lib/dependencies/CssImportDependency.js
index b7754f20f..60e53a3bc 100644
--- a/lib/dependencies/CssImportDependency.js
+++ b/lib/dependencies/CssImportDependency.js
@@ -41,13 +41,28 @@ class CssImportDependency extends ModuleDependency {
 	}
 
 	get category() {
-		return "css-import";
+		return "style";
 	}
 
+	/**
+	 * @returns {string | null} an identifier to merge equal requests
+	 */
 	getResourceIdentifier() {
-		return `context${this._context || ""}|module${this.request}|layer${
-			this.layer
-		}|supports${this.supports}|media${this.media}`;
+		let str = `context${this._context || ""}|module${this.request}`;
+
+		if (this.layer) {
+			str += `|layer${this.layer}`;
+		}
+
+		if (this.supports) {
+			str += `|supports${this.supports}`;
+		}
+
+		if (this.media) {
+			str += `|media${this.media}`;
+		}
+
+		return str;
 	}
 
 	/**
@@ -57,6 +72,22 @@ class CssImportDependency extends ModuleDependency {
 	createIgnoredModule(context) {
 		return null;
 	}
+
+	serialize(context) {
+		const { write } = context;
+		write(this.layer);
+		write(this.supports);
+		write(this.media);
+		super.serialize(context);
+	}
+
+	deserialize(context) {
+		const { read } = context;
+		this.layer = read();
+		this.supports = read();
+		this.media = read();
+		super.deserialize(context);
+	}
 }
 
 CssImportDependency.Template = class CssImportDependencyTemplate extends (
diff --git a/lib/util/internalSerializables.js b/lib/util/internalSerializables.js
index 4fe124cdb..9c4d80f02 100644
--- a/lib/util/internalSerializables.js
+++ b/lib/util/internalSerializables.js
@@ -189,6 +189,7 @@ module.exports = {
 	ModuleParseError: () => require("../ModuleParseError"),
 	ModuleWarning: () => require("../ModuleWarning"),
 	NormalModule: () => require("../NormalModule"),
+	CssModule: () => require("../CssModule"),
 	RawDataUrlModule: () => require("../asset/RawDataUrlModule"),
 	RawModule: () => require("../RawModule"),
 	"sharing/ConsumeSharedModule": () =>