webpack 5.103.0 → 5.104.0

package/lib/config/defaults.js

@@ -7,6 +7,11 @@
 
 const fs = require("fs");
 const path = require("path");
+const {
+	CSS_TYPE,
+	JAVASCRIPT_TYPE,
+	UNKNOWN_TYPE
+} = require("../ModuleSourceTypeConstants");
 const {
 	ASSET_MODULE_TYPE,
 	ASSET_MODULE_TYPE_BYTES,
@@ -52,6 +57,9 @@ const {
 /** @typedef {import("../../declarations/WebpackOptions").LibraryType} LibraryType */
 /** @typedef {import("../../declarations/WebpackOptions").Loader} Loader */
 /** @typedef {import("../../declarations/WebpackOptions").Mode} Mode */
+/** @typedef {import("../../declarations/WebpackOptions").HashSalt} HashSalt */
+/** @typedef {import("../../declarations/WebpackOptions").HashSalt} HashDigest */
+/** @typedef {import("../../declarations/WebpackOptions").HashDigestLength} HashDigestLength */
 /** @typedef {import("../../declarations/WebpackOptions").ModuleOptionsNormalized} ModuleOptions */
 /** @typedef {import("../../declarations/WebpackOptions").Node} WebpackNode */
 /** @typedef {import("../../declarations/WebpackOptions").OptimizationNormalized} Optimization */
@@ -390,6 +398,15 @@ const applyWebpackOptionsDefaults = (options, compilerIndex) => {
 
 	applyModuleDefaults(options.module, {
 		cache,
+		hashSalt: /** @type {NonNullable<Output["hashSalt"]>} */ (
+			options.output.hashSalt
+		),
+		hashDigest: /** @type {NonNullable<Output["hashDigest"]>} */ (
+			options.output.hashDigest
+		),
+		hashDigestLength: /** @type {NonNullable<Output["hashDigestLength"]>} */ (
+			options.output.hashDigestLength
+		),
 		syncWebAssembly:
 			/** @type {NonNullable<ExperimentsNormalized["syncWebAssembly"]>} */
 			(options.experiments.syncWebAssembly),
@@ -766,11 +783,17 @@ const applyCssGeneratorOptionsDefaults = (
  * @param {boolean} options.deferImport is defer import enabled
  * @param {TargetProperties | false} options.targetProperties target properties
  * @param {Mode | undefined} options.mode mode
+ * @param {HashSalt} options.hashSalt hash salt
+ * @param {HashDigest} options.hashDigest hash digest
+ * @param {HashDigestLength} options.hashDigestLength hash digest length
  * @returns {void}
  */
 const applyModuleDefaults = (
 	module,
 	{
+		hashSalt,
+		hashDigest,
+		hashDigestLength,
 		cache,
 		syncWebAssembly,
 		asyncWebAssembly,
@@ -871,6 +894,51 @@ const applyModuleDefaults = (
 			true
 		);
 
+		for (const type of [
+			CSS_MODULE_TYPE_AUTO,
+			CSS_MODULE_TYPE_MODULE,
+			CSS_MODULE_TYPE_GLOBAL
+		]) {
+			F(module.parser, type, () => ({}));
+
+			D(
+				/** @type {NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_GLOBAL]>} */
+				(module.parser[type]),
+				"animation",
+				true
+			);
+			D(
+				/** @type {NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_GLOBAL]>} */
+				(module.parser[type]),
+				"container",
+				true
+			);
+			D(
+				/** @type {NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_GLOBAL]>} */
+				(module.parser[type]),
+				"customIdents",
+				true
+			);
+			D(
+				/** @type {NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_GLOBAL]>} */
+				(module.parser[type]),
+				"dashedIdents",
+				true
+			);
+			D(
+				/** @type {NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_GLOBAL]>} */
+				(module.parser[type]),
+				"function",
+				true
+			);
+			D(
+				/** @type {NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_GLOBAL]>} */
+				(module.parser[type]),
+				"grid",
+				true
+			);
+		}
+
 		F(module.generator, CSS_MODULE_TYPE, () => ({}));
 
 		applyCssGeneratorOptionsDefaults(
@@ -880,49 +948,58 @@ const applyModuleDefaults = (
 		);
 
 		const localIdentName =
-			uniqueName.length > 0 ? "[uniqueName]-[id]-[local]" : "[id]-[local]";
+			mode === "development"
+				? uniqueName.length > 0
+					? "[uniqueName]-[id]-[local]"
+					: "[id]-[local]"
+				: "[fullhash]";
+		const localIdentHashSalt = hashSalt;
+		const localIdentHashDigest = "base64url";
+		const localIdentHashDigestLength = 6;
+		const exportsConvention = "as-is";
+
+		for (const type of [
+			CSS_MODULE_TYPE_AUTO,
+			CSS_MODULE_TYPE_MODULE,
+			CSS_MODULE_TYPE_GLOBAL
+		]) {
+			F(module.generator, type, () => ({}));
 
-		F(module.generator, CSS_MODULE_TYPE_AUTO, () => ({}));
-		D(
-			/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]>} */
-			(module.generator[CSS_MODULE_TYPE_AUTO]),
-			"localIdentName",
-			localIdentName
-		);
-		D(
-			/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]>} */
-			(module.generator[CSS_MODULE_TYPE_AUTO]),
-			"exportsConvention",
-			"as-is"
-		);
+			D(
+				/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]> | NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]> | NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_GLOBAL]>} */
+				(module.generator[type]),
+				"localIdentName",
+				localIdentName
+			);
 
-		F(module.generator, CSS_MODULE_TYPE_MODULE, () => ({}));
-		D(
-			/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]>} */
-			(module.generator[CSS_MODULE_TYPE_MODULE]),
-			"localIdentName",
-			localIdentName
-		);
-		D(
-			/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]>} */
-			(module.generator[CSS_MODULE_TYPE_MODULE]),
-			"exportsConvention",
-			"as-is"
-		);
+			D(
+				/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]> | NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]> | NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_GLOBAL]>} */
+				(module.generator[type]),
+				"localIdentHashSalt",
+				localIdentHashSalt
+			);
 
