diff --git a/cspell.json b/cspell.json
index 61ef1cd11..772ae0b72 100644
--- a/cspell.json
+++ b/cspell.json
@@ -48,6 +48,7 @@
     "contextifies",
     "crossorigin",
     "csvg",
+    "csslayer",
     "cujojs",
     "Dani",
     "darkblue",
diff --git a/lib/CssModule.js b/lib/CssModule.js
index d7e328902..8e9a96912 100644
--- a/lib/CssModule.js
+++ b/lib/CssModule.js
@@ -7,9 +7,98 @@
 
 const NormalModule = require("./NormalModule");
 
+/** @typedef {import("./RequestShortener")} RequestShortener */
+/** @typedef {import("./Module")} Module */
+
 class CssModule extends NormalModule {
 	constructor(args) {
 		super(args);
+
+		// Avoid override `layer` for `Module` class, because it is a feature to run module in specific layer
+		this.csslayer = args.layer;
+		this.supports = args.supports;
+		this.media = args.media;
+	}
+
+	/**
+	 * @returns {string} a unique identifier of the module
+	 */
+	identifier() {
+		let identifier = super.identifier();
+
+		if (this.csslayer) {
+			identifier += `|${this.csslayer}`;
+		}
+
+		if (this.supports) {
+			identifier += `|${this.supports}`;
+		}
+
+		if (this.media) {
+			identifier += `|${this.media}`;
+		}
+
+		return identifier;
+	}
+
+	/**
+	 * @param {RequestShortener} requestShortener the request shortener
+	 * @returns {string} a user readable identifier of the module
+	 */
+	readableIdentifier(requestShortener) {
+		const readableIdentifier = super.readableIdentifier(requestShortener);
+
+		return `css ${readableIdentifier}${
+			this.csslayer ? ` (layer ${this.csslayer})` : ""
+		}${this.supports ? ` (supports ${this.supports})` : ""}${
+			this.media ? ` (media ${this.media})` : ""
+		}`;
+	}
+
+	/**
+	 * Assuming this module is in the cache. Update the (cached) module with
+	 * the fresh module from the factory. Usually updates internal references
+	 * and properties.
+	 * @param {Module} module fresh module
+	 * @returns {void}
+	 */
+	updateCacheModule(module) {
+		super.updateCacheModule(module);
+		const m = /** @type {CssModule} */ (module);
+		this.csslayer = m.csslayer;
+		this.supports = m.supports;
+		this.media = m.media;
+	}
+
+	static deserialize(context) {
+		const obj = new CssModule({
+			// will be deserialized by Module
+			layer: null,
+			type: "",
+			// will be filled by updateCacheModule
+			resource: "",
+			context: "",
+			request: null,
+			userRequest: null,
+			rawRequest: null,
+			loaders: null,
+			matchResource: null,
+			parser: null,
+			parserOptions: null,
+			generator: null,
+			generatorOptions: null,
+			resolveOptions: null
+		});
+		obj.deserialize(context);
+		return obj;
+	}
+
+	deserialize(context) {
+		const { read } = context;
+		this.csslayer = read();
+		this.supports = read();
+		this.media = read();
+		super.deserialize(context);
 	}
 }
 
diff --git a/lib/css/CssParser.js b/lib/css/CssParser.js
index 23c5bdcbb..bc56d1596 100644
--- a/lib/css/CssParser.js
+++ b/lib/css/CssParser.js
@@ -510,7 +510,7 @@ class CssParser extends Parser {
 							[modeData.start, end],
 							modeData.layer,
 							modeData.supports,
-							modeData.media
+							modeData.media.length > 0 ? modeData.media : undefined
 						);
 						dep.setLoc(sl, sc, el, ec);
 						module.addDependency(dep);