fix: respect media/supports/layer from parent CSS module

.editorconfig

@@ -17,3 +17,6 @@ charset = utf-8-bom
 
 [*.md]
 trim_trailing_whitespace = false
+
+[*.snap]
+trim_trailing_whitespace = false

lib/CssModule.js

@@ -14,7 +14,13 @@ const makeSerializable = require("./util/makeSerializable");
 /** @typedef {import("./serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
 /** @typedef {import("./serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
 
-/** @typedef {NormalModuleCreateData & { cssLayer: string|undefined|null, supports: string|undefined|null, media: string|undefined|null }} CSSModuleCreateData */
+/** @typedef {string|undefined} CssLayer */
+/** @typedef {string|undefined} Supports */
+/** @typedef {string|undefined} Media */
+/** @typedef {[CssLayer?, Supports?, Media?]} InheritanceItem */
+/** @typedef {Array<InheritanceItem>} Inheritance */
+
+/** @typedef {NormalModuleCreateData & { cssLayer: CssLayer|null, supports: Supports|null, media: Media|null, inheritance: Inheritance|null }} CSSModuleCreateData */
 
 class CssModule extends NormalModule {
 	/**
@@ -27,6 +33,7 @@ class CssModule extends NormalModule {
 		this.cssLayer = options.cssLayer;
 		this.supports = options.supports;
 		this.media = options.media;
+		this.inheritance = options.inheritance;
 	}
 
 	/**
@@ -47,6 +54,17 @@ class CssModule extends NormalModule {
 			identifier += `|${this.media}`;
 		}
 
+		if (this.inheritance) {
+			const inheritance = this.inheritance.map(
+				(item, index) =>
+					`inheritance_${index}|${item[0] || ""}|${item[1] || ""}|${
+						item[2] || ""
+					}`
+			);
+
+			identifier += `|${inheritance.join("|")}`;
+		}
+
 		return identifier;
 	}
 
@@ -57,11 +75,21 @@ class CssModule extends NormalModule {
 	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 || ""})` : ""
-		}`;
+		let identifier = `css ${readableIdentifier}`;
+
+		if (this.cssLayer) {
+			identifier += ` (layer: ${this.cssLayer})`;
+		}
+
+		if (this.supports) {
+			identifier += ` (supports: ${this.supports})`;
+		}
+
+		if (this.media) {
+			identifier += ` (media: ${this.media})`;
+		}
+
+		return identifier;
 	}
 
 	/**
@@ -77,6 +105,7 @@ class CssModule extends NormalModule {
 		this.cssLayer = m.cssLayer;
 		this.supports = m.supports;
 		this.media = m.media;
+		this.inheritance = m.inheritance;
 	}
 
 	/**
@@ -87,6 +116,7 @@ class CssModule extends NormalModule {
 		write(this.cssLayer);
 		write(this.supports);
 		write(this.media);
+		write(this.inheritance);
 		super.serialize(context);
 	}
 
@@ -114,7 +144,8 @@ class CssModule extends NormalModule {
 			resolveOptions: null,
 			cssLayer: null,
 			supports: null,
-			media: null
+			media: null,
+			inheritance: null
 		});
 		obj.deserialize(context);
 		return obj;
@@ -128,6 +159,7 @@ class CssModule extends NormalModule {
 		this.cssLayer = read();
 		this.supports = read();
 		this.media = read();
+		this.inheritance = read();
 		super.deserialize(context);
 	}
 }

lib/css/CssModulesPlugin.js

@@ -181,12 +181,56 @@ class CssModulesPlugin {
 								// When CSS is imported from CSS there is only one dependency
 								const dependency = resolveData.dependencies[0];
 
-								return new CssModule({
-									...createData,
-									cssLayer: dependency.layer,
-									supports: dependency.supports,
-									media: dependency.media
-								});
+								if (dependency instanceof CssImportDependency) {
+									const parent =
+										/** @type {CssModule} */
+										(compilation.moduleGraph.getParentModule(dependency));
+
+									if (parent instanceof CssModule) {
+										/** @type {import("../CssModule").Inheritance | undefined} */
+										let inheritance;
+
+										if (
+											(parent.cssLayer !== null &&
+												parent.cssLayer !== undefined) ||
+											parent.supports ||
+											parent.media
+										) {
+											if (!inheritance) {
+												inheritance = [];
+											}
+
+											inheritance.push([
+												parent.cssLayer,
+												parent.supports,
+												parent.media
+											]);
+										}
+
+										if (parent.inheritance) {
+											if (!inheritance) {
+												inheritance = [];
+											}
+
+											inheritance.push(...parent.inheritance);
+										}
+
+										return new CssModule({
+											...createData,
+											cssLayer: dependency.layer,
+											supports: dependency.supports,
+											media: dependency.media,
+											inheritance
+										});
+									}
+
+									return new CssModule({
+										...createData,
+										cssLayer: dependency.layer,
+										supports: dependency.supports,
+										media: dependency.media
+									});
+								}
 							}
 
 							return new CssModule(createData);