-		F(module.generator, CSS_MODULE_TYPE_GLOBAL, () => ({}));
-		D(
-			/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_GLOBAL]>} */
-			(module.generator[CSS_MODULE_TYPE_GLOBAL]),
-			"localIdentName",
-			localIdentName
-		);
-		D(
-			/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_GLOBAL]>} */
-			(module.generator[CSS_MODULE_TYPE_GLOBAL]),
-			"exportsConvention",
-			"as-is"
-		);
+			D(
+				/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]> | NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]> | NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]>} */
+				(module.generator[type]),
+				"localIdentHashDigest",
+				localIdentHashDigest
+			);
+
+			D(
+				/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]> | NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]> | NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]>} */
+				(module.generator[type]),
+				"localIdentHashDigestLength",
+				localIdentHashDigestLength
+			);
+
+			D(
+				/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]> | NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]> | NonNullable<GeneratorOptionsByModuleTypeKnown[CSS_MODULE_TYPE_GLOBAL]>} */
+				(module.generator[type]),
+				"exportsConvention",
+				exportsConvention
+			);
+		}
 	}
 
 	A(module, "defaultRules", () => {
@@ -1218,6 +1295,12 @@ const applyOutputDefaults = (
 		"const",
 		() => tp && optimistic(/** @type {boolean | undefined} */ (tp.const))
 	);
+	F(
+		environment,
+		"methodShorthand",
+		() =>
+			tp && optimistic(/** @type {boolean | undefined} */ (tp.methodShorthand))
+	);
 	F(
 		environment,
 		"arrowFunction",
@@ -1331,7 +1414,7 @@ const applyOutputDefaults = (
 		}
 		return "[id].css";
 	});
-	D(output, "assetModuleFilename", "[hash][ext][query]");
+	D(output, "assetModuleFilename", "[hash][ext][query][fragment]");
 	D(output, "webassemblyModuleFilename", "[hash].module.wasm");
 	D(output, "compareBeforeEmit", true);
 	D(output, "charset", !futureDefaults);
@@ -1516,7 +1599,7 @@ const applyOutputDefaults = (
 	 */
 	const forEachEntry = (fn) => {
 		for (const name of Object.keys(entry)) {
-			fn(/** @type {{[k: string] : EntryDescription}} */ (entry)[name]);
+			fn(/** @type {{ [k: string]: EntryDescription }} */ (entry)[name]);
 		}
 	};
 	A(output, "enabledLibraryTypes", () => {
@@ -1792,7 +1875,9 @@ const applyOptimizationDefaults = (
 	const { splitChunks } = optimization;
 	if (splitChunks) {
 		A(splitChunks, "defaultSizeTypes", () =>
-			css ? ["javascript", "css", "unknown"] : ["javascript", "unknown"]
+			css
+				? [JAVASCRIPT_TYPE, CSS_TYPE, UNKNOWN_TYPE]
+				: [JAVASCRIPT_TYPE, UNKNOWN_TYPE]
 		);
 		D(splitChunks, "hidePathInfo", production);
 		D(splitChunks, "chunks", "async");

package/lib/config/normalization.js

@@ -54,7 +54,7 @@ const nestedConfig = (value, fn) =>
 
 /**
  * @template T
- * @param {T|undefined} value value or not
+ * @param {T | undefined} value value or not
  * @returns {T} result value
  */
 const cloneObject = (value) => /** @type {T} */ ({ ...value });
@@ -90,7 +90,7 @@ const optionalNestedArray = (value, fn) =>
 /**
  * @template T
  * @template R
- * @param {Record<string, T>|undefined} value value or not
+ * @param {Record<string, T> | undefined} value value or not
  * @param {(value: T) => R} fn nested handler
  * @param {Record<string, (value: T) => R>=} customKeys custom nested handler for some keys
  * @returns {Record<string, R>} result value

package/lib/config/target.js

@@ -55,6 +55,7 @@ const getDefaultTarget = (context) => {
  * @property {boolean | null} globalThis has globalThis variable available
  * @property {boolean | null} bigIntLiteral big int literal syntax is available
  * @property {boolean | null} const const and let variable declarations are available
+ * @property {boolean | null} methodShorthand object method shorthand is available
  * @property {boolean | null} arrowFunction arrow functions are available
  * @property {boolean | null} forOf for of iteration is available
  * @property {boolean | null} destructuring destructuring is available
@@ -192,6 +193,7 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 				const: v(6),
 				templateLiteral: v(4),
 				optionalChaining: v(14),
+				methodShorthand: v(4),
 				arrowFunction: v(6),
 				asyncFunction: v(7, 6),
 				forOf: v(5),
@@ -240,6 +242,7 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 				const: v(1, 1),
 				templateLiteral: v(1, 1),
 				optionalChaining: v(8),
+				methodShorthand: v(1, 1),
 				arrowFunction: v(1, 1),
 				asyncFunction: v(1, 7),
 				forOf: v(0, 36),
@@ -278,6 +281,7 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 				const: v(0, 15),
 				templateLiteral: v(0, 13),
 				optionalChaining: v(0, 44),
+				methodShorthand: v(0, 15),
 				arrowFunction: v(0, 15),
 				asyncFunction: v(0, 21),
 				forOf: v(0, 13),
@@ -300,6 +304,7 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 				const: v >= 2015,
 				templateLiteral: v >= 2015,
 				optionalChaining: v >= 2020,
+				methodShorthand: v >= 2015,
 				arrowFunction: v >= 2015,
 				forOf: v >= 2015,
 				destructuring: v >= 2015,

package/lib/container/ContainerEntryModule.js

@@ -8,7 +8,10 @@
 const { OriginalSource, RawSource } = require("webpack-sources");
 const AsyncDependenciesBlock = require("../AsyncDependenciesBlock");
 const Module = require("../Module");
-const { JS_TYPES } = require("../ModuleSourceTypesConstants");
+const {
+	JAVASCRIPT_TYPE,
+	JAVASCRIPT_TYPES
+} = require("../ModuleSourceTypeConstants");
 const { JAVASCRIPT_MODULE_TYPE_DYNAMIC } = require("../ModuleTypeConstants");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const Template = require("../Template");
@@ -57,7 +60,7 @@ class ContainerEntryModule extends Module {
 	 * @returns {SourceTypes} types available (do not mutate)
 	 */
 	getSourceTypes() {
-		return JS_TYPES;
+		return JAVASCRIPT_TYPES;
 	}
 
 	/**
@@ -242,7 +245,7 @@ class ContainerEntryModule extends Module {
 		]);
 
 		sources.set(
-			"javascript",
+			JAVASCRIPT_TYPE,
 			this.useSourceMap || this.useSimpleSourceMap
 				? new OriginalSource(source, "webpack/container-entry")
 				: new RawSource(source)

package/lib/container/FallbackModule.js

@@ -7,7 +7,10 @@
 
 const { RawSource } = require("webpack-sources");
 const Module = require("../Module");
-const { JS_TYPES } = require("../ModuleSourceTypesConstants");
+const {
+	JAVASCRIPT_TYPE,
+	JAVASCRIPT_TYPES
+} = require("../ModuleSourceTypeConstants");
 const { WEBPACK_MODULE_TYPE_FALLBACK } = require("../ModuleTypeConstants");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const Template = require("../Template");
@@ -122,7 +125,7 @@ class FallbackModule extends Module {
 	 * @returns {SourceTypes} types available (do not mutate)
 	 */
 	getSourceTypes() {
-		return JS_TYPES;
+		return JAVASCRIPT_TYPES;
 	}
 
 	/**
@@ -156,7 +159,7 @@ class FallbackModule extends Module {
 			"module.exports = loop();"
 		]);
 		const sources = new Map();
-		sources.set("javascript", new RawSource(code));
+		sources.set(JAVASCRIPT_TYPE, new RawSource(code));
 		return { sources, runtimeRequirements: RUNTIME_REQUIREMENTS };
 	}
 

package/lib/container/RemoteModule.js

@@ -7,9 +7,7 @@
 
 const { RawSource } = require("webpack-sources");
 const Module = require("../Module");
-const {
-	REMOTE_AND_SHARE_INIT_TYPES
-} = require("../ModuleSourceTypesConstants");
+const { REMOTE_AND_SHARE_INIT_TYPES } = require("../ModuleSourceTypeConstants");
 const { WEBPACK_MODULE_TYPE_REMOTE } = require("../ModuleTypeConstants");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const makeSerializable = require("../util/makeSerializable");

package/lib/css/CssGenerator.js

@@ -12,10 +12,10 @@ const InitFragment = require("../InitFragment");
 const {
 	CSS_TYPE,
 	CSS_TYPES,
-	JS_AND_CSS_TYPES,
-	JS_TYPE,
-	JS_TYPES
-} = require("../ModuleSourceTypesConstants");
+	JAVASCRIPT_AND_CSS_TYPES,
+	JAVASCRIPT_TYPE,
+	JAVASCRIPT_TYPES
+} = require("../ModuleSourceTypeConstants");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const Template = require("../Template");
 const CssImportDependency = require("../dependencies/CssImportDependency");
@@ -23,8 +23,6 @@ const { getUndoPath } = require("../util/identifier");
 const memoize = require("../util/memoize");
 
 /** @typedef {import("webpack-sources").Source} Source */
-/** @typedef {import("../../declarations/WebpackOptions").CssAutoGeneratorOptions} CssAutoGeneratorOptions */
-/** @typedef {import("../../declarations/WebpackOptions").CssGlobalGeneratorOptions} CssGlobalGeneratorOptions */
 /** @typedef {import("../../declarations/WebpackOptions").CssModuleGeneratorOptions} CssModuleGeneratorOptions */
 /** @typedef {import("../Compilation").DependencyConstructor} DependencyConstructor */
 /** @typedef {import("../CodeGenerationResults")} CodeGenerationResults */
@@ -36,6 +34,7 @@ const memoize = require("../util/memoize");
 /** @typedef {import("../Module").BuildInfo} BuildInfo */
 /** @typedef {import("../Module").BuildMeta} BuildMeta */
 /** @typedef {import("../Module").ConcatenationBailoutReasonContext} ConcatenationBailoutReasonContext */
+/** @typedef {import("../Module").SourceType} SourceType */
 /** @typedef {import("../Module").SourceTypes} SourceTypes */
 /** @typedef {import("../ModuleGraph")} ModuleGraph */
 /** @typedef {import("../NormalModule")} NormalModule */
@@ -51,13 +50,12 @@ const getCssModulesPlugin = memoize(() => require("./CssModulesPlugin"));
 
 class CssGenerator extends Generator {
 	/**
-	 * @param {CssAutoGeneratorOptions | CssGlobalGeneratorOptions | CssModuleGeneratorOptions} options options
+	 * @param {CssModuleGeneratorOptions} options options
 	 * @param {ModuleGraph} moduleGraph the module graph
 	 */
 	constructor(options, moduleGraph) {
 		super();
-		this.convention = options.exportsConvention;
-		this.localIdentName = options.localIdentName;
+		this.options = options;
 		this._exportsOnly = options.exportsOnly;
 		this._esModule = options.esModule;
 		this._moduleGraph = moduleGraph;
@@ -127,7 +125,7 @@ class CssGenerator extends Generator {
 		const moduleSourceContent = /** @type {Source} */ (
 			this.generate(module, {
 				...generateContext,
-				type: "css"
+				type: CSS_TYPE
 			})
 		);
 
@@ -266,7 +264,7 @@ class CssGenerator extends Generator {
 	generate(module, generateContext) {
 		const exportType = /** @type {BuildMeta} */ (module.buildMeta).exportType;
 		const source =
-			generateContext.type === "javascript"
+			generateContext.type === JAVASCRIPT_TYPE
 				? exportType === "link"
 					? new ReplaceSource(new RawSource(""))
 					: new ReplaceSource(/** @type {Source} */ (module.originalSource()))
@@ -330,7 +328,7 @@ class CssGenerator extends Generator {
 		};
 
 		switch (generateContext.type) {
-			case "javascript": {
+			case JAVASCRIPT_TYPE: {
 				const isCSSModule = /** @type {BuildMeta} */ (module.buildMeta)
 					.isCSSModule;
 				const defaultExport = generateJSDefaultExport();
@@ -374,14 +372,15 @@ class CssGenerator extends Generator {
 						if (!usedName) {
 							continue;
 						}
-						let identifier = Template.toIdentifier(usedName);
 
+						let identifier = Template.toIdentifier(usedName);
 						if (RESERVED_IDENTIFIER.has(identifier)) {
 							identifier = `_${identifier}`;
 						}
-						const i = 0;
+						let i = 0;
 						while (usedIdentifiers.has(identifier)) {
 							identifier = Template.toIdentifier(name + i);
+							i += 1;
 						}
 						usedIdentifiers.add(identifier);
 						generateContext.concatenationScope.registerExport(name, identifier);
@@ -428,7 +427,7 @@ class CssGenerator extends Generator {
 					}.exports = {\n${exports.join(",\n")}\n}${needNsObj ? ")" : ""};`
 				);
 			}
-			case "css": {
+			case CSS_TYPE: {
 				if (!this._generatesJsOnly(module)) {
 					generateContext.runtimeRequirements.add(RuntimeGlobals.hasCssModules);
 				}
@@ -448,12 +447,12 @@ class CssGenerator extends Generator {
 	 */
 	generateError(error, module, generateContext) {
 		switch (generateContext.type) {
-			case "javascript": {
+			case JAVASCRIPT_TYPE: {
 				return new RawSource(
 					`throw new Error(${JSON.stringify(error.message)});`
 				);
 			}
-			case "css": {
+			case CSS_TYPE: {
 				return new RawSource(`/**\n ${error.message} \n**/`);
 			}
 			default:
@@ -467,32 +466,35 @@ class CssGenerator extends Generator {
 	 */
 	getTypes(module) {
 		if (this._generatesJsOnly(module)) {
-			return JS_TYPES;
+			return JAVASCRIPT_TYPES;
 		}
 		const sourceTypes = new Set();
 		const connections = this._moduleGraph.getIncomingConnections(module);
 		for (const connection of connections) {
+			if (connection.dependency instanceof CssImportDependency) {
+				continue;
+			}
 			if (!connection.originModule) {
 				continue;
 			}
 			if (connection.originModule.type.split("/")[0] !== CSS_TYPE) {
-				sourceTypes.add(JS_TYPE);
+				sourceTypes.add(JAVASCRIPT_TYPE);
 			}
 		}
-		if (sourceTypes.has(JS_TYPE)) {
-			return JS_AND_CSS_TYPES;
+		if (sourceTypes.has(JAVASCRIPT_TYPE)) {
+			return JAVASCRIPT_AND_CSS_TYPES;
 		}
 		return CSS_TYPES;
 	}
 
 	/**
 	 * @param {NormalModule} module the module
-	 * @param {string=} type source type
+	 * @param {SourceType=} type source type
 	 * @returns {number} estimate size of the module
 	 */
 	getSize(module, type) {
 		switch (type) {
-			case "javascript": {
+			case JAVASCRIPT_TYPE: {
 				const cssData = /** @type {BuildInfo} */ (module.buildInfo).cssData;
 				if (!cssData) {
 					return 42;
@@ -513,7 +515,7 @@ class CssGenerator extends Generator {
 
 				return stringifiedExports.length + 42;
 			}
-			case "css": {
+			case CSS_TYPE: {
 				const originalSource = module.originalSource();
 
 				if (!originalSource) {

package/lib/css/CssLoadingRuntimeModule.js

@@ -7,6 +7,7 @@
 
 const { SyncWaterfallHook } = require("tapable");
 const Compilation = require("../Compilation");
+const { CSS_TYPE } = require("../ModuleSourceTypeConstants");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const RuntimeModule = require("../RuntimeModule");
 const Template = require("../Template");
@@ -86,7 +87,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 			 * @returns {boolean} true, if the chunk has css
 			 */
 			(chunk, chunkGraph) =>
-				Boolean(chunkGraph.getChunkModulesIterableBySourceType(chunk, "css"))
+				Boolean(chunkGraph.getChunkModulesIterableBySourceType(chunk, CSS_TYPE))
 		);
 		const hasCssMatcher = compileBooleanMatcher(conditionMap);
 
@@ -429,7 +430,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 								"while(oldTags.length) {",
 								Template.indent([
 									"var oldTag = oldTags.pop();",
-									"if(oldTag.parentNode) oldTag.parentNode.removeChild(oldTag);"
+									"if(oldTag && oldTag.parentNode) oldTag.parentNode.removeChild(oldTag);"
 								]),
 								"}"
 							])}, apply: ${runtimeTemplate.basicFunction("", [
@@ -451,17 +452,24 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 						`${
 							RuntimeGlobals.hmrDownloadUpdateHandlers
 						}.css = ${runtimeTemplate.basicFunction(
-							"chunkIds, removedChunks, removedModules, promises, applyHandlers, updatedModulesList",
+							"chunkIds, removedChunks, removedModules, promises, applyHandlers, updatedModulesList, css",
 							[
 								isNeutralPlatform
 									? "if (typeof document === 'undefined') return;"
 									: "",
 								"applyHandlers.push(applyHandler);",
+								"// Read CSS removed chunks from update manifest",
+								"var cssRemovedChunks = css && css.r;",
 								`chunkIds.forEach(${runtimeTemplate.basicFunction("chunkId", [
 									`var filename = ${RuntimeGlobals.getChunkCssFilename}(chunkId);`,
 									`var url = ${RuntimeGlobals.publicPath} + filename;`,
 									"var oldTag = loadStylesheet(chunkId, url);",
-									"if(!oldTag) return;",
+									`if(!oldTag && !${withHmr} ) return;`,
+									"// Skip if CSS was removed",
+									"if(cssRemovedChunks && cssRemovedChunks.indexOf(chunkId) >= 0) {",
+									Template.indent(["oldTags.push(oldTag);", "return;"]),
+									"}",
+									"",
 									"// create error before stack unwound to get useful stacktrace later",
 									"var error = new Error();",
 									`promises.push(new Promise(${runtimeTemplate.basicFunction(