webpack 5.90.2 → 5.91.0

package/lib/cache/IdleFileCachePlugin.js

@@ -9,12 +9,13 @@ const Cache = require("../Cache");
 const ProgressPlugin = require("../ProgressPlugin");
 
 /** @typedef {import("../Compiler")} Compiler */
+/** @typedef {import("./PackFileCacheStrategy")} PackFileCacheStrategy */
 
 const BUILD_DEPENDENCIES_KEY = Symbol();
 
 class IdleFileCachePlugin {
 	/**
-	 * @param {TODO} strategy cache strategy
+	 * @param {PackFileCacheStrategy} strategy cache strategy
 	 * @param {number} idleTimeout timeout
 	 * @param {number} idleTimeoutForInitialStore initial timeout
 	 * @param {number} idleTimeoutAfterLargeChanges timeout after changes
@@ -93,7 +94,9 @@ class IdleFileCachePlugin {
 			{ name: "IdleFileCachePlugin", stage: Cache.STAGE_DISK },
 			dependencies => {
 				pendingIdleTasks.set(BUILD_DEPENDENCIES_KEY, () =>
-					strategy.storeBuildDependencies(dependencies)
+					Promise.resolve().then(() =>
+						strategy.storeBuildDependencies(dependencies)
+					)
 				);
 			}
 		);
@@ -227,7 +230,9 @@ class IdleFileCachePlugin {
 		compiler.hooks.done.tap("IdleFileCachePlugin", stats => {
 			// 10% build overhead is ignored, as it's not cacheable
 			timeSpendInBuild *= 0.9;
-			timeSpendInBuild += stats.endTime - stats.startTime;
+			timeSpendInBuild +=
+				/** @type {number} */ (stats.endTime) -
+				/** @type {number} */ (stats.startTime);
 		});
 	}
 }

package/lib/cache/MemoryCachePlugin.js

