webpack 5.65.0 → 5.66.0

package/lib/WebpackOptionsApply.js

@@ -118,11 +118,47 @@ class WebpackOptionsApply extends OptionsApply {
 		if (options.externalsPresets.webAsync) {
 			//@ts-expect-error https://github.com/microsoft/TypeScript/issues/41697
 			const ExternalsPlugin = require("./ExternalsPlugin");
-			new ExternalsPlugin("import", /^(https?:\/\/|std:)/).apply(compiler);
+			new ExternalsPlugin(
+				"import",
+				options.experiments.css
+					? ({ request, dependencyType }, callback) => {
+							if (dependencyType === "url") {
+								if (/^(\/\/|https?:\/\/)/.test(request))
+									return callback(null, `asset ${request}`);
+							} else if (dependencyType === "css-import") {
+								if (/^(\/\/|https?:\/\/)/.test(request))
+									return callback(null, `css-import ${request}`);
+							} else if (/^(\/\/|https?:\/\/|std:)/.test(request)) {
+								if (/^\.css(\?|$)/.test(request))
+									return callback(null, `css-import ${request}`);
+								return callback(null, `import ${request}`);
+							}
+							callback();
+					  }
+					: /^(\/\/|https?:\/\/|std:)/
+			).apply(compiler);
 		} else if (options.externalsPresets.web) {
 			//@ts-expect-error https://github.com/microsoft/TypeScript/issues/41697
 			const ExternalsPlugin = require("./ExternalsPlugin");
-			new ExternalsPlugin("module", /^(https?:\/\/|std:)/).apply(compiler);
+			new ExternalsPlugin(
+				"module",
+				options.experiments.css
+					? ({ request, dependencyType }, callback) => {
+							if (dependencyType === "url") {
+								if (/^(\/\/|https?:\/\/)/.test(request))
+									return callback(null, `asset ${request}`);
+							} else if (dependencyType === "css-import") {
+								if (/^(\/\/|https?:\/\/)/.test(request))
+									return callback(null, `css-import ${request}`);
+							} else if (/^(\/\/|https?:\/\/|std:)/.test(request)) {
+								if (/^\.css(\?|$)/.test(request))
+									return callback(null, `css-import ${request}`);
+								return callback(null, `module ${request}`);
+							}
+							callback();
+					  }
+					: /^(\/\/|https?:\/\/|std:)/
+			).apply(compiler);
 		}
 
 		new ChunkPrefetchPreloadPlugin().apply(compiler);
@@ -253,6 +289,11 @@ class WebpackOptionsApply extends OptionsApply {
 			}).apply(compiler);
 		}
 
