fix: concatenation

declarations/WebpackOptions.d.ts

@@ -491,10 +491,6 @@ export type CssChunkFilename = FilenameTemplate;
  * Specifies the filename template of output css files on disk. You must **not** specify an absolute path here, but the path may contain folders separated by '/'! The specified path is joined with the value of the 'output.path' option to determine the location on disk.
  */
 export type CssFilename = FilenameTemplate;
-/**
- * Compress the data in the head tag of CSS files.
- */
-export type CssHeadDataCompression = boolean;
 /**
  * Similar to `output.devtoolModuleFilenameTemplate`, but used in the case of duplicate module identifiers.
  */
@@ -2111,10 +2107,6 @@ export interface Output {
 	 * Specifies the filename template of output css files on disk. You must **not** specify an absolute path here, but the path may contain folders separated by '/'! The specified path is joined with the value of the 'output.path' option to determine the location on disk.
 	 */
 	cssFilename?: CssFilename;
-	/**
-	 * Compress the data in the head tag of CSS files.
-	 */
-	cssHeadDataCompression?: CssHeadDataCompression;
 	/**
 	 * Similar to `output.devtoolModuleFilenameTemplate`, but used in the case of duplicate module identifiers.
 	 */
@@ -3499,10 +3491,6 @@ export interface OutputNormalized {
 	 * Specifies the filename template of output css files on disk. You must **not** specify an absolute path here, but the path may contain folders separated by '/'! The specified path is joined with the value of the 'output.path' option to determine the location on disk.
 	 */
 	cssFilename?: CssFilename;
-	/**
-	 * Compress the data in the head tag of CSS files.
-	 */
-	cssHeadDataCompression?: CssHeadDataCompression;
 	/**
 	 * Similar to `output.devtoolModuleFilenameTemplate`, but used in the case of duplicate module identifiers.
 	 */

lib/config/defaults.js

@@ -1072,7 +1072,6 @@ 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);

lib/config/normalization.js

@@ -315,7 +315,6 @@ const getNormalizedWebpackOptions = config => ({
 			chunkLoadTimeout: output.chunkLoadTimeout,
 			cssFilename: output.cssFilename,
 			cssChunkFilename: output.cssChunkFilename,
-			cssHeadDataCompression: output.cssHeadDataCompression,
 			clean: output.clean,
 			compareBeforeEmit: output.compareBeforeEmit,
 			crossOriginLoading: output.crossOriginLoading,

lib/css/CssGenerator.js

@@ -49,13 +49,7 @@ class CssGenerator extends Generator {
 		if (!this.esModule) {
 			return "Module is not an ECMAScript module";
 		}
-		// TODO webpack 6: remove /\[moduleid\]/.test
+
-		if (
-			/\[id\]/.test(this.localIdentName) ||
-			/\[moduleid\]/.test(this.localIdentName)
-		) {
-			return "The localIdentName includes moduleId ([id] or [moduleid])";
-		}
 		return undefined;
 	}
 
@@ -141,6 +135,10 @@ class CssGenerator extends Generator {
 					const usedIdentifiers = new Set();
 					for (const [name, v] of cssExportsData.exports) {
 						let identifier = Template.toIdentifier(name);
+						const { RESERVED_IDENTIFIER } = require("../util/propertyName");
+						if (RESERVED_IDENTIFIER.has(identifier)) {
+							identifier = `_${identifier}`;
+						}
 						const i = 0;
 						while (usedIdentifiers.has(identifier)) {
 							identifier = Template.toIdentifier(name + i);

lib/css/CssLoadingRuntimeModule.js

@@ -73,8 +73,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 			outputOptions: {
 				crossOriginLoading,
 				uniqueName,
-				chunkLoadTimeout: loadTimeout,
+				chunkLoadTimeout: loadTimeout
-				cssHeadDataCompression: withCompression
 			}
 		} = compilation;
 		const fn = RuntimeGlobals.ensureChunkHandlers;
@@ -221,26 +220,6 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 					]),
 					"}",
 					"if(!data) return [];",
-					withCompression
-						? Template.asString([
-								// LZW decode
-								`var map = {}, char = data[0], oldPhrase = char, decoded = char, code = 256, maxCode = ${"\uFFFF".charCodeAt(
-									0
-								)}, phrase;`,
-								"for (i = 1; i < data.length; i++) {",
-								Template.indent([
-									"cc = data[i].charCodeAt(0);",
-									"if (cc < 256) phrase = data[i]; else phrase = map[cc] ? map[cc] : (oldPhrase + char);",
-									"decoded += phrase;",
-									"char = phrase.charAt(0);",
-									"map[code] = oldPhrase + char;",
-									"if (++code > maxCode) { code = 256; map = {}; }",
-									"oldPhrase = phrase;"
-								]),
-								"}",
-								"data = decoded;"
-							])
-						: "// css head data compression is disabled",
 					"for(i = 0; cc; i++) {",
 					Template.indent([
 						"cc = data.charCodeAt(i);",

lib/css/CssModulesPlugin.js

@@ -50,7 +50,6 @@ const CssParser = require("./CssParser");
 /** @typedef {import("../Compilation").ChunkHashContext} ChunkHashContext */
 /** @typedef {import("../Compiler")} Compiler */
 /** @typedef {import("../CssModule").Inheritance} Inheritance */
-/** @typedef {import("../DependencyTemplate").CssExportsData} CssExportsData */
 /** @typedef {import("../Module")} Module */
 /** @typedef {import("../Template").RuntimeTemplate} RuntimeTemplate */
 /** @typedef {import("../TemplatedPathPlugin").TemplatePath} TemplatePath */
@@ -65,7 +64,6 @@ const CssParser = require("./CssParser");
  * @property {CodeGenerationResults} codeGenerationResults results of code generation
  * @property {RuntimeTemplate} runtimeTemplate the runtime template
  * @property {string} uniqueName the unique name
- * @property {boolean} cssHeadDataCompression need compress
  * @property {string} undoPath undo path to css file
  * @property {CssModule[]} modules modules
  */
@@ -76,7 +74,6 @@ const CssParser = require("./CssParser");
  * @property {ChunkGraph} chunkGraph the chunk graph
  * @property {CodeGenerationResults} codeGenerationResults results of code generation
  * @property {RuntimeTemplate} runtimeTemplate the runtime template
- * @property {string[]} metaData meta data for runtime
  * @property {string} undoPath undo path to css file
  */
 
@@ -159,51 +156,6 @@ const validateParserOptions = {
 /** @type {WeakMap<Compilation, CompilationHooks>} */
 const compilationHooksMap = new WeakMap();
 
-/**
- * @param {string} str string
- * @param {boolean=} omitOptionalUnderscore if true, optional underscore is not added
- * @returns {string} escaped string
- */
-const escapeCss = (str, omitOptionalUnderscore) => {
-	const escaped = `${str}`.replace(
-		// cspell:word uffff
-		/[^a-zA-Z0-9_\u0081-\uFFFF-]/g,
-		s => `\\${s}`
-	);
-	return !omitOptionalUnderscore && /^(?!--)[0-9_-]/.test(escaped)
-		? `_${escaped}`
-		: escaped;
-};
-
-/**
- * @param {string} str string
- * @returns {string} encoded string
- */
-const lzwEncode = str => {
-	/** @type {Map<string, string>} */
-	const map = new Map();
-	let encoded = "";
-	let phrase = str[0];
-	let code = 256;
-	const maxCode = "\uFFFF".charCodeAt(0);
-	for (let i = 1; i < str.length; i++) {
-		const c = str[i];
-		if (map.has(phrase + c)) {
-			phrase += c;
-		} else {
-			encoded += phrase.length > 1 ? map.get(phrase) : phrase;
-			map.set(phrase + c, String.fromCharCode(code));
-			phrase = c;
-			if (++code > maxCode) {
-				code = 256;
-				map.clear();
-			}
-		}
-	}
-	encoded += phrase.length > 1 ? map.get(phrase) : phrase;
-	return encoded;
-};
-
 const PLUGIN_NAME = "CssModulesPlugin";
 
 class CssModulesPlugin {
@@ -494,8 +446,6 @@ class CssModulesPlugin {
 										chunkGraph,
 										codeGenerationResults,
 										uniqueName: compilation.outputOptions.uniqueName,
-										cssHeadDataCompression:
-											compilation.outputOptions.cssHeadDataCompression,
 										undoPath,
 										modules,
 										runtimeTemplate
@@ -739,7 +689,7 @@ class CssModulesPlugin {
 	 * @returns {Source} css module source
 	 */
 	renderModule(module, renderContext, hooks) {
-		const { codeGenerationResults, chunk, undoPath, chunkGraph, metaData } =
+		const { codeGenerationResults, chunk, undoPath, chunkGraph } =
 			renderContext;
 		const codeGenResult = codeGenerationResults.get(module, chunk.runtime);
 		const moduleSourceContent =
@@ -831,11 +781,6 @@ class CssModulesPlugin {
 				source
 			});
 		}
-		/** @type {CssExportsData | undefined} */
-		const cssExportsData =
-			codeGenResult.data && codeGenResult.data.get("css-exports");
-		const exports = cssExportsData && cssExportsData.exports;
-		const esModule = cssExportsData && cssExportsData.esModule;
 		let moduleId = String(chunkGraph.getModuleId(module));
 
 		// When `optimization.moduleIds` is `named` the module id is a path, so we need to normalize it between platforms
@@ -843,16 +788,6 @@ class CssModulesPlugin {
 			moduleId = moduleId.replace(/\\/g, "/");
 		}
 
-		metaData.push(
-			`${
-				exports
-					? Array.from(
-							exports,
-							([n, v]) => `${escapeCss(n)}:${escapeCss(v)}/`
-						).join("")
-					: ""
-			}${esModule ? "&" : ""}${escapeCss(moduleId)}`
-		);
 		return tryRunOrWebpackError(
 			() => hooks.renderModulePackage.call(source, module, renderContext),
 			"CssModulesPlugin.getCompilationHooks().renderModulePackage"
@@ -867,7 +802,6 @@ class CssModulesPlugin {
 	renderChunk(
 		{
 			uniqueName,
-			cssHeadDataCompression,
 			undoPath,
 			chunk,
 			chunkGraph,
@@ -878,14 +812,11 @@ class CssModulesPlugin {
 		hooks
 	) {
 		const source = new ConcatSource();
-		/** @type {string[]} */
-		const metaData = [];
 		for (const module of modules) {
 			try {
 				const moduleSource = this.renderModule(
 					module,
 					{
-						metaData,
 						undoPath,
 						chunk,
 						chunkGraph,
@@ -901,13 +832,6 @@ class CssModulesPlugin {
 				throw err;
 			}
 		}
-		const metaDataStr = metaData.join(",");
-		source.add(
-			`head{--webpack-${escapeCss(
-				(uniqueName ? `${uniqueName}-` : "") + chunk.id,
-				true
-			)}:${cssHeadDataCompression ? lzwEncode(metaDataStr) : metaDataStr};}`
-		);
 		chunk.rendered = true;
 		return source;
 	}

lib/dependencies/CssIcssExportDependency.js

@@ -17,7 +17,6 @@ const NullDependency = require("./NullDependency");
 /** @typedef {import("../Dependency").UpdateHashContext} UpdateHashContext */
 /** @typedef {import("../DependencyTemplate").CssDependencyTemplateContext} DependencyTemplateContext */
 /** @typedef {import("../ModuleGraph")} ModuleGraph */
-/** @typedef {import("../css/CssExportsGenerator")} CssExportsGenerator */
 /** @typedef {import("../css/CssGenerator")} CssGenerator */
 /** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
 /** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
@@ -60,7 +59,7 @@ class CssIcssExportDependency extends NullDependency {
 	getExports(moduleGraph) {
 		const module = /** @type {CssModule} */ (moduleGraph.getParentModule(this));
 		const convention =
-			/** @type {CssGenerator | CssExportsGenerator} */
+			/** @type {CssGenerator} */
 			(module.generator).convention;
 		const names = this.getExportsConventionNames(this.name, convention);
 		return {
@@ -84,7 +83,7 @@ class CssIcssExportDependency extends NullDependency {
 				/** @type {CssModule} */
 				(chunkGraph.moduleGraph.getParentModule(this));
 			const generator =
-				/** @type {CssGenerator | CssExportsGenerator} */
+				/** @type {CssGenerator} */
 				(module.generator);
 			const names = this.getExportsConventionNames(
 				this.name,
@@ -134,7 +133,7 @@ CssIcssExportDependency.Template = class CssIcssExportDependencyTemplate extends
 		const dep = /** @type {CssIcssExportDependency} */ (dependency);
 		const module = /** @type {CssModule} */ (m);
 		const convention =
-			/** @type {CssGenerator | CssExportsGenerator} */
+			/** @type {CssGenerator} */
 			(module.generator).convention;
 		const names = dep.getExportsConventionNames(dep.name, convention);
 		const usedNames = /** @type {string[]} */ (

lib/dependencies/CssLocalIdentifierDependency.js

@@ -23,7 +23,6 @@ const NullDependency = require("./NullDependency");
 /** @typedef {import("../ModuleGraph")} ModuleGraph */
 /** @typedef {import("../NormalModuleFactory").ResourceDataWithData} ResourceDataWithData */
 /** @typedef {import("../RuntimeTemplate")} RuntimeTemplate */
-/** @typedef {import("../css/CssExportsGenerator")} CssExportsGenerator */
 /** @typedef {import("../css/CssGenerator")} CssGenerator */
 /** @typedef {import("../css/CssParser").Range} Range */
 /** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
@@ -40,7 +39,7 @@ const NullDependency = require("./NullDependency");
  */
 const getLocalIdent = (local, module, chunkGraph, runtimeTemplate) => {
 	const localIdentName =
-		/** @type {CssGenerator | CssExportsGenerator} */
+		/** @type {CssGenerator} */
 		(module.generator).localIdentName;
 	const relativeResourcePath = makePathsRelative(
 		/** @type {string} */
@@ -134,7 +133,7 @@ class CssLocalIdentifierDependency extends NullDependency {
 	getExports(moduleGraph) {
 		const module = /** @type {CssModule} */ (moduleGraph.getParentModule(this));
 		const convention =
-			/** @type {CssGenerator | CssExportsGenerator} */
+			/** @type {CssGenerator} */
 			(module.generator).convention;
 		const names = this.getExportsConventionNames(this.name, convention);
 		return {
@@ -158,7 +157,7 @@ class CssLocalIdentifierDependency extends NullDependency {
 				/** @type {CssModule} */
 				(chunkGraph.moduleGraph.getParentModule(this));
 			const generator =
-				/** @type {CssGenerator | CssExportsGenerator} */
+				/** @type {CssGenerator} */
 				(module.generator);
 			const names = this.getExportsConventionNames(
 				this.name,
@@ -225,7 +224,7 @@ CssLocalIdentifierDependency.Template = class CssLocalIdentifierDependencyTempla
 		const dep = /** @type {CssLocalIdentifierDependency} */ (dependency);
 		const module = /** @type {CssModule} */ (m);
 		const convention =
-			/** @type {CssGenerator | CssExportsGenerator} */
+			/** @type {CssGenerator} */
 			(module.generator).convention;
 		const names = dep.getExportsConventionNames(dep.name, convention);
 		const usedNames =

schemas/WebpackOptions.json

@@ -500,10 +500,6 @@
         }
       }
     },
-    "CssHeadDataCompression": {
-      "description": "Compress the data in the head tag of CSS files.",
-      "type": "boolean"
-    },
     "CssModuleGeneratorOptions": {
       "description": "Generator options for css/module modules.",
       "type": "object",
@@ -3369,9 +3365,6 @@
         "cssFilename": {
           "$ref": "#/definitions/CssFilename"
         },
-        "cssHeadDataCompression": {
-          "$ref": "#/definitions/CssHeadDataCompression"
-        },
         "devtoolFallbackModuleFilenameTemplate": {
           "$ref": "#/definitions/DevtoolFallbackModuleFilenameTemplate"
         },
@@ -3578,9 +3571,6 @@
         "cssFilename": {
           "$ref": "#/definitions/CssFilename"
         },
-        "cssHeadDataCompression": {
-          "$ref": "#/definitions/CssHeadDataCompression"
-        },
         "devtoolFallbackModuleFilenameTemplate": {
           "$ref": "#/definitions/DevtoolFallbackModuleFilenameTemplate"
         },

test/Defaults.unittest.js

@@ -336,7 +336,6 @@ describe("snapshots", () => {
 		    "crossOriginLoading": false,
 		    "cssChunkFilename": "[name].css",
 		    "cssFilename": "[name].css",
-		    "cssHeadDataCompression": true,
 		    "devtoolFallbackModuleFilenameTemplate": undefined,
 		    "devtoolModuleFilenameTemplate": undefined,
 		    "devtoolNamespace": "webpack",
@@ -860,9 +859,6 @@ describe("snapshots", () => {
 		-       "minRemainingSize": undefined,
 		+       "minRemainingSize": 0,
 		@@ ... @@
-		-     "cssHeadDataCompression": true,
-		+     "cssHeadDataCompression": false,
-		@@ ... @@
 		-     "pathinfo": false,
 		+     "pathinfo": true,
 		@@ ... @@
@@ -1923,9 +1919,6 @@ describe("snapshots", () => {
 			-       "minRemainingSize": undefined,
 			+       "minRemainingSize": 0,
 			@@ ... @@
-			-     "cssHeadDataCompression": true,
-			+     "cssHeadDataCompression": false,
-			@@ ... @@
 			-     "pathinfo": false,
 			+     "pathinfo": true,
 			@@ ... @@

test/__snapshots__/Cli.basictest.js.snap

@@ -6295,19 +6295,6 @@ Object {
     "multiple": false,
     "simpleType": "string",
   },
-  "output-css-head-data-compression": Object {
-    "configs": Array [
-      Object {
-        "description": "Compress the data in the head tag of CSS files.",
-        "multiple": false,
-        "path": "output.cssHeadDataCompression",
-        "type": "boolean",
-      },
-    ],
-    "description": "Compress the data in the head tag of CSS files.",
-    "multiple": false,
-    "simpleType": "boolean",
-  },
   "output-devtool-fallback-module-filename-template": Object {
     "configs": Array [
       Object {

test/configCases/css/large-css-head-data-compression/index.js

@@ -1,19 +0,0 @@
-const prod = process.env.NODE_ENV === "production";
-
-it("should allow to create css modules", done => {
-	prod
-		? __non_webpack_require__("./530.bundle1.js")
-		: __non_webpack_require__("./large_use-style_js.bundle0.js");
-	import("../large/use-style.js").then(({ default: x }) => {
-		try {
-			expect(x).toMatchSnapshot(prod ? "prod" : "dev");
-		} catch (e) {
-			return done(e);
-		}
-		done();
-	}, done);
-});
-
-it("should allow to process tailwind as global css", done => {
-	import("../large/tailwind.min.css").then(() => done(), done);
-});

test/configCases/css/large-css-head-data-compression/webpack.config.js

@@ -1,25 +0,0 @@
-/** @type {import("../../../../").Configuration[]} */
-module.exports = [
-	{
-		target: "web",
-		mode: "development",
-		output: {
-			uniqueName: "my-app",
-			cssHeadDataCompression: true
-		},
-		experiments: {
-			css: true
-		}
-	},
-	{
-		target: "web",
-		mode: "production",
-		output: {
-			cssHeadDataCompression: false
-		},
-		performance: false,
-		experiments: {
-			css: true
-		}
-	}
-];

types.d.ts

@@ -1494,11 +1494,6 @@ declare interface ChunkRenderContextCssModulesPlugin {
 	 */
 	runtimeTemplate: RuntimeTemplate;
 
-	/**
-	 * meta data for runtime
-	 */
-	metaData: string[];
-
 	/**
 	 * undo path to css file
 	 */
@@ -10644,11 +10639,6 @@ declare interface Output {
 		| string
 		| ((pathData: PathData, assetInfo?: AssetInfo) => string);
 
-	/**
-	 * Compress the data in the head tag of CSS files.
-	 */
-	cssHeadDataCompression?: boolean;
-
 	/**
 	 * Similar to `output.devtoolModuleFilenameTemplate`, but used in the case of duplicate module identifiers.
 	 */
@@ -10943,11 +10933,6 @@ declare interface OutputNormalized {
 		| string
 		| ((pathData: PathData, assetInfo?: AssetInfo) => string);
 
-	/**
-	 * Compress the data in the head tag of CSS files.
-	 */
-	cssHeadDataCompression?: boolean;
-
 	/**
 	 * Similar to `output.devtoolModuleFilenameTemplate`, but used in the case of duplicate module identifiers.
 	 */
@@ -12291,11 +12276,6 @@ declare interface RenderContextCssModulesPlugin {
 	 */
 	uniqueName: string;
 
-	/**
-	 * need compress
-	 */
-	cssHeadDataCompression: boolean;
-
 	/**
 	 * undo path to css file
 	 */