webpack 5.90.2 → 5.91.0

package/lib/ContextModule.js

@@ -38,11 +38,13 @@ const makeSerializable = require("./util/makeSerializable");
 /** @typedef {import("./Module").CodeGenerationResult} CodeGenerationResult */
 /** @typedef {import("./Module").LibIdentOptions} LibIdentOptions */
 /** @typedef {import("./Module").NeedBuildContext} NeedBuildContext */
+/** @typedef {import("./Module").SourceTypes} SourceTypes */
 /** @typedef {import("./ModuleGraph")} ModuleGraph */
 /** @typedef {import("./RequestShortener")} RequestShortener */
 /** @typedef {import("./ResolverFactory").ResolverWithOptions} ResolverWithOptions */
 /** @typedef {import("./RuntimeTemplate")} RuntimeTemplate */
 /** @typedef {import("./dependencies/ContextElementDependency")} ContextElementDependency */
+/** @typedef {import("./javascript/JavascriptParser").Attributes} Attributes */
 /** @typedef {import("./serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
 /** @typedef {import("./serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
 /** @template T @typedef {import("./util/LazySet")<T>} LazySet<T> */
@@ -65,6 +67,7 @@ const makeSerializable = require("./util/makeSerializable");
  * @property {string=} category
  * @property {(string[][] | null)=} referencedExports exports referenced from modules (won't be mangled)
  * @property {string=} layer
+ * @property {Attributes=} attributes
  */
 
 /**
@@ -144,7 +147,7 @@ class ContextModule extends Module {
 	}
 
 	/**
-	 * @returns {Set<string>} types available (do not mutate)
+	 * @returns {SourceTypes} types available (do not mutate)
 	 */
 	getSourceTypes() {
 		return TYPES;

package/lib/ContextModuleFactory.js

@@ -289,7 +289,8 @@ module.exports = class ContextModuleFactory extends ModuleFactory {
 			exclude,
 			referencedExports,
 			category,
-			typePrefix
+			typePrefix,
+			attributes
 		} = options;
 		if (!regExp || !resource) return callback(null, []);
 
@@ -365,7 +366,8 @@ module.exports = class ContextModuleFactory extends ModuleFactory {
 														typePrefix,
 														category,
 														referencedExports,
-														obj.context
+														obj.context,
+														attributes
 													);
 													dep.optional = true;
 													return dep;

package/lib/ContextReplacementPlugin.js

@@ -9,6 +9,7 @@ const ContextElementDependency = require("./dependencies/ContextElementDependenc
 const { join } = require("./util/fs");
 
 /** @typedef {import("./Compiler")} Compiler */
+/** @typedef {import("./util/fs").InputFileSystem} InputFileSystem */
 
 class ContextReplacementPlugin {
 	/**
@@ -104,7 +105,7 @@ class ContextReplacementPlugin {
 							result.resource = newContentResource;
 						} else {
 							result.resource = join(
-								compiler.inputFileSystem,
+								/** @type {InputFileSystem} */ (compiler.inputFileSystem),
 								result.resource,
 								newContentResource
 							);
@@ -132,7 +133,7 @@ class ContextReplacementPlugin {
 						) {
 							// When the function changed it to an relative path
 							result.resource = join(
-								compiler.inputFileSystem,
+								/** @type {InputFileSystem} */ (compiler.inputFileSystem),
 								origResource,
 								result.resource
 							);

package/lib/CssModule.js

@@ -151,9 +151,6 @@ class CssModule extends NormalModule {
 		return obj;
 	}
 
-	/**
-	 * @param {ObjectDeserializerContext} context context
-	 */
 	deserialize(context) {
 		const { read } = context;
 		this.cssLayer = read();

package/lib/DefinePlugin.js

@@ -308,8 +308,10 @@ const PLUGIN_NAME = "DefinePlugin";
 const VALUE_DEP_PREFIX = `webpack/${PLUGIN_NAME} `;
 const VALUE_DEP_MAIN = `webpack/${PLUGIN_NAME}_hash`;
 const TYPEOF_OPERATOR_REGEXP = /^typeof\s+/;
-const WEBPACK_REQUIRE_FUNCTION_REGEXP = /__webpack_require__\s*(!?\.)/;
-const WEBPACK_REQUIRE_IDENTIFIER_REGEXP = /__webpack_require__/;
+const WEBPACK_REQUIRE_FUNCTION_REGEXP = new RegExp(
+	`${RuntimeGlobals.require}\\s*(!?\\.)`
+);
+const WEBPACK_REQUIRE_IDENTIFIER_REGEXP = new RegExp(RuntimeGlobals.require);
 
 class DefinePlugin {
 	/**

package/lib/DelegatedModule.js

@@ -25,6 +25,7 @@ const makeSerializable = require("./util/makeSerializable");
 /** @typedef {import("./Module").LibIdentOptions} LibIdentOptions */
 /** @typedef {import("./Module").NeedBuildContext} NeedBuildContext */
 /** @typedef {import("./Module").SourceContext} SourceContext */
+/** @typedef {import("./Module").SourceTypes} SourceTypes */
 /** @typedef {import("./RequestShortener")} RequestShortener */
 /** @typedef {import("./ResolverFactory").ResolverWithOptions} ResolverWithOptions */
 /** @typedef {import("./RuntimeTemplate")} RuntimeTemplate */
@@ -66,7 +67,7 @@ class DelegatedModule extends Module {
 	}
 
 	/**
-	 * @returns {Set<string>} types available (do not mutate)
+	 * @returns {SourceTypes} types available (do not mutate)
 	 */
 	getSourceTypes() {
 		return TYPES;

package/lib/Dependency.js

@@ -5,6 +5,7 @@
 
 "use strict";
 
+const RawModule = require("./RawModule");
 const memoize = require("./util/memoize");
 
 /** @typedef {import("webpack-sources").Source} Source */
@@ -80,10 +81,11 @@ const memoize = require("./util/memoize");
  * @property {boolean=} canMangle when false, referenced export can not be mangled, defaults to true
  */
 
+/** @typedef {function(ModuleGraphConnection, RuntimeSpec): ConnectionState} GetConditionFn */
+
 const TRANSITIVE = Symbol("transitive");
 
 const getIgnoredModule = memoize(() => {
-	const RawModule = require("./RawModule");
 	return new RawModule("/* (ignored) */", `ignored`, `(ignored)`);
 });
 
@@ -235,7 +237,7 @@ class Dependency {
 
 	/**
 	 * @param {ModuleGraph} moduleGraph module graph
-	 * @returns {null | false | function(ModuleGraphConnection, RuntimeSpec): ConnectionState} function to determine if the connection is active
+	 * @returns {null | false | GetConditionFn} function to determine if the connection is active
 	 */
 	getCondition(moduleGraph) {
 		return null;

package/lib/DependencyTemplate.js

@@ -13,18 +13,23 @@
 /** @typedef {import("./Dependency").RuntimeSpec} RuntimeSpec */
 /** @typedef {import("./DependencyTemplates")} DependencyTemplates */
 /** @typedef {import("./Generator").GenerateContext} GenerateContext */
-/** @template T @typedef {import("./InitFragment")<T>} InitFragment */
 /** @typedef {import("./Module")} Module */
+/** @typedef {import("./Module").RuntimeRequirements} RuntimeRequirements */
 /** @typedef {import("./ModuleGraph")} ModuleGraph */
 /** @typedef {import("./RuntimeTemplate")} RuntimeTemplate */
 
+/**
+ * @template T
+ * @typedef {import("./InitFragment")<T>} InitFragment
+ */
+
 /**
  * @typedef {Object} DependencyTemplateContext
  * @property {RuntimeTemplate} runtimeTemplate the runtime template
  * @property {DependencyTemplates} dependencyTemplates the dependency templates
  * @property {ModuleGraph} moduleGraph the module graph
  * @property {ChunkGraph} chunkGraph the chunk graph
- * @property {Set<string>} runtimeRequirements the requirements for runtime
+ * @property {RuntimeRequirements} runtimeRequirements the requirements for runtime
  * @property {Module} module current module
  * @property {RuntimeSpec} runtime current runtime, for which code is generated
  * @property {RuntimeSpec[]} [runtimes] current runtimes, for which code is generated

package/lib/DllModule.js

@@ -22,6 +22,7 @@ const makeSerializable = require("./util/makeSerializable");
 /** @typedef {import("./Module").CodeGenerationResult} CodeGenerationResult */
 /** @typedef {import("./Module").NeedBuildContext} NeedBuildContext */
 /** @typedef {import("./Module").SourceContext} SourceContext */
+/** @typedef {import("./Module").SourceTypes} SourceTypes */
 /** @typedef {import("./RequestShortener")} RequestShortener */
 /** @typedef {import("./ResolverFactory").ResolverWithOptions} ResolverWithOptions */
 /** @typedef {import("./RuntimeTemplate")} RuntimeTemplate */
@@ -47,12 +48,13 @@ class DllModule extends Module {
 		super(JAVASCRIPT_MODULE_TYPE_DYNAMIC, context);
 
 		// Info from Factory
+		/** @type {Dependency[]} */
 		this.dependencies = dependencies;
 		this.name = name;
 	}
 
 	/**
-	 * @returns {Set<string>} types available (do not mutate)
+	 * @returns {SourceTypes} types available (do not mutate)
 	 */
 	getSourceTypes() {
 		return TYPES;

package/lib/DllReferencePlugin.js

@@ -17,6 +17,7 @@ const makePathsRelative = require("./util/identifier").makePathsRelative;
 /** @typedef {import("../declarations/plugins/DllReferencePlugin").DllReferencePluginOptions} DllReferencePluginOptions */
 /** @typedef {import("../declarations/plugins/DllReferencePlugin").DllReferencePluginOptionsManifest} DllReferencePluginOptionsManifest */
 /** @typedef {import("./Compiler")} Compiler */
+/** @typedef {import("./util/fs").InputFileSystem} InputFileSystem */
 
 const validate = createSchemaValidation(
 	require("../schemas/plugins/DllReferencePlugin.check.js"),
@@ -60,7 +61,8 @@ class DllReferencePlugin {
 				if ("manifest" in this.options) {
 					const manifest = this.options.manifest;
 					if (typeof manifest === "string") {
-						compiler.inputFileSystem.readFile(manifest, (err, result) => {
+						/** @type {InputFileSystem} */
+						(compiler.inputFileSystem).readFile(manifest, (err, result) => {
 							if (err) return callback(err);
 							const data = {
 								path: manifest,
@@ -70,7 +72,9 @@ class DllReferencePlugin {
 							// Catch errors parsing the manifest so that blank
 							// or malformed manifest files don't kill the process.
 							try {
-								data.data = parseJson(result.toString("utf-8"));
+								data.data = parseJson(
+									/** @type {Buffer} */ (result).toString("utf-8")
+								);
 							} catch (e) {
 								// Store the error in the params so that it can
 								// be added as a compilation error later on.

package/lib/EntryOptionPlugin.js

@@ -41,7 +41,10 @@ class EntryOptionPlugin {
 					name,
 					desc
 				);
-				for (const entry of desc.import) {
+				const descImport =
+					/** @type {Exclude<EntryDescription["import"], undefined>} */
+					(desc.import);
+				for (const entry of descImport) {
 					new EntryPlugin(context, entry, options).apply(compiler);
 				}
 			}

package/lib/EntryPlugin.js

@@ -59,7 +59,12 @@ class EntryPlugin {
 	static createDependency(entry, options) {
 		const dep = new EntryDependency(entry);
 		// TODO webpack 6 remove string option
-		dep.loc = { name: typeof options === "object" ? options.name : options };
+		dep.loc = {
+			name:
+				typeof options === "object"
+					? /** @type {string} */ (options.name)
+					: options
+		};
 		return dep;
 	}
 }

package/lib/Entrypoint.js

@@ -89,7 +89,7 @@ class Entrypoint extends ChunkGroup {
 	/**
 	 * @param {Chunk} oldChunk chunk to be replaced
 	 * @param {Chunk} newChunk New chunk that will be replaced with
-	 * @returns {boolean} returns true if the replacement was successful
+	 * @returns {boolean | undefined} returns true if the replacement was successful
 	 */
 	replaceChunk(oldChunk, newChunk) {
 		if (this._runtimeChunk === oldChunk) this._runtimeChunk = newChunk;

package/lib/ExportsInfo.js

@@ -207,9 +207,6 @@ class ExportsInfo {
 			this._redirectTo.setHasUseInfo();
 		} else {
 			this._otherExportsInfo.setHasUseInfo();
-			if (this._otherExportsInfo.canMangleUse === undefined) {
-				this._otherExportsInfo.canMangleUse = true;
-			}
 		}
 	}
 
@@ -670,7 +667,7 @@ class ExportsInfo {
 	}
 
 	/**
-	 * @param {string | string[]} name the export name
+	 * @param {string | string[] | undefined} name the export name
 	 * @param {RuntimeSpec} runtime check usage for this runtime only
 	 * @returns {string | string[] | false} the used name
 	 */

package/lib/ExternalModule.js

@@ -29,17 +29,23 @@ const { register } = require("./util/serialization");
 /** @typedef {import("./Dependency").UpdateHashContext} UpdateHashContext */
 /** @typedef {import("./DependencyTemplates")} DependencyTemplates */
 /** @typedef {import("./ExportsInfo")} ExportsInfo */
+/** @typedef {import("./Generator").GenerateContext} GenerateContext */
+/** @typedef {import("./Module").BuildInfo} BuildInfo */
 /** @typedef {import("./Module").CodeGenerationContext} CodeGenerationContext */
 /** @typedef {import("./Module").CodeGenerationResult} CodeGenerationResult */
 /** @typedef {import("./Module").ConcatenationBailoutReasonContext} ConcatenationBailoutReasonContext */
 /** @typedef {import("./Module").LibIdentOptions} LibIdentOptions */
 /** @typedef {import("./Module").NeedBuildContext} NeedBuildContext */
+/** @typedef {import("./Module").ReadOnlyRuntimeRequirements} ReadOnlyRuntimeRequirements */
+/** @typedef {import("./Module").SourceTypes} SourceTypes */
+/** @typedef {import("./ModuleGraph")} ModuleGraph */
 /** @typedef {import("./NormalModuleFactory")} NormalModuleFactory */
 /** @typedef {import("./RequestShortener")} RequestShortener */
 /** @typedef {import("./ResolverFactory").ResolverWithOptions} ResolverWithOptions */
 /** @typedef {import("./RuntimeTemplate")} RuntimeTemplate */
 /** @typedef {import("./WebpackError")} WebpackError */
 /** @typedef {import("./javascript/JavascriptModulesPlugin").ChunkRenderContext} ChunkRenderContext */
+/** @typedef {import("./javascript/JavascriptParser").Attributes} Attributes */
 /** @typedef {import("./serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
 /** @typedef {import("./serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
 /** @typedef {import("./util/Hash")} Hash */
@@ -47,13 +53,18 @@ const { register } = require("./util/serialization");
 /** @typedef {import("./util/fs").InputFileSystem} InputFileSystem */
 /** @typedef {import("./util/runtime").RuntimeSpec} RuntimeSpec */
 
+/** @typedef {{ attributes?: Attributes }} ImportDependencyMeta */
+/** @typedef {{ layer?: string, supports?: string, media?: string }} CssImportDependencyMeta */
+
+/** @typedef {ImportDependencyMeta | CssImportDependencyMeta} DependencyMeta */
+
 /**
  * @typedef {Object} SourceData
  * @property {boolean=} iife
  * @property {string=} init
  * @property {string} expression
  * @property {InitFragment<ChunkRenderContext>[]=} chunkInitFragments
- * @property {ReadonlySet<string>=} runtimeRequirements
+ * @property {ReadOnlyRuntimeRequirements=} runtimeRequirements
  */
 
 const TYPES = new Set(["javascript"]);
@@ -140,43 +151,60 @@ const getSourceForCommonJsExternalInNodeModule = (
 /**
  * @param {string|string[]} moduleAndSpecifiers the module request
  * @param {RuntimeTemplate} runtimeTemplate the runtime template
+ * @param {ImportDependencyMeta=} dependencyMeta the dependency meta
  * @returns {SourceData} the generated source
  */
-const getSourceForImportExternal = (moduleAndSpecifiers, runtimeTemplate) => {
+const getSourceForImportExternal = (
+	moduleAndSpecifiers,
+	runtimeTemplate,
+	dependencyMeta
+) => {
 	const importName = runtimeTemplate.outputOptions.importFunctionName;
 	if (!runtimeTemplate.supportsDynamicImport() && importName === "import") {
 		throw new Error(
 			"The target environment doesn't support 'import()' so it's not possible to use external type 'import'"
 		);
 	}
+	const attributes =
+		dependencyMeta && dependencyMeta.attributes
+			? `, ${JSON.stringify(dependencyMeta.attributes)}`
+			: "";
 	if (!Array.isArray(moduleAndSpecifiers)) {
 		return {
-			expression: `${importName}(${JSON.stringify(moduleAndSpecifiers)});`
+			expression: `${importName}(${JSON.stringify(
+				moduleAndSpecifiers
+			)}${attributes});`
 		};
 	}
 	if (moduleAndSpecifiers.length === 1) {
 		return {
-			expression: `${importName}(${JSON.stringify(moduleAndSpecifiers[0])});`
+			expression: `${importName}(${JSON.stringify(
+				moduleAndSpecifiers[0]
+			)}${attributes});`
 		};
 	}
 	const moduleName = moduleAndSpecifiers[0];
 	return {
 		expression: `${importName}(${JSON.stringify(
 			moduleName
-		)}).then(${runtimeTemplate.returningFunction(
+		)}${attributes}).then(${runtimeTemplate.returningFunction(
 			`module${propertyAccess(moduleAndSpecifiers, 1)}`,
 			"module"
 		)});`
 	};
 };
 
+/**
+ * @extends {InitFragment<ChunkRenderContext>}
+ */
 class ModuleExternalInitFragment extends InitFragment {
 	/**
 	 * @param {string} request import source
 	 * @param {string=} ident recomputed ident
+	 * @param {ImportDependencyMeta=} dependencyMeta the dependency meta
 	 * @param {string | HashConstructor=} hashFunction the hash function to use
 	 */
-	constructor(request, ident, hashFunction = "md4") {
+	constructor(request, ident, dependencyMeta, hashFunction = "md4") {
 		if (ident === undefined) {
 			ident = Template.toIdentifier(request);
 			if (ident !== request) {
@@ -188,14 +216,19 @@ class ModuleExternalInitFragment extends InitFragment {
 		}
 		const identifier = `__WEBPACK_EXTERNAL_MODULE_${ident}__`;
 		super(
-			`import * as ${identifier} from ${JSON.stringify(request)};\n`,
+			`import * as ${identifier} from ${JSON.stringify(request)}${
+				dependencyMeta && dependencyMeta.attributes
+					? ` assert ${JSON.stringify(dependencyMeta.attributes)}`
+					: ""
+			};\n`,
 			InitFragment.STAGE_HARMONY_IMPORTS,
 			0,
 			`external module import ${ident}`
 		);
 		this._ident = ident;
-		this._identifier = identifier;
 		this._request = request;
+		this._dependencyMeta = request;
+		this._identifier = identifier;
 	}
 
 	getNamespaceIdentifier() {
@@ -211,13 +244,21 @@ register(
 		serialize(obj, { write }) {
 			write(obj._request);
 			write(obj._ident);
+			write(obj._dependencyMeta);
 		},
 		deserialize({ read }) {
-			return new ModuleExternalInitFragment(read(), read());
+			return new ModuleExternalInitFragment(read(), read(), read());
 		}
 	}
 );
 
+/**
+ * @param {string} input input
+ * @param {ExportsInfo} exportsInfo the exports info
+ * @param {RuntimeSpec=} runtime the runtime
+ * @param {RuntimeTemplate=} runtimeTemplate the runtime template
+ * @returns {string | undefined} the module remapping
+ */
 const generateModuleRemapping = (
 	input,
 	exportsInfo,
@@ -241,9 +282,11 @@ const generateModuleRemapping = (
 				}
 			}
 			properties.push(
-				`[${JSON.stringify(used)}]: ${runtimeTemplate.returningFunction(
-					`${input}${propertyAccess([exportInfo.name])}`
-				)}`
+				`[${JSON.stringify(used)}]: ${
+					/** @type {RuntimeTemplate} */ (runtimeTemplate).returningFunction(
+						`${input}${propertyAccess([exportInfo.name])}`
+					)
+				}`
 			);
 		}
 		return `x({ ${properties.join(", ")} })`;
@@ -255,19 +298,22 @@ const generateModuleRemapping = (
  * @param {ExportsInfo} exportsInfo exports info of this module
  * @param {RuntimeSpec} runtime the runtime
  * @param {RuntimeTemplate} runtimeTemplate the runtime template
+ * @param {ImportDependencyMeta} dependencyMeta the dependency meta
  * @returns {SourceData} the generated source
  */
 const getSourceForModuleExternal = (
 	moduleAndSpecifiers,
 	exportsInfo,
 	runtime,
-	runtimeTemplate
+	runtimeTemplate,
+	dependencyMeta
 ) => {
 	if (!Array.isArray(moduleAndSpecifiers))
 		moduleAndSpecifiers = [moduleAndSpecifiers];
 	const initFragment = new ModuleExternalInitFragment(
 		moduleAndSpecifiers[0],
 		undefined,
+		dependencyMeta,
 		runtimeTemplate.outputOptions.hashFunction
 	);
 	const baseAccess = `${initFragment.getNamespaceIdentifier()}${propertyAccess(
@@ -399,10 +445,11 @@ const getSourceForDefaultCase = (optional, request, runtimeTemplate) => {
 class ExternalModule extends Module {
 	/**
 	 * @param {string | string[] | Record<string, string | string[]>} request request
-	 * @param {TODO} type type
+	 * @param {string} type type
 	 * @param {string} userRequest user request
+	 * @param {DependencyMeta=} dependencyMeta dependency meta
 	 */
-	constructor(request, type, userRequest) {
+	constructor(request, type, userRequest, dependencyMeta) {
 		super(JAVASCRIPT_MODULE_TYPE_DYNAMIC, null);
 
 		// Info from Factory
@@ -412,10 +459,12 @@ class ExternalModule extends Module {
 		this.externalType = type;
 		/** @type {string} */
 		this.userRequest = userRequest;
+		/** @type {DependencyMeta=} */
+		this.dependencyMeta = dependencyMeta;
 	}
 
 	/**
-	 * @returns {Set<string>} types available (do not mutate)
+	 * @returns {SourceTypes} types available (do not mutate)
 	 */
 	getSourceTypes() {
 		return this.externalType === "css-import" ? CSS_TYPES : TYPES;
@@ -548,6 +597,11 @@ class ExternalModule extends Module {
 		callback();
 	}
 
+	/**
+	 * restore unsafe cache data
+	 * @param {object} unsafeCacheData data from getUnsafeCacheData
+	 * @param {NormalModuleFactory} normalModuleFactory the normal module factory handling the unsafe caching
+	 */
 	restoreFromUnsafeCache(unsafeCacheData, normalModuleFactory) {
 		this._restoreFromUnsafeCache(unsafeCacheData, normalModuleFactory);
 	}
@@ -576,13 +630,25 @@ class ExternalModule extends Module {
 		return { request, externalType };
 	}
 
+	/**
+	 * @private
+	 * @param {string | string[]} request request
+	 * @param {string} externalType the external type
+	 * @param {RuntimeTemplate} runtimeTemplate the runtime template
+	 * @param {ModuleGraph} moduleGraph the module graph
+	 * @param {ChunkGraph} chunkGraph the chunk graph
+	 * @param {RuntimeSpec} runtime the runtime
+	 * @param {DependencyMeta | undefined} dependencyMeta the dependency meta
+	 * @returns {SourceData} the source data
+	 */
 	_getSourceData(
 		request,
 		externalType,
 		runtimeTemplate,
 		moduleGraph,
 		chunkGraph,
-		runtime
+		runtime,
+		dependencyMeta
 	) {
 		switch (externalType) {
 			case "this":
@@ -600,10 +666,12 @@ class ExternalModule extends Module {
 			case "commonjs-static":
 				return getSourceForCommonJsExternal(request);
 			case "node-commonjs":
-				return this.buildInfo.module
+				return /** @type {BuildInfo} */ (this.buildInfo).module
 					? getSourceForCommonJsExternalInNodeModule(
 							request,
-							runtimeTemplate.outputOptions.importMetaName
+							/** @type {string} */ (
+								runtimeTemplate.outputOptions.importMetaName
+							)
 						)
 					: getSourceForCommonJsExternal(request);
 			case "amd":
@@ -621,11 +689,15 @@ class ExternalModule extends Module {
 				);
 			}
 			case "import":
-				return getSourceForImportExternal(request, runtimeTemplate);
+				return getSourceForImportExternal(
+					request,
+					runtimeTemplate,
+					/** @type {ImportDependencyMeta} */ (dependencyMeta)
+				);
 			case "script":
 				return getSourceForScriptExternal(request, runtimeTemplate);
 			case "module": {
-				if (!this.buildInfo.module) {
+				if (!(/** @type {BuildInfo} */ (this.buildInfo).module)) {
 					if (!runtimeTemplate.supportsDynamicImport()) {
 						throw new Error(
 							"The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script" +
@@ -634,7 +706,11 @@ class ExternalModule extends Module {
 									: "")
 						);
 					}
-					return getSourceForImportExternal(request, runtimeTemplate);
+					return getSourceForImportExternal(
+						request,
+						runtimeTemplate,
+						/** @type {ImportDependencyMeta} */ (dependencyMeta)
+					);
 				}
 				if (!runtimeTemplate.supportsEcmaScriptModuleSyntax()) {
 					throw new Error(
@@ -645,7 +721,8 @@ class ExternalModule extends Module {
 					request,
 					moduleGraph.getExportsInfo(this),
 					runtime,
-					runtimeTemplate
+					runtimeTemplate,
+					/** @type {ImportDependencyMeta} */ (dependencyMeta)
 				);
 			}
 			case "var":
@@ -687,9 +764,24 @@ class ExternalModule extends Module {
 			}
 			case "css-import": {
 				const sources = new Map();
+				const dependencyMeta = /** @type {CssImportDependencyMeta} */ (
+					this.dependencyMeta
+				);
+				const layer =
+					dependencyMeta.layer !== undefined
+						? ` layer(${dependencyMeta.layer})`
+						: "";
+				const supports = dependencyMeta.supports
+					? ` supports(${dependencyMeta.supports})`
+					: "";
+				const media = dependencyMeta.media ? ` ${dependencyMeta.media}` : "";
 				sources.set(
 					"css-import",
-					new RawSource(`@import url(${JSON.stringify(request)});`)
+					new RawSource(
+						`@import url(${JSON.stringify(
+							request
+						)})${layer}${supports}${media};`
+					)
 				);
 				return {
 					sources,
@@ -703,7 +795,8 @@ class ExternalModule extends Module {
 					runtimeTemplate,
 					moduleGraph,
 					chunkGraph,
-					runtime
+					runtime,
+					this.dependencyMeta
 				);
 
 				let sourceString = sourceData.expression;
@@ -791,6 +884,7 @@ class ExternalModule extends Module {
 		write(this.request);
 		write(this.externalType);
 		write(this.userRequest);
+		write(this.dependencyMeta);
 
 		super.serialize(context);
 	}
@@ -804,6 +898,7 @@ class ExternalModule extends Module {
 		this.request = read();
 		this.externalType = read();
 		this.userRequest = read();
+		this.dependencyMeta = read();
 
 		super.deserialize(context);
 	}