+		if (options.experiments.css) {
+			const CssModulesPlugin = require("./css/CssModulesPlugin");
+			new CssModulesPlugin().apply(compiler);
+		}
+
 		if (options.experiments.lazyCompilation) {
 			const LazyCompilationPlugin = require("./hmr/LazyCompilationPlugin");
 			const lazyOptions =

package/lib/asset/AssetGenerator.js

@@ -49,7 +49,7 @@ const mergeAssetInfo = (a, b) => {
 				case "immutable":
 				case "development":
 				case "hotModuleReplacement":
-				case "javascriptModule	":
+				case "javascriptModule":
 					result[key] = a[key] || b[key];
 					break;
 				case "related":
@@ -191,6 +191,8 @@ class AssetGenerator extends Generator {
 							encoding ? `;${encoding}` : ""
 						},${encodedContent}`;
 					}
+					const data = getData();
+					data.set("url", encodedSource);
 					return new RawSource(
 						`${RuntimeGlobals.module}.exports = ${JSON.stringify(
 							encodedSource

package/lib/asset/RawDataUrlModule.js

@@ -0,0 +1,145 @@
+/*
+	MIT License http://www.opensource.org/licenses/mit-license.php
+	Author Tobias Koppers @sokra
+*/
+
+"use strict";
+
+const { RawSource } = require("webpack-sources");
+const Module = require("../Module");
+const RuntimeGlobals = require("../RuntimeGlobals");
+const makeSerializable = require("../util/makeSerializable");
+
+/** @typedef {import("../../declarations/WebpackOptions").WebpackOptionsNormalized} WebpackOptions */
+/** @typedef {import("../Compilation")} Compilation */
+/** @typedef {import("../Dependency").UpdateHashContext} UpdateHashContext */
+/** @typedef {import("../Module").CodeGenerationContext} CodeGenerationContext */
+/** @typedef {import("../Module").CodeGenerationResult} CodeGenerationResult */
+/** @typedef {import("../Module").NeedBuildContext} NeedBuildContext */
+/** @typedef {import("../RequestShortener")} RequestShortener */
+/** @typedef {import("../ResolverFactory").ResolverWithOptions} ResolverWithOptions */
+/** @typedef {import("../WebpackError")} WebpackError */
+/** @typedef {import("../util/Hash")} Hash */
+/** @typedef {import("../util/fs").InputFileSystem} InputFileSystem */
+
+const TYPES = new Set(["javascript"]);
+
+class RawDataUrlModule extends Module {
+	/**
+	 * @param {string} url raw url
+	 * @param {string} identifier unique identifier
+	 * @param {string=} readableIdentifier readable identifier
+	 */
+	constructor(url, identifier, readableIdentifier) {
+		super("asset/raw-data-url", null);
+		this.url = url;
+		this.identifierStr = identifier || this.url;
+		this.readableIdentifierStr = readableIdentifier || this.identifierStr;
+	}
+
+	/**
+	 * @returns {Set<string>} types available (do not mutate)
+	 */
+	getSourceTypes() {
+		return TYPES;
+	}
+
+	/**
+	 * @returns {string} a unique identifier of the module
+	 */
+	identifier() {
+		return this.identifierStr;
+	}
+
+	/**
+	 * @param {string=} type the source type for which the size should be estimated
+	 * @returns {number} the estimated size of the module (must be non-zero)
+	 */
+	size(type) {
+		return Math.max(1, this.url.length);
+	}
+
+	/**
+	 * @param {RequestShortener} requestShortener the request shortener
+	 * @returns {string} a user readable identifier of the module
+	 */
+	readableIdentifier(requestShortener) {
+		return requestShortener.shorten(this.readableIdentifierStr);
+	}
+
+	/**
+	 * @param {NeedBuildContext} context context info
+	 * @param {function(WebpackError=, boolean=): void} callback callback function, returns true, if the module needs a rebuild
+	 * @returns {void}
+	 */
+	needBuild(context, callback) {
+		return callback(null, !this.buildMeta);
+	}
+
+	/**
+	 * @param {WebpackOptions} options webpack options
+	 * @param {Compilation} compilation the compilation
+	 * @param {ResolverWithOptions} resolver the resolver
+	 * @param {InputFileSystem} fs the file system
+	 * @param {function(WebpackError=): void} callback callback function
+	 * @returns {void}
+	 */
+	build(options, compilation, resolver, fs, callback) {
+		this.buildMeta = {};
+		this.buildInfo = {
+			cacheable: true
+		};
+		callback();
+	}
+
+	/**
+	 * @param {CodeGenerationContext} context context for code generation
+	 * @returns {CodeGenerationResult} result
+	 */
+	codeGeneration(context) {
+		const sources = new Map();
+		sources.set(
+			"javascript",
+			new RawSource(`module.exports = ${JSON.stringify(this.url)};`)
+		);
+		const data = new Map();
+		data.set("url", this.url);
+		const runtimeRequirements = new Set();
+		runtimeRequirements.add(RuntimeGlobals.module);
+		return { sources, runtimeRequirements, data };
+	}
+
+	/**
+	 * @param {Hash} hash the hash used to track dependencies
+	 * @param {UpdateHashContext} context context
+	 * @returns {void}
+	 */
+	updateHash(hash, context) {
+		hash.update(this.url);
+		super.updateHash(hash, context);
+	}
+
+	serialize(context) {
+		const { write } = context;
+
+		write(this.url);
+		write(this.identifierStr);
+		write(this.readableIdentifierStr);
+
+		super.serialize(context);
+	}
+
+	deserialize(context) {
+		const { read } = context;
+
+		this.url = read();
+		this.identifierStr = read();
+		this.readableIdentifierStr = read();
+
+		super.deserialize(context);
+	}
+}
+
+makeSerializable(RawDataUrlModule, "webpack/lib/asset/RawDataUrlModule");
+
+module.exports = RawDataUrlModule;

package/lib/config/defaults.js

@@ -184,6 +184,7 @@ const applyWebpackOptionsDefaults = options => {
 		cache,
 		syncWebAssembly: options.experiments.syncWebAssembly,
 		asyncWebAssembly: options.experiments.asyncWebAssembly,
+		css: options.experiments.css,
 		futureDefaults
 	});
 
@@ -239,6 +240,7 @@ const applyWebpackOptionsDefaults = options => {
 	applyOptimizationDefaults(options.optimization, {
 		development,
 		production,
+		css: options.experiments.css,
 		records: !!(options.recordsInputPath || options.recordsOutputPath)
 	});
 
@@ -276,6 +278,7 @@ const applyExperimentsDefaults = (experiments, { production, development }) => {
 	D(experiments, "lazyCompilation", undefined);
 	D(experiments, "buildHttp", undefined);
 	D(experiments, "cacheUnaffected", experiments.futureDefaults);
+	D(experiments, "css", experiments.futureDefaults);
 
 	if (typeof experiments.buildHttp === "object") {
 		D(experiments.buildHttp, "frozen", production);
@@ -458,12 +461,13 @@ const applyJavascriptParserOptionsDefaults = (
  * @param {boolean} options.cache is caching enabled
  * @param {boolean} options.syncWebAssembly is syncWebAssembly enabled
  * @param {boolean} options.asyncWebAssembly is asyncWebAssembly enabled
+ * @param {boolean} options.css is css enabled
  * @param {boolean} options.futureDefaults is future defaults enabled
  * @returns {void}
  */
 const applyModuleDefaults = (
 	module,
-	{ cache, syncWebAssembly, asyncWebAssembly, futureDefaults }
+	{ cache, syncWebAssembly, asyncWebAssembly, css, futureDefaults }
 ) => {
 	if (cache) {
 		D(module, "unsafeCache", module => {
@@ -587,6 +591,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",
@@ -692,6 +731,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);
@@ -1030,12 +1083,13 @@ const applyPerformanceDefaults = (performance, { production }) => {
  * @param {Object} options options
  * @param {boolean} options.production is production
  * @param {boolean} options.development is development
+ * @param {boolean} 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);
@@ -1086,7 +1140,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/css/CssGenerator.js

@@ -0,0 +1,106 @@
+/*
+	MIT License http://www.opensource.org/licenses/mit-license.php
+	Author Sergey Melyukov @smelukov
+*/
+
+"use strict";
+
+const { ReplaceSource } = require("webpack-sources");
+const Generator = require("../Generator");
+const InitFragment = require("../InitFragment");
+
+/** @typedef {import("webpack-sources").Source} Source */
+/** @typedef {import("../Dependency")} Dependency */
+/** @typedef {import("../Generator").GenerateContext} GenerateContext */
+/** @typedef {import("../Generator").UpdateHashContext} UpdateHashContext */
+/** @typedef {import("../NormalModule")} NormalModule */
+/** @typedef {import("../util/Hash")} Hash */
+
+const TYPES = new Set(["css"]);
+
+class CssGenerator extends Generator {
+	constructor() {
+		super();
+	}
+
+	/**
+	 * @param {NormalModule} module module for which the code should be generated
+	 * @param {GenerateContext} generateContext context for generate
+	 * @returns {Source} generated code
+	 */
+	generate(module, generateContext) {
+		const originalSource = module.originalSource();
+		const source = new ReplaceSource(originalSource);
+		const initFragments = [];
+		const cssExports = new Map();
+
+		const templateContext = {
+			runtimeTemplate: generateContext.runtimeTemplate,
+			dependencyTemplates: generateContext.dependencyTemplates,
+			moduleGraph: generateContext.moduleGraph,
+			chunkGraph: generateContext.chunkGraph,
+			module,
+			runtime: generateContext.runtime,
+			runtimeRequirements: generateContext.runtimeRequirements,
+			concatenationScope: generateContext.concatenationScope,
+			codeGenerationResults: generateContext.codeGenerationResults,
+			initFragments,
+			cssExports
+		};
+
+		const handleDependency = dependency => {
+			const constructor = /** @type {new (...args: any[]) => Dependency} */ (
+				dependency.constructor
+			);
+			const template = generateContext.dependencyTemplates.get(constructor);
+			if (!template) {
+				throw new Error(
+					"No template for dependency: " + dependency.constructor.name
+				);
+			}
+
+			template.apply(dependency, source, templateContext);
+		};
+		module.dependencies.forEach(handleDependency);
+		if (module.presentationalDependencies !== undefined)
+			module.presentationalDependencies.forEach(handleDependency);
+
+		if (cssExports.size > 0) {
+			const data = generateContext.getData();
+			data.set("css-exports", cssExports);
+		}
+
+		return InitFragment.addToSource(source, initFragments, generateContext);
+	}
+
+	/**
+	 * @param {NormalModule} module fresh module
+	 * @returns {Set<string>} available types (do not mutate)
+	 */
+	getTypes(module) {
+		return TYPES;
+	}
+
+	/**
+	 * @param {NormalModule} module the module
+	 * @param {string=} type source type
+	 * @returns {number} estimate size of the module
+	 */
+	getSize(module, type) {
+		const originalSource = module.originalSource();
+
+		if (!originalSource) {
+			return 0;
+		}
+
+		return originalSource.size();
+	}
+
+	/**
+	 * @param {Hash} hash hash that will be modified
+	 * @param {UpdateHashContext} updateHashContext context for updating hash
+	 */
+	updateHash(hash, { module }) {}
+}
+
+module.exports = CssGenerator;