fix: implement CSS imports render

alexander-akait · alexander-akait · commit 972f53af12a3 · 2023-04-25T16:59:17.000+03:00
diff --git a/lib/CssModule.js b/lib/CssModule.js
@@ -8,17 +8,21 @@
 const NormalModule = require("./NormalModule");
 const makeSerializable = require("./util/makeSerializable");
 
-/** @typedef {import("./RequestShortener")} RequestShortener */
 /** @typedef {import("./Module")} Module */
+/** @typedef {import("./NormalModule").NormalModuleCreateData} NormalModuleCreateData */
+/** @typedef {import("./RequestShortener")} RequestShortener */
 
 class CssModule extends NormalModule {
-	constructor(args) {
-		super(args);
+	/**
+	 * @param {NormalModuleCreateData & { cssLayer: string|undefined|null, supports: string|undefined|null, media: string|undefined|null }} options options object
+	 */
+	constructor(options) {
+		super(options);
 
 		// 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;
+		this.csslayer = options.cssLayer;
+		this.supports = options.supports;
+		this.media = options.media;
 	}
 
 	/**
@@ -96,7 +100,10 @@ class CssModule extends NormalModule {
 			parserOptions: null,
 			generator: null,
 			generatorOptions: null,
-			resolveOptions: null
+			resolveOptions: null,
+			cssLayer: null,
+			supports: null,
+			media: null
 		});
 		obj.deserialize(context);
 		return obj;
diff --git a/lib/NormalModuleFactory.js b/lib/NormalModuleFactory.js
@@ -234,7 +234,7 @@ class NormalModuleFactory extends ModuleFactory {
 			generator: new HookMap(
 				() => new SyncHook(["generator", "generatorOptions"])
 			),
-			getModuleClass: new HookMap(
+			createModuleClass: new HookMap(
 				() => new SyncBailHook(["createData", "resolveData"])
 			)
 		});
@@ -311,17 +311,18 @@ class NormalModuleFactory extends ModuleFactory {
 										return callback(new Error("Empty dependency (no request)"));
 									}
 
-									// TODO webpack 6 make it required
-									const module_class =
-										this.hooks.getModuleClass
-											.for(createData.settings.type)
-											.call(createData, resolveData) || NormalModule;
+									// TODO webpack 6 make it required and move javascript/wasm/asset properties to own module
+									createdModule = this.hooks.createModuleClass
+										.for(createData.settings.type)
+										.call(createData, resolveData);
 
-									createdModule = /** @type {Module} */ (
-										new module_class(
-											/** @type {NormalModuleCreateData} */ (createData)
-										)
-									);
+									if (!createdModule) {
+										createdModule = /** @type {Module} */ (
+											new NormalModule(
+												/** @type {NormalModuleCreateData} */ (createData)
+											)
+										);
+									}
 								}
 
 								createdModule = this.hooks.module.call(
diff --git a/lib/css/CssModulesPlugin.js b/lib/css/CssModulesPlugin.js
@@ -5,11 +5,11 @@
 
 "use strict";
 
-const { ConcatSource } = require("webpack-sources");
+const { ConcatSource, PrefixSource } = require("webpack-sources");
+const CssModule = require("../CssModule");
 const HotUpdateChunk = require("../HotUpdateChunk");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const SelfModuleFactory = require("../SelfModuleFactory");
-const CssModule = require("../CssModule");
 const CssExportDependency = require("../dependencies/CssExportDependency");
 const CssImportDependency = require("../dependencies/CssImportDependency");
 const CssLocalIdentifierDependency = require("../dependencies/CssLocalIdentifierDependency");
@@ -154,9 +154,22 @@ class CssModulesPlugin {
 								? new CssExportsGenerator()
 								: new CssGenerator();
 						});
-					normalModuleFactory.hooks.getModuleClass
+					normalModuleFactory.hooks.createModuleClass
 						.for(type)
-						.tap(plugin, () => CssModule);
+						.tap(plugin, (createData, resolveData) => {
+							if (resolveData.dependencies.length > 0) {
+								const dependency = resolveData.dependencies[0];
+
+								return new CssModule({
+									...createData,
+									cssLayer: dependency.layer,
+									supports: dependency.supports,
+									media: dependency.media
+								});
+							}
+
+							return new CssModule(createData);
+						});
 				}
 				const orderedCssModulesPerChunk = new WeakMap();
 				compilation.hooks.afterCodeGeneration.tap("CssModulesPlugin", () => {
@@ -387,9 +400,34 @@ class CssModulesPlugin {
 			try {
 				const codeGenResult = codeGenerationResults.get(module, chunk.runtime);
 
-				const s =
+				let s =
 					codeGenResult.sources.get("css") ||
 					codeGenResult.sources.get("css-import");
+
+				if (module.cssLayer) {
+					s = new ConcatSource(
+						`@layer (${module.cssLayer}) {\n`,
+						new PrefixSource("\t", s),
+						"}"
+					);
+				}
+
+				if (module.media) {
+					s = new ConcatSource(
+						`@media (${module.media}) {\n`,
+						new PrefixSource("\t", s),
+						"}"
+					);
+				}
+
+				if (module.supports) {
+					s = new ConcatSource(
+						`@supports (${module.supports}) {\n`,
+						new PrefixSource("\t", s),
+						"}"
+					);
+				}
+
 				if (s) {
 					source.add(s);
 					source.add("\n");
diff --git a/test/configCases/css/css-import/style.css b/test/configCases/css/css-import/style.css
@@ -21,6 +21,7 @@
 @import url(print.css?foo=18)   screen   ;
 @import url("print.css?foo=19")   screen   ;
 @import "print.css?foo=20"   screen  ;
+@import "print.css?foo=21"    ;
 
 body {
 	background: red;