@@ -450,29 +494,41 @@ class CssModulesPlugin {
 					codeGenResult.sources.get("css") ||
 					codeGenResult.sources.get("css-import");
 
-				if (module.media) {
-					moduleSource = new ConcatSource(
-						`@media ${module.media} {\n`,
-						new PrefixSource("\t", moduleSource),
-						"}"
-					);
-				}
+				let inheritance = [[module.cssLayer, module.supports, module.media]];
 
-				if (module.supports) {
-					moduleSource = new ConcatSource(
-						`@supports (${module.supports}) {\n`,
-						new PrefixSource("\t", moduleSource),
-						"}"
-					);
+				if (module.inheritance) {
+					inheritance.push(...module.inheritance);
 				}
 
-				// Layer can be anonymous
-				if (module.cssLayer !== undefined && module.cssLayer !== null) {
-					moduleSource = new ConcatSource(
-						`@layer${module.cssLayer ? ` (${module.cssLayer})` : ""} {\n`,
-						new PrefixSource("\t", moduleSource),
-						"}"
-					);
+				for (let i = 0; i < inheritance.length; i++) {
+					const layer = inheritance[i][0];
+					const supports = inheritance[i][1];
+					const media = inheritance[i][2];
+
+					if (media) {
+						moduleSource = new ConcatSource(
+							`@media ${media} {\n`,
+							new PrefixSource("\t", moduleSource),
+							"}\n"
+						);
+					}
+
+					if (supports) {
+						moduleSource = new ConcatSource(
+							`@supports (${supports}) {\n`,
+							new PrefixSource("\t", moduleSource),
+							"}\n"
+						);
+					}
+
+					// Layer can be anonymous
+					if (layer !== undefined && layer !== null) {
+						moduleSource = new ConcatSource(
+							`@layer${layer ? ` ${layer}` : ""} {\n`,
+							new PrefixSource("\t", moduleSource),
+							"}\n"
+						);
+					}
 				}
 
 				if (moduleSource) {

lib/css/CssParser.js

@@ -197,18 +197,6 @@ class CssParser extends Parser {
 		const isTopLevelLocal = () =>
 			modeData === "local" ||
 			(this.defaultMode === "local" && modeData === undefined);
-		const eatWhiteLine = (input, pos) => {
-			for (;;) {
-				const cc = input.charCodeAt(pos);
-				if (cc === 32 || cc === 9) {
-					pos++;
-					continue;
-				}
-				if (cc === 10) pos++;
-				break;
-			}
-			return pos;
-		};
 		const eatUntil = chars => {
 			const charCodes = Array.from({ length: chars.length }, (_, i) =>
 				chars.charCodeAt(i)
@@ -304,7 +292,7 @@ class CssParser extends Parser {
 			}
 			pos++;
 			if (pos === input.length) return pos;
-			pos = eatWhiteLine(input, pos);
+			pos = walkCssTokens.eatWhiteLine(input, pos);
 			return pos;
 		};
 		const eatPropertyName = eatUntil(":{};");
@@ -521,6 +509,7 @@ class CssParser extends Parser {
 							);
 						}
 						const semicolonPos = end;
+						end = walkCssTokens.eatWhiteLine(input, end + 1);
 						const { line: sl, column: sc } = locConverter.get(
 							modeData.atRuleStart
 						);

lib/css/walkCssTokens.js

@@ -99,18 +99,30 @@ const consumeSpace = (input, pos, callbacks) => {
 
 /**
  * @param {number} cc char code
- * @returns {boolean} true, if cc is a whitespace
+ * @returns {boolean} true, if cc is a newline
  */
-const _isWhiteSpace = cc => {
+const _isNewline = cc => {
 	return (
-		cc === CC_LINE_FEED ||
-		cc === CC_CARRIAGE_RETURN ||
-		cc === CC_FORM_FEED ||
-		cc === CC_TAB ||
-		cc === CC_SPACE
+		cc === CC_LINE_FEED || cc === CC_CARRIAGE_RETURN || cc === CC_FORM_FEED
 	);
 };
 
+/**
+ * @param {number} cc char code
+ * @returns {boolean} true, if cc is a space (U+0009 CHARACTER TABULATION or U+0020 SPACE)
+ */
+const _isSpace = cc => {
+	return cc === CC_TAB || cc === CC_SPACE;
+};
+
+/**
+ * @param {number} cc char code
+ * @returns {boolean} true, if cc is a whitespace
+ */
+const _isWhiteSpace = cc => {
+	return _isNewline(cc) || _isSpace(cc);
+};
+
 /**
  * @param {number} cc char code
  * @returns {boolean} true, if cc is a start code point of an identifier
@@ -739,3 +751,25 @@ module.exports.eatWhitespaceAndComments = (input, pos) => {
 
 	return pos;
 };
+
+/**
+ * @param {string} input input
+ * @param {number} pos position
+ * @returns {number} position after whitespace
+ */
+module.exports.eatWhiteLine = (input, pos) => {
+	for (;;) {
+		const cc = input.charCodeAt(pos);
+		if (_isSpace(cc)) {
+			pos++;
+			continue;
+		}
+		if (_isNewLine(cc)) pos++;
+		// For `\r\n`
+		if (cc === CC_CARRIAGE_RETURN && input.charCodeAt(pos + 1) === CC_LINE_FEED)
+			pos++;
+		break;
+	}
+
+	return pos;
+};