root
/
webpack
mirror of https://github.com/webpack/webpack.git
1
0
Fork 0
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix: concatenation

This commit is contained in:
alexander.akait 2024-11-15 18:59:14 +03:00
parent cb8bdfa522
commit 4d95b0df1d
15 changed files with 15 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
declarations/WebpackOptions.d.ts vendored
View File

@ -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.
*/

1
lib/config/defaults.js
View File

@ -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);

1
lib/config/normalization.js
View File

@ -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,

12
lib/css/CssGenerator.js
View File

@ -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);

23
lib/css/CssLoadingRuntimeModule.js
View File

@ -73,8 +73,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
outputOptions: {
crossOriginLoading,
uniqueName,
chunkLoadTimeout: loadTimeout,
cssHeadDataCompression: withCompression
chunkLoadTimeout: loadTimeout
}
} = 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);",

78
lib/css/CssModulesPlugin.js
View File

@ -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;
}

7
lib/dependencies/CssIcssExportDependency.js
View File

@ -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[]} */ (

9
lib/dependencies/CssLocalIdentifierDependency.js
View File

@ -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 =

2
schemas/WebpackOptions.check.js
View File

File diff suppressed because one or more lines are too long

10
schemas/WebpackOptions.json
View File

@ -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"
},

7
test/Defaults.unittest.js
View File

@ -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,
@@ ... @@

13
test/__snapshots__/Cli.basictest.js.snap
View File

@ -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 {

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

@ -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);
});

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

@ -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
}
}
];

20
types.d.ts vendored
View File

@ -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
*/