@@ -19,7 +19,7 @@ class MemoryCachePlugin {
 	 * @returns {void}
 	 */
 	apply(compiler) {
-		/** @type {Map<string, { etag: Etag | null, data: any }>} */
+		/** @type {Map<string, { etag: Etag | null, data: any } | null>} */
 		const cache = new Map();
 		compiler.cache.hooks.store.tap(
 			{ name: "MemoryCachePlugin", stage: Cache.STAGE_MEMORY },

package/lib/cache/MemoryWithGcCachePlugin.js

@@ -13,6 +13,10 @@ const Cache = require("../Cache");
 /** @typedef {import("../Module")} Module */
 
 class MemoryWithGcCachePlugin {
+	/**
+	 * @param {Object} options Options
+	 * @param {number} options.maxGenerations max generations
+	 */
 	constructor({ maxGenerations }) {
 		this._maxGenerations = maxGenerations;
 	}
@@ -23,9 +27,9 @@ class MemoryWithGcCachePlugin {
 	 */
 	apply(compiler) {
 		const maxGenerations = this._maxGenerations;
-		/** @type {Map<string, { etag: Etag | null, data: any }>} */
+		/** @type {Map<string, { etag: Etag | null, data: any } | undefined | null>} */
 		const cache = new Map();
-		/** @type {Map<string, { entry: { etag: Etag | null, data: any }, until: number }>} */
+		/** @type {Map<string, { entry: { etag: Etag | null, data: any } | null, until: number }>} */
 		const oldCache = new Map();
 		let generation = 0;
 		let cachePosition = 0;

package/lib/cache/PackFileCacheStrategy.js

@@ -28,13 +28,16 @@ const {
 /** @typedef {import("../util/fs").IntermediateFileSystem} IntermediateFileSystem */
 
 /** @typedef {Map<string, string | false>} ResolveResults */
+/** @typedef {Set<string>} Items */
+/** @typedef {Set<string>} BuildDependencies */
+/** @typedef {Map<string, PackItemInfo>} ItemInfo */
 
 class PackContainer {
 	/**
 	 * @param {Object} data stored data
 	 * @param {string} version version identifier
 	 * @param {Snapshot} buildSnapshot snapshot of all build dependencies
-	 * @param {Set<string>} buildDependencies list of all unresolved build dependencies captured
+	 * @param {BuildDependencies} buildDependencies list of all unresolved build dependencies captured
 	 * @param {ResolveResults} resolveResults result of the resolved build dependencies
 	 * @param {Snapshot} resolveBuildDependenciesSnapshot snapshot of the dependencies of the build dependencies resolving
 	 */
@@ -54,13 +57,17 @@ class PackContainer {
 		this.resolveBuildDependenciesSnapshot = resolveBuildDependenciesSnapshot;
 	}
 
+	/**
+	 * @param {ObjectSerializerContext} context context
+	 */
 	serialize({ write, writeLazy }) {
 		write(this.version);
 		write(this.buildSnapshot);
 		write(this.buildDependencies);
 		write(this.resolveResults);
 		write(this.resolveBuildDependenciesSnapshot);
-		writeLazy(this.data);
+		/** @type {NonNullable<ObjectSerializerContext["writeLazy"]>} */
+		(writeLazy)(this.data);
 	}
 
 	/**
@@ -104,13 +111,17 @@ class PackItemInfo {
 }
 
 class Pack {
+	/**
+	 * @param {Logger} logger a logger
+	 * @param {number} maxAge max age of cache items
+	 */
 	constructor(logger, maxAge) {
-		/** @type {Map<string, PackItemInfo>} */
+		/** @type {ItemInfo} */
 		this.itemInfo = new Map();
 		/** @type {(string | undefined)[]} */
 		this.requests = [];
 		this.requestsTimeout = undefined;
-		/** @type {Map<string, PackItemInfo>} */
+		/** @type {ItemInfo} */
 		this.freshContent = new Map();
 		/** @type {(undefined | PackContent)[]} */
 		this.content = [];
@@ -224,12 +235,18 @@ class Pack {
 		return i;
 	}
 
+	/**
+	 * @private
+	 * @param {Items} items items
+	 * @param {Items} usedItems used items
+	 * @param {number} newLoc new location
+	 */
 	_gcAndUpdateLocation(items, usedItems, newLoc) {
 		let count = 0;
 		let lastGC;
 		const now = Date.now();
 		for (const identifier of items) {
-			const info = this.itemInfo.get(identifier);
+			const info = /** @type {PackItemInfo} */ (this.itemInfo.get(identifier));
 			if (now - info.lastAccess > this.maxAge) {
 				this.itemInfo.delete(identifier);
 				items.delete(identifier);
@@ -263,7 +280,7 @@ class Pack {
 				const loc = this._findLocation();
 				this.content[loc] = null; // reserve
 				const pack = {
-					/** @type {Set<string>} */
+					/** @type {Items} */
 					items: new Set(),
 					/** @type {Map<string, any>} */
 					map: new Map(),
@@ -372,9 +389,9 @@ class Pack {
 		}
 
 		// 4. Determine merged items
-		/** @type {Set<string>} */
+		/** @type {Items} */
 		const mergedItems = new Set();
-		/** @type {Set<string>} */
+		/** @type {Items} */
 		const mergedUsedItems = new Set();
 		/** @type {(function(Map<string, any>): Promise<void>)[]} */
 		const addToMergedMap = [];
@@ -544,6 +561,9 @@ class Pack {
 		}
 	}
 
+	/**
+	 * @param {ObjectSerializerContext} context context
+	 */
 	serialize({ write, writeSeparate }) {
 		this._persistFreshContent();
 		this._optimizeSmallContent();
@@ -571,6 +591,9 @@ class Pack {
 		write(null); // null as marker of the end of items
 	}
 
+	/**
+	 * @param {ObjectDeserializerContext & { logger: Logger }} context context
+	 */
 	deserialize({ read, logger }) {
 		this.logger = logger;
 		{
@@ -629,6 +652,9 @@ class PackContentItems {
 		this.map = map;
 	}
 
+	/**
+	 * @param {ObjectSerializerContext & { snapshot: TODO, rollback: TODO, logger: Logger, profile: boolean | undefined  }} context context
+	 */
 	serialize({ write, snapshot, rollback, logger, profile }) {
 		if (profile) {
 			write(false);
@@ -695,6 +721,9 @@ class PackContentItems {
 		}
 	}
 
+	/**
+	 * @param {ObjectDeserializerContext & { logger: Logger, profile: boolean | undefined }} context context
+	 */
 	deserialize({ read, logger, profile }) {
 		if (read()) {
 			this.map = read();
@@ -760,17 +789,17 @@ class PackContent {
 	*/
 
 	/**
-	 * @param {Set<string>} items keys
-	 * @param {Set<string>} usedItems used keys
+	 * @param {Items} items keys
+	 * @param {Items} usedItems used keys
 	 * @param {PackContentItems | function(): Promise<PackContentItems>} dataOrFn sync or async content
 	 * @param {Logger=} logger logger for logging
 	 * @param {string=} lazyName name of dataOrFn for logging
 	 */
 	constructor(items, usedItems, dataOrFn, logger, lazyName) {
 		this.items = items;
-		/** @type {function(): Promise<PackContentItems> | PackContentItems} */
+		/** @type {(function(): Promise<PackContentItems> | PackContentItems) | undefined} */
 		this.lazy = typeof dataOrFn === "function" ? dataOrFn : undefined;
-		/** @type {Map<string, any>} */
+		/** @type {Map<string, any> | undefined} */
 		this.content = typeof dataOrFn === "function" ? undefined : dataOrFn.map;
 		this.outdated = false;
 		this.used = usedItems;
@@ -778,6 +807,10 @@ class PackContent {
 		this.lazyName = lazyName;
 	}
 
+	/**
+	 * @param {string} identifier identifier
+	 * @returns {string | Promise<string>} result
+	 */
 	get(identifier) {
 		this.used.add(identifier);
 		if (this.content) {
@@ -1049,7 +1082,7 @@ class PackFileCacheStrategy {
 					? ".pack.gz"
 					: ".pack";
 		this.snapshot = snapshot;
-		/** @type {Set<string>} */
+		/** @type {BuildDependencies} */
 		this.buildDependencies = new Set();
 		/** @type {LazySet<string>} */
 		this.newBuildDependencies = new LazySet();
@@ -1081,9 +1114,9 @@ class PackFileCacheStrategy {
 		const { logger, profile, cacheLocation, version } = this;
 		/** @type {Snapshot} */
 		let buildSnapshot;
-		/** @type {Set<string>} */
+		/** @type {BuildDependencies} */
 		let buildDependencies;
-		/** @type {Set<string>} */
+		/** @type {BuildDependencies} */
 		let newBuildDependencies;
 		/** @type {Snapshot} */
 		let resolveBuildDependenciesSnapshot;
@@ -1272,7 +1305,7 @@ class PackFileCacheStrategy {
 	}
 
 	/**
-	 * @param {LazySet<string>} dependencies dependencies to store
+	 * @param {LazySet<string> | Iterable<string>} dependencies dependencies to store
 	 */
 	storeBuildDependencies(dependencies) {
 		if (this.readonly) return;

package/lib/cache/ResolverCachePlugin.js

@@ -8,7 +8,7 @@
 const LazySet = require("../util/LazySet");
 const makeSerializable = require("../util/makeSerializable");
 
-/** @typedef {import("enhanced-resolve/lib/Resolver")} Resolver */
+/** @typedef {import("enhanced-resolve").Resolver} Resolver */
 /** @typedef {import("../CacheFacade").ItemCacheFacade} ItemCacheFacade */
 /** @typedef {import("../Compiler")} Compiler */
 /** @typedef {import("../FileSystemInfo")} FileSystemInfo */
@@ -213,7 +213,10 @@ class ResolverCachePlugin {
 								stage: -100
 							},
 							(request, resolveContext, callback) => {
-								if (request._ResolverCachePluginCacheMiss || !fileSystemInfo) {
+								if (
+									/** @type {TODO} */ (request)._ResolverCachePluginCacheMiss ||
+									!fileSystemInfo
+								) {
 									return callback();
 								}
 								const withYield = typeof resolveContext.yield === "function";
@@ -225,7 +228,9 @@ class ResolverCachePlugin {
 									const activeRequest = activeRequestsWithYield.get(identifier);
 									if (activeRequest) {
 										activeRequest[0].push(callback);
-										activeRequest[1].push(resolveContext.yield);
+										activeRequest[1].push(
+											/** @type {TODO} */ (resolveContext.yield)
+										);
 										return;
 									}
 								} else {
@@ -303,19 +308,22 @@ class ResolverCachePlugin {
 												cachedResolves++;
 												if (resolveContext.missingDependencies) {
 													addAllToSet(
-														resolveContext.missingDependencies,
+														/** @type {LazySet<string>} */
+														(resolveContext.missingDependencies),
 														snapshot.getMissingIterable()
 													);
 												}
 												if (resolveContext.fileDependencies) {
 													addAllToSet(
-														resolveContext.fileDependencies,
+														/** @type {LazySet<string>} */
+														(resolveContext.fileDependencies),
 														snapshot.getFileIterable()
 													);
 												}
 												if (resolveContext.contextDependencies) {
 													addAllToSet(
-														resolveContext.contextDependencies,
+														/** @type {LazySet<string>} */
+														(resolveContext.contextDependencies),
 														snapshot.getContextIterable()
 													);
 												}

package/lib/cache/getLazyHashedEtag.js

@@ -47,7 +47,7 @@ const mapObjects = new WeakMap();
 
 /**
  * @param {HashableObject} obj object with updateHash method
- * @param {string | HashConstructor} hashFunction the hash function to use
+ * @param {(string | HashConstructor)=} hashFunction the hash function to use
  * @returns {LazyHashedEtag} etag
  */
 const getter = (obj, hashFunction = "md4") => {

package/lib/config/defaults.js

@@ -472,7 +472,6 @@ const applySnapshotDefaults = (snapshot, { production, futureDefaults }) => {
 			}
 			return [];
 		});
-		F(snapshot, "unmanagedPaths", () => []);
 		A(snapshot, "immutablePaths", () => {
 			if (process.versions.pnp === "1") {
 				const match =
@@ -494,6 +493,7 @@ const applySnapshotDefaults = (snapshot, { production, futureDefaults }) => {
 			return [];
 		});
 	}
+	F(snapshot, "unmanagedPaths", () => []);
 	F(snapshot, "resolveBuildDependencies", () => ({
 		timestamp: true,
 		hash: true
@@ -554,6 +554,7 @@ const applyCssGeneratorOptionsDefaults = (
 		"exportsOnly",
 		!targetProperties || !targetProperties.document
 	);
+	D(generatorOptions, "exportsConvention", "as-is");
 };
 
 /**
@@ -641,6 +642,27 @@ const applyModuleDefaults = (
 			(module.generator.css),
 			{ targetProperties }
 		);
+
+		F(module.generator, "css/auto", () => ({}));
+		D(
+			module.generator["css/auto"],
+			"localIdentName",
+			"[uniqueName]-[id]-[local]"
+		);
+
+		F(module.generator, "css/module", () => ({}));
+		D(
+			module.generator["css/module"],
+			"localIdentName",
+			"[uniqueName]-[id]-[local]"
+		);
+
+		F(module.generator, "css/global", () => ({}));
+		D(
+			module.generator["css/global"],
+			"localIdentName",
+			"[uniqueName]-[id]-[local]"
+		);
 	}
 
 	A(module, "defaultRules", () => {
@@ -901,6 +923,7 @@ const applyOutputDefaults = (
 		}
 		return "[id].css";
 	});
+	D(output, "cssHeadDataCompression", !development);
 	D(output, "assetModuleFilename", "[hash][ext][query]");
 	D(output, "webassemblyModuleFilename", "[hash].module.wasm");
 	D(output, "compareBeforeEmit", true);

package/lib/config/normalization.js

@@ -320,6 +320,7 @@ const getNormalizedWebpackOptions = config => {
 				chunkLoadTimeout: output.chunkLoadTimeout,
 				cssFilename: output.cssFilename,
 				cssChunkFilename: output.cssChunkFilename,
+				cssHeadDataCompression: output.cssHeadDataCompression,
 				clean: output.clean,
 				compareBeforeEmit: output.compareBeforeEmit,
 				crossOriginLoading: output.crossOriginLoading,
@@ -446,7 +447,8 @@ const getNormalizedWebpackOptions = config => {
 				hash: module.hash
 			})),
 			immutablePaths: optionalNestedArray(snapshot.immutablePaths, p => [...p]),
-			managedPaths: optionalNestedArray(snapshot.managedPaths, p => [...p])
+			managedPaths: optionalNestedArray(snapshot.managedPaths, p => [...p]),
+			unmanagedPaths: optionalNestedArray(snapshot.unmanagedPaths, p => [...p])
 		})),
 		stats: nestedConfig(config.stats, stats => {
 			if (stats === false) {

package/lib/container/ContainerEntryDependency.js

@@ -9,11 +9,12 @@ const Dependency = require("../Dependency");
 const makeSerializable = require("../util/makeSerializable");
 
 /** @typedef {import("./ContainerEntryModule").ExposeOptions} ExposeOptions */
+/** @typedef {import("./ContainerEntryModule").ExposesList} ExposesList */
 
 class ContainerEntryDependency extends Dependency {
 	/**
 	 * @param {string} name entry name
-	 * @param {[string, ExposeOptions][]} exposes list of exposed modules
+	 * @param {ExposesList} exposes list of exposed modules
 	 * @param {string} shareScope name of the share scope
 	 */
 	constructor(name, exposes, shareScope) {

package/lib/container/ContainerEntryModule.js

@@ -23,6 +23,7 @@ const ContainerExposedDependency = require("./ContainerExposedDependency");
 /** @typedef {import("../Module").CodeGenerationResult} CodeGenerationResult */
 /** @typedef {import("../Module").LibIdentOptions} LibIdentOptions */
 /** @typedef {import("../Module").NeedBuildContext} NeedBuildContext */
+/** @typedef {import("../Module").SourceTypes} SourceTypes */
 /** @typedef {import("../RequestShortener")} RequestShortener */
 /** @typedef {import("../ResolverFactory").ResolverWithOptions} ResolverWithOptions */
 /** @typedef {import("../WebpackError")} WebpackError */
@@ -38,12 +39,14 @@ const ContainerExposedDependency = require("./ContainerExposedDependency");
  * @property {string} name custom chunk name for the exposed module
  */
 
+/** @typedef {[string, ExposeOptions][]} ExposesList */
+
 const SOURCE_TYPES = new Set(["javascript"]);
 
 class ContainerEntryModule extends Module {
 	/**
 	 * @param {string} name container entry name
-	 * @param {[string, ExposeOptions][]} exposes list of exposed modules
+	 * @param {ExposesList} exposes list of exposed modules
 	 * @param {string} shareScope name of the share scope
 	 */
 	constructor(name, exposes, shareScope) {
@@ -54,7 +57,7 @@ class ContainerEntryModule extends Module {
 	}
 
 	/**
-	 * @returns {Set<string>} types available (do not mutate)
+	 * @returns {SourceTypes} types available (do not mutate)
 	 */
 	getSourceTypes() {
 		return SOURCE_TYPES;

package/lib/container/ContainerPlugin.js

@@ -13,6 +13,8 @@ const { parseOptions } = require("./options");
 
 /** @typedef {import("../../declarations/plugins/container/ContainerPlugin").ContainerPluginOptions} ContainerPluginOptions */
 /** @typedef {import("../Compiler")} Compiler */
+/** @typedef {import("./ContainerEntryModule").ExposeOptions} ExposeOptions */
+/** @typedef {import("./ContainerEntryModule").ExposesList} ExposesList */
 
 const validate = createSchemaValidation(
 	require("../../schemas/plugins/container/ContainerPlugin.check.js"),
@@ -41,16 +43,18 @@ class ContainerPlugin {
 			},
 			runtime: options.runtime,
 			filename: options.filename || undefined,
-			exposes: parseOptions(
-				options.exposes,
-				item => ({
-					import: Array.isArray(item) ? item : [item],
-					name: undefined
-				}),
-				item => ({
-					import: Array.isArray(item.import) ? item.import : [item.import],
-					name: item.name || undefined
-				})
+			exposes: /** @type {ExposesList} */ (
+				parseOptions(
+					options.exposes,
+					item => ({
+						import: Array.isArray(item) ? item : [item],
+						name: undefined
+					}),
+					item => ({
+						import: Array.isArray(item.import) ? item.import : [item.import],
+						name: item.name || undefined
+					})
+				)
 			)
 		};
 	}

package/lib/container/FallbackModule.js

@@ -22,6 +22,7 @@ const FallbackItemDependency = require("./FallbackItemDependency");
 /** @typedef {import("../Module").CodeGenerationResult} CodeGenerationResult */
 /** @typedef {import("../Module").LibIdentOptions} LibIdentOptions */
 /** @typedef {import("../Module").NeedBuildContext} NeedBuildContext */
+/** @typedef {import("../Module").SourceTypes} SourceTypes */
 /** @typedef {import("../RequestShortener")} RequestShortener */
 /** @typedef {import("../ResolverFactory").ResolverWithOptions} ResolverWithOptions */
 /** @typedef {import("../WebpackError")} WebpackError */
@@ -116,7 +117,7 @@ class FallbackModule extends Module {
 	}
 
 	/**
-	 * @returns {Set<string>} types available (do not mutate)
+	 * @returns {SourceTypes} types available (do not mutate)
 	 */
 	getSourceTypes() {
 		return TYPES;
@@ -128,7 +129,7 @@ class FallbackModule extends Module {
 	 */
 	codeGeneration({ runtimeTemplate, moduleGraph, chunkGraph }) {
 		const ids = this.dependencies.map(dep =>
-			chunkGraph.getModuleId(moduleGraph.getModule(dep))
+			chunkGraph.getModuleId(/** @type {Module} */ (moduleGraph.getModule(dep)))
 		);
 		const code = Template.asString([
 			`var ids = ${JSON.stringify(ids)};`,

package/lib/container/RemoteModule.js

@@ -21,6 +21,7 @@ const RemoteToExternalDependency = require("./RemoteToExternalDependency");
 /** @typedef {import("../Module").CodeGenerationResult} CodeGenerationResult */
 /** @typedef {import("../Module").LibIdentOptions} LibIdentOptions */
 /** @typedef {import("../Module").NeedBuildContext} NeedBuildContext */
+/** @typedef {import("../Module").SourceTypes} SourceTypes */
 /** @typedef {import("../RequestShortener")} RequestShortener */
 /** @typedef {import("../ResolverFactory").ResolverWithOptions} ResolverWithOptions */
 /** @typedef {import("../WebpackError")} WebpackError */
@@ -119,7 +120,7 @@ class RemoteModule extends Module {
 	}
 
 	/**
-	 * @returns {Set<string>} types available (do not mutate)
+	 * @returns {SourceTypes} types available (do not mutate)
 	 */
 	getSourceTypes() {
 		return TYPES;

package/lib/container/RemoteRuntimeModule.js

@@ -10,6 +10,9 @@ const RuntimeModule = require("../RuntimeModule");
 const Template = require("../Template");
 
 /** @typedef {import("../Chunk")} Chunk */
+/** @typedef {import("../Chunk").ChunkId} ChunkId */
+/** @typedef {import("../ChunkGraph")} ChunkGraph */
+/** @typedef {import("../Compilation")} Compilation */
 /** @typedef {import("./RemoteModule")} RemoteModule */
 
 class RemoteRuntimeModule extends RuntimeModule {
@@ -21,17 +24,23 @@ class RemoteRuntimeModule extends RuntimeModule {
 	 * @returns {string | null} runtime code
 	 */
 	generate() {
-		const { compilation, chunkGraph } = this;
+		const compilation = /** @type {Compilation} */ (this.compilation);
+		const chunkGraph = /** @type {ChunkGraph} */ (this.chunkGraph);
 		const { runtimeTemplate, moduleGraph } = compilation;
+		/** @type {Record<ChunkId, (string | number)[]>} */
 		const chunkToRemotesMapping = {};
+		/** @type {Record<string | number, [string, string, string | number | null]>} */
 		const idToExternalAndNameMapping = {};
-		for (const chunk of this.chunk.getAllAsyncChunks()) {
+		for (const chunk of /** @type {Chunk} */ (this.chunk).getAllAsyncChunks()) {
 			const modules = chunkGraph.getChunkModulesIterableBySourceType(
 				chunk,
 				"remote"
 			);
 			if (!modules) continue;
-			const remotes = (chunkToRemotesMapping[chunk.id] = []);
+			/** @type {(string | number)[]} */
+			const remotes = (chunkToRemotesMapping[
+				/** @type {ChunkId} */ (chunk.id)
+			] = []);
 			for (const m of modules) {
 				const module = /** @type {RemoteModule} */ (m);
 				const name = module.internalRequest;

package/lib/css/CssExportsGenerator.js

@@ -10,8 +10,11 @@ const { UsageState } = require("../ExportsInfo");
 const Generator = require("../Generator");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const Template = require("../Template");
+const { cssExportConvention } = require("../util/conventions");
 
 /** @typedef {import("webpack-sources").Source} Source */
+/** @typedef {import("../../declarations/WebpackOptions").CssGeneratorExportsConvention} CssGeneratorExportsConvention */
+/** @typedef {import("../../declarations/WebpackOptions").CssGeneratorLocalIdentName} CssGeneratorLocalIdentName */
 /** @typedef {import("../Dependency")} Dependency */
 /** @typedef {import("../Generator").GenerateContext} GenerateContext */
 /** @typedef {import("../Generator").UpdateHashContext} UpdateHashContext */
@@ -27,8 +30,16 @@ const Template = require("../Template");
 const TYPES = new Set(["javascript"]);
 
 class CssExportsGenerator extends Generator {
-	constructor() {
+	/**
+	 * @param {CssGeneratorExportsConvention} convention the convention of the exports name
+	 * @param {CssGeneratorLocalIdentName | undefined} localIdentName css export local ident name
+	 */
+	constructor(convention, localIdentName) {
 		super();
+		/** @type {CssGeneratorExportsConvention} */
+		this.convention = convention;
+		/** @type {CssGeneratorLocalIdentName | undefined} */
+		this.localIdentName = localIdentName;
 	}
 
 	// TODO add getConcatenationBailoutReason to allow concatenation
@@ -43,6 +54,7 @@ class CssExportsGenerator extends Generator {
 		const source = new ReplaceSource(new RawSource(""));
 		/** @type {InitFragment<TODO>[]} */
 		const initFragments = [];
+		/** @type {Map<string, string>} */
 		const cssExports = new Map();
 
 		generateContext.runtimeRequirements.add(RuntimeGlobals.module);
@@ -97,19 +109,21 @@ class CssExportsGenerator extends Generator {
 		if (generateContext.concatenationScope) {
 			const source = new ConcatSource();
 			const usedIdentifiers = new Set();
-			for (const [k, v] of cssExports) {
-				let identifier = Template.toIdentifier(k);
-				let i = 0;
-				while (usedIdentifiers.has(identifier)) {
-					identifier = Template.toIdentifier(k + i);
+			for (const [name, v] of cssExports) {
+				for (let k of cssExportConvention(name, this.convention)) {
+					let identifier = Template.toIdentifier(k);
+					let i = 0;
+					while (usedIdentifiers.has(identifier)) {
+						identifier = Template.toIdentifier(k + i);
+					}
+					usedIdentifiers.add(identifier);
+					generateContext.concatenationScope.registerExport(k, identifier);
+					source.add(
+						`${
+							generateContext.runtimeTemplate.supportsConst() ? "const" : "var"
+						} ${identifier} = ${JSON.stringify(v)};\n`
+					);
 				}
-				usedIdentifiers.add(identifier);
-				generateContext.concatenationScope.registerExport(k, identifier);
-				source.add(
-					`${
-						generateContext.runtimeTemplate.supportsConst ? "const" : "var"
-					} ${identifier} = ${JSON.stringify(v)};\n`
-				);
 			}
 			return source;
 		} else {
@@ -123,13 +137,16 @@ class CssExportsGenerator extends Generator {
 					RuntimeGlobals.makeNamespaceObject
 				);
 			}
+			const newCssExports = [];
+			for (let [k, v] of cssExports) {
+				for (let name of cssExportConvention(k, this.convention)) {
+					newCssExports.push(`\t${JSON.stringify(name)}: ${JSON.stringify(v)}`);
+				}
+			}
 			return new RawSource(
 				`${otherUsed ? `${RuntimeGlobals.makeNamespaceObject}(` : ""}${
 					module.moduleArgument
-				}.exports = {\n${Array.from(
-					cssExports,
-					([k, v]) => `\t${JSON.stringify(k)}: ${JSON.stringify(v)}`
-				).join(",\n")}\n}${otherUsed ? ")" : ""};`
+				}.exports = {\n${newCssExports.join(",\n")}\n}${otherUsed ? ")" : ""};`
 			);
 		}
 	}