webpack 5.59.0 → 5.71.0

package/lib/cache/ResolverCachePlugin.js

@@ -106,7 +106,7 @@ class ResolverCachePlugin {
 		 * @param {Resolver} resolver the resolver
 		 * @param {Object} resolveContext context for resolving meta info
 		 * @param {Object} request the request info object
-		 * @param {function(Error=, Object=): void} callback callback function
+		 * @param {function((Error | null)=, Object=): void} callback callback function
 		 * @returns {void}
 		 */
 		const doRealResolve = (
@@ -128,6 +128,13 @@ class ResolverCachePlugin {
 				fileDependencies: new LazySet(),
 				contextDependencies: new LazySet()
 			};
+			let yieldResult;
+			let withYield = false;
+			if (typeof newResolveContext.yield === "function") {
+				yieldResult = [];
+				withYield = true;
+				newResolveContext.yield = obj => yieldResult.push(obj);
+			}
 			const propagate = key => {
 				if (resolveContext[key]) {
 					addAllToSet(resolveContext[key], newResolveContext[key]);
@@ -155,15 +162,22 @@ class ResolverCachePlugin {
 						snapshotOptions,
 						(err, snapshot) => {
 							if (err) return callback(err);
+							const resolveResult = withYield ? yieldResult : result;
+							// since we intercept resolve hook
+							// we still can get result in callback
+							if (withYield && result) yieldResult.push(result);
 							if (!snapshot) {
-								if (result) return callback(null, result);
+								if (resolveResult) return callback(null, resolveResult);
 								return callback();
 							}
-							itemCache.store(new CacheEntry(result, snapshot), storeErr => {
-								if (storeErr) return callback(storeErr);
-								if (result) return callback(null, result);
-								callback();
-							});
+							itemCache.store(
+								new CacheEntry(resolveResult, snapshot),
+								storeErr => {
+									if (storeErr) return callback(storeErr);
+									if (resolveResult) return callback(null, resolveResult);
+									callback();
+								}
+							);
 						}
 					);
 				}
@@ -173,6 +187,8 @@ class ResolverCachePlugin {
 			factory(type, hook) {
 				/** @type {Map<string, (function(Error=, Object=): void)[]>} */
 				const activeRequests = new Map();
+				/** @type {Map<string, [function(Error=, Object=): void, function(Error=, Object=): void][]>} */
+				const activeRequestsWithYield = new Map();
 				hook.tap(
 					"ResolverCachePlugin",
 					/**
@@ -197,29 +213,67 @@ class ResolverCachePlugin {
 								if (request._ResolverCachePluginCacheMiss || !fileSystemInfo) {
 									return callback();
 								}
-								const identifier = `${type}${optionsIdent}${objectToString(
-									request,
-									!cacheWithContext
-								)}`;
-								const activeRequest = activeRequests.get(identifier);
-								if (activeRequest) {
-									activeRequest.push(callback);
-									return;
+								const withYield = typeof resolveContext.yield === "function";
+								const identifier = `${type}${
+									withYield ? "|yield" : "|default"
+								}${optionsIdent}${objectToString(request, !cacheWithContext)}`;
+
+								if (withYield) {
+									const activeRequest = activeRequestsWithYield.get(identifier);
+									if (activeRequest) {
+										activeRequest[0].push(callback);
+										activeRequest[1].push(resolveContext.yield);
+										return;
+									}
+								} else {
+									const activeRequest = activeRequests.get(identifier);
+									if (activeRequest) {
+										activeRequest.push(callback);
+										return;
+									}
 								}
 								const itemCache = cache.getItemCache(identifier, null);
-								let callbacks;
-								const done = (err, result) => {
-									if (callbacks === undefined) {
-										callback(err, result);
-										callbacks = false;
-									} else {
-										for (const callback of callbacks) {
-											callback(err, result);
-										}
-										activeRequests.delete(identifier);
-										callbacks = false;
-									}
-								};
+								let callbacks, yields;
+								const done = withYield
+									? (err, result) => {
+											if (callbacks === undefined) {
+												if (err) {
+													callback(err);
+												} else {
+													if (result)
+														for (const r of result) resolveContext.yield(r);
+													callback(null, null);
+												}
+												yields = undefined;
+												callbacks = false;
+											} else {
+												if (err) {
+													for (const cb of callbacks) cb(err);
+												} else {
+													for (let i = 0; i < callbacks.length; i++) {
+														const cb = callbacks[i];
+														const yield_ = yields[i];
+														if (result) for (const r of result) yield_(r);
+														cb(null, null);
+													}
+												}
+												activeRequestsWithYield.delete(identifier);
+												yields = undefined;
+												callbacks = false;
+											}
+									  }
+									: (err, result) => {
+											if (callbacks === undefined) {
+												callback(err, result);
+												callbacks = false;
+											} else {
+												for (const callback of callbacks) {
+													callback(err, result);
+												}
+												activeRequests.delete(identifier);
+												callbacks = false;
+											}
+									  };
 								/**
 								 * @param {Error=} err error if any
 								 * @param {CacheEntry=} cacheEntry cache entry
@@ -276,7 +330,14 @@ class ResolverCachePlugin {
 									}
 								};
 								itemCache.get(processCacheResult);
-								if (callbacks === undefined) {
+								if (withYield && callbacks === undefined) {
+									callbacks = [callback];
+									yields = [resolveContext.yield];
+									activeRequestsWithYield.set(
+										identifier,
+										/** @type {[any, any]} */ ([callbacks, yields])
+									);
+								} else if (callbacks === undefined) {
 									callbacks = [callback];
 									activeRequests.set(identifier, callbacks);
 								}

package/lib/cli.js

@@ -37,6 +37,7 @@ const webpackSchema = require("../schemas/WebpackOptions.json");
 /**
  * @typedef {Object} ArgumentConfig
  * @property {string} description
+ * @property {string} [negatedDescription]
  * @property {string} path
  * @property {boolean} multiple
  * @property {"enum"|"string"|"path"|"number"|"boolean"|"RegExp"|"reset"} type
@@ -96,11 +97,42 @@ const getArguments = (schema = webpackSchema) => {
 	 */
 	const getDescription = path => {
 		for (const { schema } of path) {
-			if (schema.cli && schema.cli.helper) continue;
+			if (schema.cli) {
+				if (schema.cli.helper) continue;
+				if (schema.cli.description) return schema.cli.description;
+			}
 			if (schema.description) return schema.description;
 		}
 	};
 
+	/**
+	 *
+	 * @param {PathItem[]} path path in the schema
+	 * @returns {string | undefined} negative description
+	 */
+	const getNegatedDescription = path => {
+		for (const { schema } of path) {
+			if (schema.cli) {
+				if (schema.cli.helper) continue;
+				if (schema.cli.negatedDescription) return schema.cli.negatedDescription;
+			}
+		}
+	};
+
+	/**
+	 *
+	 * @param {PathItem[]} path path in the schema
+	 * @returns {string | undefined} reset description
+	 */
+	const getResetDescription = path => {
+		for (const { schema } of path) {
+			if (schema.cli) {
+				if (schema.cli.helper) continue;
+				if (schema.cli.resetDescription) return schema.cli.resetDescription;
+			}
+		}
+	};
+
 	/**
 	 *
 	 * @param {any} schemaPart schema
@@ -142,13 +174,17 @@ const getArguments = (schema = webpackSchema) => {
 	const addResetFlag = path => {
 		const schemaPath = path[0].path;
 		const name = pathToArgumentName(`${schemaPath}.reset`);
-		const description = getDescription(path);
+		const description =
+			getResetDescription(path) ||
+			`Clear all items provided in '${schemaPath}' configuration. ${getDescription(
+				path
+			)}`;
 		flags[name] = {
 			configs: [
 				{
 					type: "reset",
 					multiple: false,
-					description: `Clear all items provided in '${schemaPath}' configuration. ${description}`,
+					description,
 					path: schemaPath
 				}
 			],
@@ -167,6 +203,7 @@ const getArguments = (schema = webpackSchema) => {
 		const argConfigBase = schemaToArgumentConfig(path[0].schema);
 		if (!argConfigBase) return 0;
 
+		const negatedDescription = getNegatedDescription(path);
 		const name = pathToArgumentName(path[0].path);
 		/** @type {ArgumentConfig} */
 		const argConfig = {
@@ -176,6 +213,10 @@ const getArguments = (schema = webpackSchema) => {
 			path: path[0].path
 		};
 
+		if (negatedDescription) {
+			argConfig.negatedDescription = negatedDescription;
+		}
+
 		if (!flags[name]) {
 			flags[name] = {
 				configs: [],

package/lib/config/browserslistTargetHandler.js

@@ -121,8 +121,7 @@ const resolve = browsers => {
 		// baidu: Not supported
 		// and_uc: Not supported
 		// kaios: Not supported
-		// Since Node.js 13.14.0 no warning about usage, but it was added 8.5.0 with some limitations and it was improved in 12.0.0 and 13.2.0
-		node: [13, 14]
+		node: [12, 17]
 	});
 
 	return {
@@ -248,8 +247,7 @@ const resolve = browsers => {
 			// baidu: Not supported
 			// and_uc: Not supported
 			// kaios: Not supported
-			// Since Node.js 13.14.0 no warning about usage, but it was added 8.5.0 with some limitations and it was improved in 12.0.0 and 13.2.0
-			node: [13, 14]
+			node: [12, 17]
 		}),
 		dynamicImport: es6DynamicImport,
 		dynamicImportInWorker: es6DynamicImport && !anyNode,
@@ -272,9 +270,46 @@ const resolve = browsers => {
 			// baidu: Unknown support
 			// and_uc: Unknown support
 			// kaios: Unknown support
-			node: [12, 0]
+			node: 12
+		}),
+		optionalChaining: rawChecker({
+			chrome: 80,
+			and_chr: 80,
+			edge: 80,
+			firefox: 74,
+			and_ff: 79,
+			// ie: Not supported,
+			opera: 67,
+			op_mob: 64,
+			safari: [13, 1],
+			ios_saf: [13, 4],
+			samsung: 13,
+			android: 80,
+			// and_qq: Not supported
+			// baidu: Not supported
+			// and_uc: Not supported
+			// kaios: Not supported
+			node: 14
+		}),
+		templateLiteral: rawChecker({
+			chrome: 41,
+			and_chr: 41,
+			edge: 13,
+			firefox: 34,
+			and_ff: 34,
+			// ie: Not supported,
+			opera: 29,
+			op_mob: 64,
+			safari: [9, 1],
+			ios_saf: 9,
+			samsung: 4,
+			android: 41,
+			and_qq: [10, 4],
+			baidu: [7, 12],
+			and_uc: [12, 12],
+			kaios: [2, 5],
+			node: 4
 		}),
-
 		browser: browserProperty,
 		electron: false,
 		node: nodeProperty,

package/lib/config/defaults.js

@@ -16,6 +16,7 @@ const {
 } = require("./target");
 
 /** @typedef {import("../../declarations/WebpackOptions").CacheOptionsNormalized} CacheOptions */
+/** @typedef {import("../../declarations/WebpackOptions").CssExperimentOptions} CssExperimentOptions */
 /** @typedef {import("../../declarations/WebpackOptions").EntryDescription} EntryDescription */
 /** @typedef {import("../../declarations/WebpackOptions").EntryNormalized} Entry */
 /** @typedef {import("../../declarations/WebpackOptions").Experiments} Experiments */
@@ -160,7 +161,11 @@ const applyWebpackOptionsDefaults = options => {
 	D(options, "recordsInputPath", false);
 	D(options, "recordsOutputPath", false);
 
-	applyExperimentsDefaults(options.experiments, { production, development });
+	applyExperimentsDefaults(options.experiments, {
+		production,
+		development,
+		targetProperties
+	});
 
 	const futureDefaults = options.experiments.futureDefaults;
 
@@ -183,7 +188,9 @@ const applyWebpackOptionsDefaults = options => {
 	applyModuleDefaults(options.module, {
 		cache,
 		syncWebAssembly: options.experiments.syncWebAssembly,
-		asyncWebAssembly: options.experiments.asyncWebAssembly
+		asyncWebAssembly: options.experiments.asyncWebAssembly,
+		css: options.experiments.css,
+		futureDefaults
 	});
 
 	applyOutputDefaults(options.output, {
@@ -238,6 +245,7 @@ const applyWebpackOptionsDefaults = options => {
 	applyOptimizationDefaults(options.optimization, {
 		development,
 		production,
+		css: options.experiments.css,
 		records: !!(options.recordsInputPath || options.recordsOutputPath)
 	});
 
@@ -262,24 +270,37 @@ const applyWebpackOptionsDefaults = options => {
  * @param {Object} options options
  * @param {boolean} options.production is production
  * @param {boolean} options.development is development mode
+ * @param {TargetProperties | false} options.targetProperties target properties
  * @returns {void}
  */
-const applyExperimentsDefaults = (experiments, { production, development }) => {
-	D(experiments, "topLevelAwait", false);
+const applyExperimentsDefaults = (
+	experiments,
+	{ production, development, targetProperties }
+) => {
+	D(experiments, "futureDefaults", false);
+	D(experiments, "backCompat", !experiments.futureDefaults);
+	D(experiments, "topLevelAwait", experiments.futureDefaults);
 	D(experiments, "syncWebAssembly", false);
-	D(experiments, "asyncWebAssembly", false);
+	D(experiments, "asyncWebAssembly", experiments.futureDefaults);
 	D(experiments, "outputModule", false);
-	D(experiments, "asset", false);
 	D(experiments, "layers", false);
 	D(experiments, "lazyCompilation", undefined);
 	D(experiments, "buildHttp", undefined);
-	D(experiments, "futureDefaults", false);
 	D(experiments, "cacheUnaffected", experiments.futureDefaults);
+	F(experiments, "css", () => (experiments.futureDefaults ? {} : undefined));
 
 	if (typeof experiments.buildHttp === "object") {
 		D(experiments.buildHttp, "frozen", production);
 		D(experiments.buildHttp, "upgrade", false);
 	}
+
+	if (typeof experiments.css === "object") {
+		D(
+			experiments.css,
+			"exportsOnly",
+			!targetProperties || !targetProperties.document
+		);
+	}
 };
 
 /**
@@ -382,7 +403,7 @@ const applySnapshotDefaults = (snapshot, { production, futureDefaults }) => {
 					return [path.resolve(match[1], "unplugged")];
 				}
 			} else {
-				const match = /^(.+?[\\/]node_modules)[\\/]/.exec(
+				const match = /^(.+?[\\/]node_modules[\\/])/.exec(
 					// eslint-disable-next-line node/no-extraneous-require
 					require.resolve("watchpack")
 				);
@@ -428,9 +449,14 @@ const applySnapshotDefaults = (snapshot, { production, futureDefaults }) => {
 
 /**
  * @param {JavascriptParserOptions} parserOptions parser options
+ * @param {Object} options options
+ * @param {boolean} options.futureDefaults is future defaults enabled
  * @returns {void}
  */
-const applyJavascriptParserOptionsDefaults = parserOptions => {
+const applyJavascriptParserOptionsDefaults = (
+	parserOptions,
+	{ futureDefaults }
+) => {
 	D(parserOptions, "unknownContextRequest", ".");
 	D(parserOptions, "unknownContextRegExp", false);
 	D(parserOptions, "unknownContextRecursive", true);
@@ -442,9 +468,9 @@ const applyJavascriptParserOptionsDefaults = parserOptions => {
 	D(parserOptions, "wrappedContextRegExp", /.*/);
 	D(parserOptions, "wrappedContextRecursive", true);
 	D(parserOptions, "wrappedContextCritical", false);
-
-	D(parserOptions, "strictExportPresence", false);
 	D(parserOptions, "strictThisContextOnImports", false);
+	D(parserOptions, "importMeta", true);
+	if (futureDefaults) D(parserOptions, "exportsPresence", "error");
 };
 
 /**
@@ -453,11 +479,13 @@ const applyJavascriptParserOptionsDefaults = parserOptions => {
  * @param {boolean} options.cache is caching enabled
  * @param {boolean} options.syncWebAssembly is syncWebAssembly enabled
  * @param {boolean} options.asyncWebAssembly is asyncWebAssembly enabled
+ * @param {CssExperimentOptions} options.css is css enabled
+ * @param {boolean} options.futureDefaults is future defaults enabled
  * @returns {void}
  */
 const applyModuleDefaults = (
 	module,
-	{ cache, syncWebAssembly, asyncWebAssembly }
+	{ cache, syncWebAssembly, asyncWebAssembly, css, futureDefaults }
 ) => {
 	if (cache) {
 		D(module, "unsafeCache", module => {
@@ -475,7 +503,9 @@ const applyModuleDefaults = (
 	}
 
 	F(module.parser, "javascript", () => ({}));
-	applyJavascriptParserOptionsDefaults(module.parser.javascript);
+	applyJavascriptParserOptionsDefaults(module.parser.javascript, {
+		futureDefaults
+	});
 
 	A(module, "defaultRules", () => {
 		const esm = {
@@ -579,6 +609,41 @@ const applyModuleDefaults = (
 				...wasm
 			});
 		}
+		if (css) {
+			const cssRule = {
+				type: "css",
+				resolve: {
+					fullySpecified: true,
+					preferRelative: true
+				}
+			};
+			const cssModulesRule = {
+				type: "css/module",
+				resolve: {
+					fullySpecified: true
+				}
+			};
+			rules.push({
+				test: /\.css$/i,
+				oneOf: [
+					{
+						test: /\.module\.css$/i,
+						...cssModulesRule
+					},
+					{
+						...cssRule
+					}
+				]
+			});
+			rules.push({
+				mimetype: "text/css+module",
+				...cssModulesRule
+			});
+			rules.push({
+				mimetype: "text/css",
+				...cssRule
+			});
+		}
 		rules.push(
 			{
 				dependency: "url",
@@ -650,7 +715,15 @@ const applyOutputDefaults = (
 	};
 
 	F(output, "uniqueName", () => {
-		const libraryName = getLibraryName(output.library);
+		const libraryName = getLibraryName(output.library).replace(
+			/^\[(\\*[\w:]+\\*)\](\.)|(\.)\[(\\*[\w:]+\\*)\](?=\.|$)|\[(\\*[\w:]+\\*)\]/g,
+			(m, a, d1, d2, b, c) => {
+				const content = a || b || c;
+				return content.startsWith("\\") && content.endsWith("\\")
+					? `${d2 || ""}[${content.slice(1, -1)}]${d1 || ""}`
+					: "";
+			}
+		);
 		if (libraryName) return libraryName;
 		const pkgPath = path.resolve(context, "package.json");
 		try {
@@ -684,6 +757,20 @@ const applyOutputDefaults = (
 		}
 		return output.module ? "[id].mjs" : "[id].js";
 	});
+	F(output, "cssFilename", () => {
+		const filename = output.filename;
+		if (typeof filename !== "function") {
+			return filename.replace(/\.[mc]?js(\?|$)/, ".css$1");
+		}
+		return "[id].css";
+	});
+	F(output, "cssChunkFilename", () => {
+		const chunkFilename = output.chunkFilename;
+		if (typeof chunkFilename !== "function") {
+			return chunkFilename.replace(/\.[mc]?js(\?|$)/, ".css$1");
+		}
+		return "[id].css";
+	});
 	D(output, "assetModuleFilename", "[hash][ext][query]");
 	D(output, "webassemblyModuleFilename", "[hash].module.wasm");
 	D(output, "compareBeforeEmit", true);
@@ -736,6 +823,7 @@ const applyOutputDefaults = (
 			"Chunk format can't be selected by default when no target is specified"
 		);
 	});
+	D(output, "asyncChunks", true);
 	F(output, "chunkLoading", () => {
 		if (tp) {
 			switch (output.chunkFormat) {
@@ -823,10 +911,11 @@ const applyOutputDefaults = (
 	D(output, "chunkLoadTimeout", 120000);
 	D(output, "hashFunction", futureDefaults ? "xxhash64" : "md4");
 	D(output, "hashDigest", "hex");
-	D(output, "hashDigestLength", 20);
+	D(output, "hashDigestLength", futureDefaults ? 16 : 20);
 	D(output, "strictModuleExceptionHandling", false);
 
 	const optimistic = v => v || v === undefined;
+	const conditionallyOptimistic = (v, c) => (v === undefined && c) || v;
 	F(
 		output.environment,
 		"arrowFunction",
@@ -840,8 +929,12 @@ const applyOutputDefaults = (
 	);
 	F(output.environment, "forOf", () => tp && optimistic(tp.forOf));
 	F(output.environment, "bigIntLiteral", () => tp && tp.bigIntLiteral);
-	F(output.environment, "dynamicImport", () => tp && tp.dynamicImport);
-	F(output.environment, "module", () => tp && tp.module);
+	F(output.environment, "dynamicImport", () =>
+		conditionallyOptimistic(tp && tp.dynamicImport, output.module)
+	);
+	F(output.environment, "module", () =>
+		conditionallyOptimistic(tp && tp.module, output.module)
+	);
 
 	const { trustedTypes } = output;
 	if (trustedTypes) {
@@ -1021,12 +1114,13 @@ const applyPerformanceDefaults = (performance, { production }) => {
  * @param {Object} options options
  * @param {boolean} options.production is production
  * @param {boolean} options.development is development
+ * @param {CssExperimentOptions} options.css is css enabled
  * @param {boolean} options.records using records
  * @returns {void}
  */
 const applyOptimizationDefaults = (
 	optimization,
-	{ production, development, records }
+	{ production, development, css, records }
 ) => {
 	D(optimization, "removeAvailableModules", false);
 	D(optimization, "removeEmptyChunks", true);
@@ -1077,7 +1171,9 @@ const applyOptimizationDefaults = (
 	});
 	const { splitChunks } = optimization;
 	if (splitChunks) {
-		A(splitChunks, "defaultSizeTypes", () => ["javascript", "unknown"]);
+		A(splitChunks, "defaultSizeTypes", () =>
+			css ? ["javascript", "css", "unknown"] : ["javascript", "unknown"]
+		);
 		D(splitChunks, "hidePathInfo", production);
 		D(splitChunks, "chunks", "async");
 		D(splitChunks, "usedExports", optimization.usedExports === true);

package/lib/config/normalization.js

@@ -180,6 +180,9 @@ const getNormalizedWebpackOptions = config => {
 				experiments.lazyCompilation,
 				options =>
 					options === true ? {} : options === false ? undefined : options
+			),
+			css: optionalNestedConfig(experiments.css, options =>
+				options === true ? {} : options === false ? undefined : options
 			)
 		})),
 		externals: config.externals,
@@ -229,6 +232,7 @@ const getNormalizedWebpackOptions = config => {
 					wrappedContextRegExp: module.wrappedContextRegExp,
 					wrappedContextRecursive: module.wrappedContextRecursive,
 					wrappedContextCritical: module.wrappedContextCritical,
+					// TODO webpack 6 remove
 					strictExportPresence: module.strictExportPresence,
 					strictThisContextOnImports: module.strictThisContextOnImports,
 					...parserOptions
@@ -289,12 +293,15 @@ const getNormalizedWebpackOptions = config => {
 			/** @type {OutputNormalized} */
 			const result = {
 				assetModuleFilename: output.assetModuleFilename,
+				asyncChunks: output.asyncChunks,
 				charset: output.charset,
 				chunkFilename: output.chunkFilename,
 				chunkFormat: output.chunkFormat,
 				chunkLoading: output.chunkLoading,
 				chunkLoadingGlobal: output.chunkLoadingGlobal,
 				chunkLoadTimeout: output.chunkLoadTimeout,
+				cssFilename: output.cssFilename,
+				cssChunkFilename: output.cssChunkFilename,
 				clean: output.clean,
 				compareBeforeEmit: output.compareBeforeEmit,
 				crossOriginLoading: output.crossOriginLoading,
@@ -481,8 +488,10 @@ const getNormalizedEntryStatic = entry => {
 				filename: value.filename,
 				layer: value.layer,
 				runtime: value.runtime,
+				baseUri: value.baseUri,
 				publicPath: value.publicPath,
 				chunkLoading: value.chunkLoading,
+				asyncChunks: value.asyncChunks,
 				wasmLoading: value.wasmLoading,
 				dependOn:
 					value.dependOn &&

package/lib/config/target.js

@@ -59,6 +59,8 @@ const getDefaultTarget = context => {
  * @property {boolean | null} dynamicImport async import() is available
  * @property {boolean | null} dynamicImportInWorker async import() is available when creating a worker
  * @property {boolean | null} module ESM syntax is available (when in module)
+ * @property {boolean | null} optionalChaining optional chaining is available
+ * @property {boolean | null} templateLiteral template literal is available
  */
 
 ///** @typedef {PlatformTargetProperties | ApiTargetProperties | EcmaTargetProperties | PlatformTargetProperties & ApiTargetProperties | PlatformTargetProperties & EcmaTargetProperties | ApiTargetProperties & EcmaTargetProperties} TargetProperties */
@@ -167,6 +169,8 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 
 				globalThis: v(12),
 				const: v(6),
+				templateLiteral: v(4),
+				optionalChaining: v(14),
 				arrowFunction: v(6),
 				forOf: v(5),
 				destructuring: v(6),
@@ -206,6 +210,8 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 
 				globalThis: v(5),
 				const: v(1, 1),
+				templateLiteral: v(1, 1),
+				optionalChaining: v(8),
 				arrowFunction: v(1, 1),
 				forOf: v(0, 36),
 				destructuring: v(1, 1),
@@ -241,6 +247,8 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 
 				globalThis: v(0, 43),
 				const: v(0, 15),
+				templateLiteral: v(0, 13),
+				optionalChaining: v(0, 44),
 				arrowFunction: v(0, 15),
 				forOf: v(0, 13),
 				destructuring: v(0, 15),
@@ -260,6 +268,8 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 			if (v < 1000) v = v + 2009;
 			return {
 				const: v >= 2015,
+				templateLiteral: v >= 2015,
+				optionalChaining: v >= 2020,
 				arrowFunction: v >= 2015,
 				forOf: v >= 2015,
 				destructuring: v >= 2015,