From a303a68b6d090985ee4243037a80f76c0dec0442 Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 17 Jan 2022 19:28:47 +0300 Subject: [PATCH 01/19] fix: types --- src/index.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/index.js b/src/index.js index e7fabd20..bb081251 100644 --- a/src/index.js +++ b/src/index.js @@ -73,7 +73,13 @@ const pluginName = "mini-css-extract-plugin"; const pluginSymbol = Symbol(pluginName); const DEFAULT_FILENAME = "[name].css"; +/** + * @type {Set} + */ const TYPES = new Set([MODULE_TYPE]); +/** + * @type {ReturnType} + */ const CODE_GENERATION_RESULT = { sources: new Map(), runtimeRequirements: new Set(), From 5bf0f926dfc0285adc55fefeb21cde400e63c05d Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 17 Jan 2022 19:31:29 +0300 Subject: [PATCH 02/19] fix: types --- src/index.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index bb081251..88e355a4 100644 --- a/src/index.js +++ b/src/index.js @@ -84,10 +84,18 @@ const CODE_GENERATION_RESULT = { sources: new Map(), runtimeRequirements: new Set(), }; - +/** + * + * @type {WeakMap} + */ const cssModuleCache = new WeakMap(); +/** + * @type {WeakMap} + */ const cssDependencyCache = new WeakMap(); - +/** + * @type {WeakSet} + */ const registered = new WeakSet(); class MiniCssExtractPlugin { From 4f67ec3fcdd39e9089a9509fca8149936101f26b Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 17 Jan 2022 19:34:03 +0300 Subject: [PATCH 03/19] fix: types --- src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 88e355a4..9dba5c3e 100644 --- a/src/index.js +++ b/src/index.js @@ -86,11 +86,11 @@ const CODE_GENERATION_RESULT = { }; /** * - * @type {WeakMap} + * @type {WeakMap} */ const cssModuleCache = new WeakMap(); /** - * @type {WeakMap} + * @type {WeakMap} */ const cssDependencyCache = new WeakMap(); /** From 661f7d71f171d0c94b2fb32e4cf0fa240cf3d594 Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 17 Jan 2022 19:43:14 +0300 Subject: [PATCH 04/19] fix: types --- src/index.js | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/src/index.js b/src/index.js index 9dba5c3e..91155a0a 100644 --- a/src/index.js +++ b/src/index.js @@ -20,6 +20,7 @@ const { /** @typedef {import("webpack").Compilation} Compilation */ /** @typedef {import("webpack").ChunkGraph} ChunkGraph */ /** @typedef {import("webpack").Chunk} Chunk */ +/** @typedef {import("webpack").LoaderContext} LoaderContext */ /** @typedef {Parameters[0]} ChunkGroup */ /** @typedef {import("webpack").Module} Module */ /** @typedef {import("webpack").Dependency} Dependency */ @@ -607,13 +608,20 @@ class MiniCssExtractPlugin { const { loader: normalModuleHook } = NormalModule.getCompilationHooks(compilation); - normalModuleHook.tap(pluginName, (loaderContext) => { - // @ts-ignore - // eslint-disable-next-line no-param-reassign - loaderContext[pluginSymbol] = { - experimentalUseImportModule: this.options.experimentalUseImportModule, - }; - }); + normalModuleHook.tap( + pluginName, + /** + * @param {object} loaderContext + */ + (loaderContext) => { + /** @type {object & { [pluginSymbol]: { experimentalUseImportModule: boolean | undefined } }} */ + // eslint-disable-next-line no-param-reassign + (loaderContext)[pluginSymbol] = { + experimentalUseImportModule: + this.options.experimentalUseImportModule, + }; + } + ); }); compiler.hooks.thisCompilation.tap(pluginName, (compilation) => { From f99ac6e5498a4db030e54d87bdbb5436729d330b Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 17 Jan 2022 19:43:27 +0300 Subject: [PATCH 05/19] fix: types --- types/index.d.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/types/index.d.ts b/types/index.d.ts index 16b52078..6234a63c 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -75,6 +75,7 @@ declare namespace MiniCssExtractPlugin { Compilation, ChunkGraph, Chunk, + LoaderContext, ChunkGroup, Module, Dependency, @@ -105,6 +106,7 @@ type PluginOptions = { /** @typedef {import("webpack").Compilation} Compilation */ /** @typedef {import("webpack").ChunkGraph} ChunkGraph */ /** @typedef {import("webpack").Chunk} Chunk */ +/** @typedef {import("webpack").LoaderContext} LoaderContext */ /** @typedef {Parameters[0]} ChunkGroup */ /** @typedef {import("webpack").Module} Module */ /** @typedef {import("webpack").Dependency} Dependency */ @@ -155,6 +157,7 @@ type Schema = import("schema-utils/declarations/validate").Schema; type Compilation = import("webpack").Compilation; type ChunkGraph = import("webpack").ChunkGraph; type Chunk = import("webpack").Chunk; +type LoaderContext = import("webpack").LoaderContext; type ChunkGroup = Parameters[0]; type Module = import("webpack").Module; type Dependency = import("webpack").Dependency; From 0ba4289d5d759ed6c0ab603db2ee9e82ec73c193 Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 17 Jan 2022 19:53:58 +0300 Subject: [PATCH 06/19] fix: types --- src/index.js | 113 ++++++++++++++++++++++++++++----------------------- 1 file changed, 62 insertions(+), 51 deletions(-) diff --git a/src/index.js b/src/index.js index 91155a0a..863fcf59 100644 --- a/src/index.js +++ b/src/index.js @@ -569,11 +569,15 @@ class MiniCssExtractPlugin { const { webpack } = compiler; if (this.options.experimentalUseImportModule) { - // @ts-ignore - if (typeof compiler.options.experiments.executeModule === "undefined") { - // @ts-ignore + if ( + typeof ( + /** @type {Compiler["options"]["experiments"] & { executeModule?: boolean }} */ + (compiler.options.experiments).executeModule + ) === "undefined" + ) { + /** @type {Compiler["options"]["experiments"] & { executeModule?: boolean }} */ // eslint-disable-next-line no-param-reassign - compiler.options.experiments.executeModule = true; + (compiler.options.experiments).executeModule = true; } } @@ -653,55 +657,62 @@ class MiniCssExtractPlugin { new CssDependencyTemplate() ); - // @ts-ignore - compilation.hooks.renderManifest.tap(pluginName, (result, { chunk }) => { - const { chunkGraph } = compilation; - const { HotUpdateChunk } = webpack; - - // We don't need hot update chunks for css - // We will use the real asset instead to update - if (chunk instanceof HotUpdateChunk) { - return; - } + compilation.hooks.renderManifest.tap( + pluginName, + /** + * @param {ReturnType} result + * @param {Parameters[0]} chunk + * @returns {TODO} + */ + (result, { chunk }) => { + const { chunkGraph } = compilation; + const { HotUpdateChunk } = webpack; + + // We don't need hot update chunks for css + // We will use the real asset instead to update + if (chunk instanceof HotUpdateChunk) { + return; + } - const renderedModules = Array.from( - this.getChunkModules(chunk, chunkGraph) - ).filter((module) => module.type === MODULE_TYPE); + const renderedModules = Array.from( + this.getChunkModules(chunk, chunkGraph) + ).filter((module) => module.type === MODULE_TYPE); - const filenameTemplate = - /** @type {TODO} */ - ( - chunk.canBeInitial() - ? this.options.filename - : this.options.chunkFilename - ); + const filenameTemplate = + /** @type {TODO} */ + ( + chunk.canBeInitial() + ? this.options.filename + : this.options.chunkFilename + ); - if (renderedModules.length > 0) { - result.push({ - render: () => - this.renderContentAsset( - compiler, - compilation, - chunk, - renderedModules, - compilation.runtimeTemplate.requestShortener, - /** @type {string} */ - filenameTemplate, - { - contentHashType: MODULE_TYPE, + if (renderedModules.length > 0) { + result.push({ + render: () => + this.renderContentAsset( + compiler, + compilation, chunk, - } - ), - filenameTemplate, - pathOptions: { - chunk, - contentHashType: MODULE_TYPE, - }, - identifier: `${pluginName}.${chunk.id}`, - hash: chunk.contentHash[MODULE_TYPE], - }); + renderedModules, + compilation.runtimeTemplate.requestShortener, + /** @type {string} */ + filenameTemplate, + { + contentHashType: MODULE_TYPE, + chunk, + } + ), + filenameTemplate, + pathOptions: { + chunk, + contentHashType: MODULE_TYPE, + }, + identifier: `${pluginName}.${chunk.id}`, + hash: chunk.contentHash[MODULE_TYPE], + }); + } } - }); + ); compilation.hooks.contentHash.tap(pluginName, (chunk) => { const { outputOptions, chunkGraph } = compilation; @@ -1076,8 +1087,9 @@ class MiniCssExtractPlugin { let usedModules = this._sortedModulesCache.get(chunk); if (usedModules || !modules) { - // @ts-ignore - return usedModules; + return /** @type {Set} */ ( + usedModules + ); } /** @type {Module[]} */ @@ -1158,7 +1170,6 @@ class MiniCssExtractPlugin { // get first module where dependencies are fulfilled for (const list of modulesByChunkGroup) { // skip and remove already added modules - // @ts-ignore while (list.length > 0 && usedModules.has(list[list.length - 1])) { list.pop(); } From 1ef013c076e794e1a9ddad447b70a3c9f2b9b8f7 Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 17 Jan 2022 19:56:25 +0300 Subject: [PATCH 07/19] fix: types --- src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 863fcf59..cc296c61 100644 --- a/src/index.js +++ b/src/index.js @@ -526,8 +526,8 @@ class MiniCssExtractPlugin { insert: options.insert, linkType: // Todo in next major release set default to "false" - // @ts-ignore - (typeof options.linkType === "boolean" && options.linkType === true) || + (typeof options.linkType === "boolean" && + /** @type {boolean} */ (options.linkType) === true) || typeof options.linkType === "undefined" ? "text/css" : options.linkType, From 0d9fa67ff60f6f61d6ab68a742c279fd9b2e6671 Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 17 Jan 2022 20:23:49 +0300 Subject: [PATCH 08/19] fix: types --- src/index.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/index.js b/src/index.js index cc296c61..0d888322 100644 --- a/src/index.js +++ b/src/index.js @@ -631,19 +631,17 @@ class MiniCssExtractPlugin { compiler.hooks.thisCompilation.tap(pluginName, (compilation) => { class CssModuleFactory { /** - * @param {{ dependencies: CssDependency[] }} dependencies - * @param {(err: Error| null, module: Module) => void} callback + * @param {TODO} dependencies + * @param {TODO} callback */ // eslint-disable-next-line class-methods-use-this create({ dependencies: [dependency] }, callback) { - // @ts-ignore callback(null, new CssModule(dependency)); } } compilation.dependencyFactories.set( CssDependency, - // @ts-ignore new CssModuleFactory() ); From d25f648a44e9bcafdbe7d9e1c3bdc868effcab99 Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 17 Jan 2022 20:42:01 +0300 Subject: [PATCH 09/19] fix: types --- src/index.js | 70 +++++++++++++++++++++++------------------------- types/index.d.ts | 25 ++++++++++++++--- 2 files changed, 54 insertions(+), 41 deletions(-) diff --git a/src/index.js b/src/index.js index 0d888322..d3d5c13e 100644 --- a/src/index.js +++ b/src/index.js @@ -85,6 +85,11 @@ const CODE_GENERATION_RESULT = { sources: new Map(), runtimeRequirements: new Set(), }; + +/** @typedef {Module & { content: Buffer, media: string, sourceMap?: Buffer, supports?: string, layer?: string }} CssModule */ + +/** @typedef {Dependency & { assetsInfo?: Map, assets?: { [key: string]: TODO }}} CssDependency */ + /** * * @type {WeakMap} @@ -189,7 +194,7 @@ class MiniCssExtractPlugin { } /** - * @param {Module & CssModule} module + * @param {CssModule} module */ updateCacheModule(module) { if ( @@ -497,7 +502,7 @@ class MiniCssExtractPlugin { /** * @private - * @type {WeakMap>} + * @type {WeakMap>} * @private */ this._sortedModulesCache = new WeakMap(); @@ -672,8 +677,10 @@ class MiniCssExtractPlugin { return; } + /** @type {CssModule[]} */ const renderedModules = Array.from( - this.getChunkModules(chunk, chunkGraph) + /** @type {CssModule[]} */ + (this.getChunkModules(chunk, chunkGraph)) ).filter((module) => module.type === MODULE_TYPE); const filenameTemplate = @@ -693,7 +700,6 @@ class MiniCssExtractPlugin { chunk, renderedModules, compilation.runtimeTemplate.requestShortener, - /** @type {string} */ filenameTemplate, { contentHashType: MODULE_TYPE, @@ -717,7 +723,7 @@ class MiniCssExtractPlugin { const modules = this.sortModules( compilation, chunk, - /** @type {Iterable} */ + /** @type {CssModule[]} */ (chunkGraph.getChunkModulesIterableBySourceType(chunk, MODULE_TYPE)), compilation.runtimeTemplate.requestShortener ); @@ -1077,38 +1083,36 @@ class MiniCssExtractPlugin { * @private * @param {Compilation} compilation * @param {Chunk} chunk - * @param {Iterable} modules + * @param {CssModule[]} modules * @param {Compilation["requestShortener"]} requestShortener - * @returns {Set} + * @returns {Set} */ sortModules(compilation, chunk, modules, requestShortener) { let usedModules = this._sortedModulesCache.get(chunk); if (usedModules || !modules) { - return /** @type {Set} */ ( - usedModules - ); + return /** @type {Set} */ (usedModules); } - /** @type {Module[]} */ + /** @type {CssModule[]} */ const modulesList = [...modules]; // Store dependencies for modules - /** @type {Map>} */ + /** @type {Map>} */ const moduleDependencies = new Map( modulesList.map((m) => [ m, - /** @type {Set} */ + /** @type {Set} */ (new Set()), ]) ); - /** @type {Map>>} */ + /** @type {Map>>} */ const moduleDependenciesReasons = new Map( modulesList.map((m) => [m, new Map()]) ); // Get ordered list of modules per chunk group // This loop also gathers dependencies from the ordered lists // Lists are in reverse order to allow to use Array.pop() - /** @type {Module[][]} */ + /** @type {CssModule[][]} */ const modulesByChunkGroup = Array.from( chunk.groupsIterable, (chunkGroup) => { @@ -1128,13 +1132,13 @@ class MiniCssExtractPlugin { const set = moduleDependencies.get(sortedModules[i]); const reasons = - /** @type {Map>} */ + /** @type {Map>} */ (moduleDependenciesReasons.get(sortedModules[i])); for (let j = i + 1; j < sortedModules.length; j++) { const module = sortedModules[j]; - /** @type {Set} */ + /** @type {Set} */ (set).add(module); const reason = @@ -1154,11 +1158,11 @@ class MiniCssExtractPlugin { usedModules = new Set(); /** - * @param {Module} m + * @param {CssModule} m * @returns {boolean} */ const unusedModulesFilter = (m) => - !(/** @type {Set} */ (usedModules).has(m)); + !(/** @type {Set} */ (usedModules).has(m)); while (usedModules.size < modulesList.length) { let success = false; @@ -1178,7 +1182,7 @@ class MiniCssExtractPlugin { const deps = moduleDependencies.get(module); // determine dependencies that are not yet included const failedDeps = Array.from( - /** @type {Set} */ + /** @type {Set} */ (deps) ).filter(unusedModulesFilter); @@ -1190,11 +1194,7 @@ class MiniCssExtractPlugin { if (failedDeps.length === 0) { // use this module and remove it from list - usedModules.add( - /** @type {Module & { content: Buffer, media: string, sourceMap?: Buffer, supports?: string, layer?: string }} */ ( - list.pop() - ) - ); + usedModules.add(/** @type {CssModule} */ (list.pop())); success = true; break; } @@ -1205,11 +1205,11 @@ class MiniCssExtractPlugin { // no module found => there is a conflict // use list with fewest failed deps // and emit a warning - const fallbackModule = /** @type {Module[]} */ (bestMatch).pop(); + const fallbackModule = /** @type {CssModule[]} */ (bestMatch).pop(); if (!this.options.ignoreOrder) { const reasons = moduleDependenciesReasons.get( - /** @type {Module} */ (fallbackModule) + /** @type {CssModule} */ (fallbackModule) ); compilation.warnings.push( @@ -1220,22 +1220,22 @@ class MiniCssExtractPlugin { `chunk ${chunk.name || chunk.id} [${pluginName}]`, "Conflicting order. Following module has been added:", ` * ${ - /** @type {Module} */ (fallbackModule).readableIdentifier( + /** @type {CssModule} */ (fallbackModule).readableIdentifier( requestShortener ) }`, "despite it was not able to fulfill desired ordering with these modules:", - .../** @type {Module[]} */ (bestMatchDeps).map((m) => { + .../** @type {CssModule[]} */ (bestMatchDeps).map((m) => { const goodReasonsMap = moduleDependenciesReasons.get(m); const goodReasons = goodReasonsMap && goodReasonsMap.get( - /** @type {Module} */ (fallbackModule) + /** @type {CssModule} */ (fallbackModule) ); const failedChunkGroups = Array.from( /** @type {Set} */ ( - /** @type {Map>} */ + /** @type {Map>} */ (reasons).get(m) ), (cg) => cg.name @@ -1258,11 +1258,7 @@ class MiniCssExtractPlugin { ); } - usedModules.add( - /** @type {Module & { content: Buffer, media: string, sourceMap?: Buffer, supports?: string, layer?: string }} */ ( - fallbackModule - ) - ); + usedModules.add(/** @type {CssModule} */ (fallbackModule)); } } @@ -1276,7 +1272,7 @@ class MiniCssExtractPlugin { * @param {Compiler} compiler * @param {Compilation} compilation * @param {Chunk} chunk - * @param {Iterable} modules + * @param {CssModule[]} modules * @param {Compiler["requestShortener"]} requestShortener * @param {string} filenameTemplate * @param {Parameters['output']['filename'], string | undefined>>[0]} pathData diff --git a/types/index.d.ts b/types/index.d.ts index 6234a63c..2d73e58f 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -18,7 +18,7 @@ declare class MiniCssExtractPlugin { constructor(options?: PluginOptions | undefined); /** * @private - * @type {WeakMap>} + * @type {WeakMap>} * @private */ private _sortedModulesCache; @@ -47,9 +47,9 @@ declare class MiniCssExtractPlugin { * @private * @param {Compilation} compilation * @param {Chunk} chunk - * @param {Iterable} modules + * @param {CssModule[]} modules * @param {Compilation["requestShortener"]} requestShortener - * @returns {Set} + * @returns {Set} */ private sortModules; /** @@ -57,7 +57,7 @@ declare class MiniCssExtractPlugin { * @param {Compiler} compiler * @param {Compilation} compilation * @param {Chunk} chunk - * @param {Iterable} modules + * @param {CssModule[]} modules * @param {Compiler["requestShortener"]} requestShortener * @param {string} filenameTemplate * @param {Parameters['output']['filename'], string | undefined>>[0]} pathData @@ -88,6 +88,8 @@ declare namespace MiniCssExtractPlugin { NormalizedPluginOptions, RuntimeOptions, TODO, + CssModule, + CssDependency, }; } type Compiler = import("webpack").Compiler; @@ -190,3 +192,18 @@ type RuntimeOptions = { attributes: Record | undefined; }; type TODO = any; +type CssModule = Module & { + content: Buffer; + media: string; + sourceMap?: Buffer; + supports?: string; + layer?: string; +}; +type CssDependency = import("webpack").Dependency & { + assetsInfo?: Map | undefined; + assets?: + | { + [key: string]: any; + } + | undefined; +}; From f10eed3a587b961f06b2489002e9ee68cfc191f1 Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 17 Jan 2022 21:10:02 +0300 Subject: [PATCH 10/19] fix: types --- src/index.js | 65 ++++++++++++++++++++++++++--------------------- src/loader.js | 5 +--- types/index.d.ts | 26 +++++++++++++++---- types/loader.d.ts | 1 + 4 files changed, 59 insertions(+), 38 deletions(-) diff --git a/src/index.js b/src/index.js index d3d5c13e..084fb122 100644 --- a/src/index.js +++ b/src/index.js @@ -28,6 +28,7 @@ const { /** @typedef {import("webpack").Configuration} Configuration */ /** @typedef {import("webpack").WebpackError} WebpackError */ /** @typedef {import("webpack").AssetInfo} AssetInfo */ +/** @typedef {import("./loader.js").Dependency} LoaderDependency */ /** * @typedef {Object} LoaderOptions @@ -86,17 +87,21 @@ const CODE_GENERATION_RESULT = { runtimeRequirements: new Set(), }; -/** @typedef {Module & { content: Buffer, media: string, sourceMap?: Buffer, supports?: string, layer?: string }} CssModule */ +/** @typedef {Module & { content: Buffer, media?: string, sourceMap?: Buffer, supports?: string, layer?: string }} CssModule */ -/** @typedef {Dependency & { assetsInfo?: Map, assets?: { [key: string]: TODO }}} CssDependency */ +/** @typedef {{ new(...args: any): TODO }} CssModuleConstructor */ + +/** @typedef {Dependency & { context: string | undefined, identifier: string, identifierIndex: number, content: Buffer, sourceMap?: Buffer, media?: string, supports?: string, layer?: string, assetsInfo?: Map, assets?: { [key: string]: TODO }}} CssDependency */ + +/** @typedef {{ new(...args: any): TODO }} CssDependencyConstructor */ /** * - * @type {WeakMap} + * @type {WeakMap} */ const cssModuleCache = new WeakMap(); /** - * @type {WeakMap} + * @type {WeakMap} */ const cssDependencyCache = new WeakMap(); /** @@ -108,19 +113,21 @@ class MiniCssExtractPlugin { /** * @private * @param {Compiler["webpack"]} webpack - * @returns {typeof CssModule} + * @returns {CssModuleConstructor} */ static getCssModule(webpack) { /** * Prevent creation of multiple CssModule classes to allow other integrations to get the current CssModule. */ if (cssModuleCache.has(webpack)) { - return cssModuleCache.get(webpack); + return /** @type {CssModuleConstructor} */ (cssModuleCache.get(webpack)); } + // TODO bug with layer + // @ts-ignore class CssModule extends webpack.Module { /** - * @param {{ context: string, identifier: string, identifierIndex: number, content: Buffer, layer: string | null, supports?: string, media: string, sourceMap?: Buffer, assets: { [key: string]: Source }, assetsInfo: Map }} build + * @param {CssDependency} dependency */ constructor({ context, @@ -194,27 +201,27 @@ class MiniCssExtractPlugin { } /** - * @param {CssModule} module + * @param {Module} module */ updateCacheModule(module) { if ( - this.content !== module.content || - this.layer !== module.layer || - this.supports !== module.supports || - this.media !== module.media || - this.sourceMap !== module.sourceMap || - this.assets !== module.assets || - this.assetsInfo !== module.assetsInfo + this.content !== /** @type {CssModule} */ (module).content || + this.layer !== /** @type {CssModule} */ (module).layer || + this.supports !== /** @type {CssModule} */ (module).supports || + this.media !== /** @type {CssModule} */ (module).media || + this.sourceMap !== /** @type {CssModule} */ (module).sourceMap || + this.assets !== /** @type {CssModule} */ (module).assets || + this.assetsInfo !== /** @type {CssModule} */ (module).assetsInfo ) { this._needBuild = true; - this.content = module.content; - this.layer = module.layer; - this.supports = module.supports; - this.media = module.media; - this.sourceMap = module.sourceMap; - this.assets = module.assets; - this.assetsInfo = module.assetsInfo; + this.content = /** @type {CssModule} */ (module).content; + this.layer = /** @type {CssModule} */ (module).layer; + this.supports = /** @type {CssModule} */ (module).supports; + this.media = /** @type {CssModule} */ (module).media; + this.sourceMap = /** @type {CssModule} */ (module).sourceMap; + this.assets = /** @type {CssModule} */ (module).assets; + this.assetsInfo = /** @type {CssModule} */ (module).assetsInfo; } } @@ -342,6 +349,7 @@ class MiniCssExtractPlugin { const sourceMap = read(); const assets = read(); const assetsInfo = read(); + // @ts-ignore const dep = new CssModule({ context: contextModule, identifier, @@ -366,21 +374,20 @@ class MiniCssExtractPlugin { } /** - * @private * @param {Compiler["webpack"]} webpack - * @returns {typeof CssDependency} + * @returns {CssDependencyConstructor} */ static getCssDependency(webpack) { /** * Prevent creation of multiple CssDependency classes to allow other integrations to get the current CssDependency. */ if (cssDependencyCache.has(webpack)) { - return cssDependencyCache.get(webpack); + return /** @type {CssDependencyConstructor} */ (cssDependencyCache.get(webpack)); } class CssDependency extends webpack.Dependency { /** - * @param {{ identifier: string, content: Buffer, layer?: string, supports?: string, media: string, sourceMap?: Buffer }} build + * @param {Omit} loaderDependency * @param {string | null} context * @param {number} identifierIndex */ @@ -1220,9 +1227,9 @@ class MiniCssExtractPlugin { `chunk ${chunk.name || chunk.id} [${pluginName}]`, "Conflicting order. Following module has been added:", ` * ${ - /** @type {CssModule} */ (fallbackModule).readableIdentifier( - requestShortener - ) + /** @type {CssModule} */ ( + fallbackModule + ).readableIdentifier(requestShortener) }`, "despite it was not able to fulfill desired ordering with these modules:", .../** @type {CssModule[]} */ (bestMatchDeps).map((m) => { diff --git a/src/loader.js b/src/loader.js index 3a4e9173..d15fe0fe 100644 --- a/src/loader.js +++ b/src/loader.js @@ -31,7 +31,7 @@ const MiniCssExtractPlugin = require("./index"); * @property {Buffer} content * @property {string} media * @property {string} [supports] - * @property {string} [supports] + * @property {string} [layer] * @property {Buffer} [sourceMap] */ @@ -126,12 +126,10 @@ function pitch(request) { identifierCountMap.get( /** @type {Dependency} */ (dependency).identifier ) || 0; - // @ts-ignore const CssDependency = MiniCssExtractPlugin.getCssDependency(webpack); /** @type {NormalModule} */ (this._module).addDependency( - // @ts-ignore (lastDep = new CssDependency( /** @type {Dependency} */ (dependency), @@ -395,7 +393,6 @@ function pitch(request) { module.loaders = loaders.map((loader) => { return { type: null, - // @ts-ignore loader: loader.path, options: loader.options, ident: loader.ident, diff --git a/types/index.d.ts b/types/index.d.ts index 2d73e58f..4de97822 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -3,15 +3,16 @@ declare class MiniCssExtractPlugin { /** * @private * @param {Compiler["webpack"]} webpack - * @returns {typeof CssModule} + * @returns {CssModuleConstructor} */ private static getCssModule; /** - * @private * @param {Compiler["webpack"]} webpack - * @returns {typeof CssDependency} + * @returns {CssDependencyConstructor} */ - private static getCssDependency; + static getCssDependency( + webpack: Compiler["webpack"] + ): CssDependencyConstructor; /** * @param {PluginOptions} [options] */ @@ -83,16 +84,20 @@ declare namespace MiniCssExtractPlugin { Configuration, WebpackError, AssetInfo, + LoaderDependency, LoaderOptions, PluginOptions, NormalizedPluginOptions, RuntimeOptions, TODO, CssModule, + CssModuleConstructor, CssDependency, + CssDependencyConstructor, }; } type Compiler = import("webpack").Compiler; +type CssDependencyConstructor = new (...args: any) => TODO; type PluginOptions = { filename?: Required["output"]["filename"]; chunkFilename?: Required["output"]["chunkFilename"]; @@ -116,6 +121,7 @@ type PluginOptions = { /** @typedef {import("webpack").Configuration} Configuration */ /** @typedef {import("webpack").WebpackError} WebpackError */ /** @typedef {import("webpack").AssetInfo} AssetInfo */ +/** @typedef {import("./loader.js").Dependency} LoaderDependency */ /** * @typedef {Object} LoaderOptions * @property {string | ((resourcePath: string, rootContext: string) => string)} [publicPath] @@ -167,6 +173,7 @@ type Source = import("webpack").sources.Source; type Configuration = import("webpack").Configuration; type WebpackError = import("webpack").WebpackError; type AssetInfo = import("webpack").AssetInfo; +type LoaderDependency = import("./loader.js").Dependency; type LoaderOptions = { publicPath?: | string @@ -194,12 +201,21 @@ type RuntimeOptions = { type TODO = any; type CssModule = Module & { content: Buffer; - media: string; + media?: string; sourceMap?: Buffer; supports?: string; layer?: string; }; +type CssModuleConstructor = new (...args: any) => TODO; type CssDependency = import("webpack").Dependency & { + context: string | undefined; + identifier: string; + identifierIndex: number; + content: Buffer; + sourceMap?: Buffer | undefined; + media?: string | undefined; + supports?: string | undefined; + layer?: string | undefined; assetsInfo?: Map | undefined; assets?: | { diff --git a/types/loader.d.ts b/types/loader.d.ts index 24586258..e148c291 100644 --- a/types/loader.d.ts +++ b/types/loader.d.ts @@ -14,6 +14,7 @@ export type Dependency = { content: Buffer; media: string; supports?: string | undefined; + layer?: string | undefined; sourceMap?: Buffer | undefined; }; /** From f90cbb1a919fd417fc35128253988cc5df5733c2 Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 17 Jan 2022 21:14:24 +0300 Subject: [PATCH 11/19] fix: types --- src/loader.js | 4 +- types/index.d.ts | 240 ++++++++++++++++++++-------------------------- types/loader.d.ts | 14 +-- types/utils.d.ts | 22 +---- 4 files changed, 116 insertions(+), 164 deletions(-) diff --git a/src/loader.js b/src/loader.js index d15fe0fe..a5b517cb 100644 --- a/src/loader.js +++ b/src/loader.js @@ -37,14 +37,14 @@ const MiniCssExtractPlugin = require("./index"); /** * @param {string} content - * @param {TODO} context + * @param {{ context: TODO, options: LoaderOptions, locals: {[key: string]: string } | undefined }} context * @returns {string} */ function hotLoader(content, context) { const accept = context.locals ? "" : "module.hot.accept(undefined, cssReload);"; - + return `${content} if(module.hot) { // ${Date.now()} diff --git a/types/index.d.ts b/types/index.d.ts index 4de97822..8ee0afd6 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,112 +1,83 @@ export = MiniCssExtractPlugin; declare class MiniCssExtractPlugin { - /** - * @private - * @param {Compiler["webpack"]} webpack - * @returns {CssModuleConstructor} - */ - private static getCssModule; - /** - * @param {Compiler["webpack"]} webpack - * @returns {CssDependencyConstructor} - */ - static getCssDependency( - webpack: Compiler["webpack"] - ): CssDependencyConstructor; - /** - * @param {PluginOptions} [options] - */ - constructor(options?: PluginOptions | undefined); - /** - * @private - * @type {WeakMap>} - * @private - */ - private _sortedModulesCache; - /** - * @private - * @type {NormalizedPluginOptions} - */ - private options; - /** - * @private - * @type {RuntimeOptions} - */ - private runtimeOptions; - /** - * @param {Compiler} compiler - */ - apply(compiler: Compiler): void; - /** - * @private - * @param {Chunk} chunk - * @param {ChunkGraph} chunkGraph - * @returns {Iterable} - */ - private getChunkModules; - /** - * @private - * @param {Compilation} compilation - * @param {Chunk} chunk - * @param {CssModule[]} modules - * @param {Compilation["requestShortener"]} requestShortener - * @returns {Set} - */ - private sortModules; - /** - * @private - * @param {Compiler} compiler - * @param {Compilation} compilation - * @param {Chunk} chunk - * @param {CssModule[]} modules - * @param {Compiler["requestShortener"]} requestShortener - * @param {string} filenameTemplate - * @param {Parameters['output']['filename'], string | undefined>>[0]} pathData - * @returns {Source} - */ - private renderContentAsset; + /** + * @private + * @param {Compiler["webpack"]} webpack + * @returns {CssModuleConstructor} + */ + private static getCssModule; + /** + * @param {Compiler["webpack"]} webpack + * @returns {CssDependencyConstructor} + */ + static getCssDependency(webpack: Compiler["webpack"]): CssDependencyConstructor; + /** + * @param {PluginOptions} [options] + */ + constructor(options?: PluginOptions | undefined); + /** + * @private + * @type {WeakMap>} + * @private + */ + private _sortedModulesCache; + /** + * @private + * @type {NormalizedPluginOptions} + */ + private options; + /** + * @private + * @type {RuntimeOptions} + */ + private runtimeOptions; + /** + * @param {Compiler} compiler + */ + apply(compiler: Compiler): void; + /** + * @private + * @param {Chunk} chunk + * @param {ChunkGraph} chunkGraph + * @returns {Iterable} + */ + private getChunkModules; + /** + * @private + * @param {Compilation} compilation + * @param {Chunk} chunk + * @param {CssModule[]} modules + * @param {Compilation["requestShortener"]} requestShortener + * @returns {Set} + */ + private sortModules; + /** + * @private + * @param {Compiler} compiler + * @param {Compilation} compilation + * @param {Chunk} chunk + * @param {CssModule[]} modules + * @param {Compiler["requestShortener"]} requestShortener + * @param {string} filenameTemplate + * @param {Parameters['output']['filename'], string | undefined>>[0]} pathData + * @returns {Source} + */ + private renderContentAsset; } declare namespace MiniCssExtractPlugin { - export { - pluginName, - pluginSymbol, - loader, - Schema, - Compiler, - Compilation, - ChunkGraph, - Chunk, - LoaderContext, - ChunkGroup, - Module, - Dependency, - Source, - Configuration, - WebpackError, - AssetInfo, - LoaderDependency, - LoaderOptions, - PluginOptions, - NormalizedPluginOptions, - RuntimeOptions, - TODO, - CssModule, - CssModuleConstructor, - CssDependency, - CssDependencyConstructor, - }; + export { pluginName, pluginSymbol, loader, Schema, Compiler, Compilation, ChunkGraph, Chunk, LoaderContext, ChunkGroup, Module, Dependency, Source, Configuration, WebpackError, AssetInfo, LoaderDependency, LoaderOptions, PluginOptions, NormalizedPluginOptions, RuntimeOptions, TODO, CssModule, CssModuleConstructor, CssDependency, CssDependencyConstructor }; } type Compiler = import("webpack").Compiler; type CssDependencyConstructor = new (...args: any) => TODO; type PluginOptions = { - filename?: Required["output"]["filename"]; - chunkFilename?: Required["output"]["chunkFilename"]; - ignoreOrder?: boolean | undefined; - insert?: string | ((linkTag: any) => void) | undefined; - attributes?: Record | undefined; - linkType?: string | false | undefined; - runtime?: boolean | undefined; - experimentalUseImportModule?: boolean | undefined; + filename?: Required['output']['filename']; + chunkFilename?: Required['output']['chunkFilename']; + ignoreOrder?: boolean | undefined; + insert?: string | ((linkTag: any) => void) | undefined; + attributes?: Record | undefined; + linkType?: string | false | undefined; + runtime?: boolean | undefined; + experimentalUseImportModule?: boolean | undefined; }; /** @typedef {import("schema-utils/declarations/validate").Schema} Schema */ /** @typedef {import("webpack").Compiler} Compiler */ @@ -175,51 +146,46 @@ type WebpackError = import("webpack").WebpackError; type AssetInfo = import("webpack").AssetInfo; type LoaderDependency = import("./loader.js").Dependency; type LoaderOptions = { - publicPath?: - | string - | ((resourcePath: string, rootContext: string) => string) - | undefined; - emit?: boolean | undefined; - esModule?: boolean | undefined; - layer?: string | undefined; + publicPath?: string | ((resourcePath: string, rootContext: string) => string) | undefined; + emit?: boolean | undefined; + esModule?: boolean | undefined; + layer?: string | undefined; }; type NormalizedPluginOptions = { - filename: Required["output"]["filename"]; - chunkFilename?: Required["output"]["chunkFilename"]; - ignoreOrder: boolean; - insert?: string | ((linkTag: any) => void) | undefined; - attributes?: Record | undefined; - linkType?: string | false | undefined; - runtime: boolean; - experimentalUseImportModule?: boolean | undefined; + filename: Required['output']['filename']; + chunkFilename?: Required['output']['chunkFilename']; + ignoreOrder: boolean; + insert?: string | ((linkTag: any) => void) | undefined; + attributes?: Record | undefined; + linkType?: string | false | undefined; + runtime: boolean; + experimentalUseImportModule?: boolean | undefined; }; type RuntimeOptions = { - insert: string | ((linkTag: any) => void) | undefined; - linkType: string | false | "text/css"; - attributes: Record | undefined; + insert: string | ((linkTag: any) => void) | undefined; + linkType: string | false | 'text/css'; + attributes: Record | undefined; }; type TODO = any; type CssModule = Module & { - content: Buffer; - media?: string; - sourceMap?: Buffer; - supports?: string; - layer?: string; + content: Buffer; + media?: string; + sourceMap?: Buffer; + supports?: string; + layer?: string; }; type CssModuleConstructor = new (...args: any) => TODO; type CssDependency = import("webpack").Dependency & { - context: string | undefined; - identifier: string; - identifierIndex: number; - content: Buffer; - sourceMap?: Buffer | undefined; - media?: string | undefined; - supports?: string | undefined; - layer?: string | undefined; - assetsInfo?: Map | undefined; - assets?: - | { + context: string | undefined; + identifier: string; + identifierIndex: number; + content: Buffer; + sourceMap?: Buffer | undefined; + media?: string | undefined; + supports?: string | undefined; + layer?: string | undefined; + assetsInfo?: Map | undefined; + assets?: { [key: string]: any; - } - | undefined; + } | undefined; }; diff --git a/types/loader.d.ts b/types/loader.d.ts index e148c291..fd8a64b7 100644 --- a/types/loader.d.ts +++ b/types/loader.d.ts @@ -9,13 +9,13 @@ export type NormalModule = import("webpack").NormalModule; export type LoaderOptions = import("./index.js").LoaderOptions; export type TODO = any; export type Dependency = { - identifier: string; - context: string | null; - content: Buffer; - media: string; - supports?: string | undefined; - layer?: string | undefined; - sourceMap?: Buffer | undefined; + identifier: string; + context: string | null; + content: Buffer; + media: string; + supports?: string | undefined; + layer?: string | undefined; + sourceMap?: Buffer | undefined; }; /** * @this {import("webpack").LoaderContext} diff --git a/types/utils.d.ts b/types/utils.d.ts index 6653c58c..4725838d 100644 --- a/types/utils.d.ts +++ b/types/utils.d.ts @@ -13,21 +13,14 @@ export function trueFn(): boolean; * @param {string | number} id * @returns {null | Module} */ -export function findModuleById( - compilation: Compilation, - id: string | number -): null | Module; +export function findModuleById(compilation: Compilation, id: string | number): null | Module; /** * @param {LoaderContext} loaderContext * @param {string | Buffer} code * @param {string} filename * @returns {object} */ -export function evalModuleCode( - loaderContext: LoaderContext, - code: string | Buffer, - filename: string -): object; +export function evalModuleCode(loaderContext: LoaderContext, code: string | Buffer, filename: string): object; /** * @param {Module} a * @param {Module} b @@ -43,18 +36,11 @@ export const SINGLE_DOT_PATH_SEGMENT: "__mini_css_extract_plugin_single_dot_path * @param {string} request * @returns {string} */ -export function stringifyRequest( - loaderContext: LoaderContext, - request: string -): string; +export function stringifyRequest(loaderContext: LoaderContext, request: string): string; /** * @param {string} filename * @param {string} outputPath * @param {boolean} enforceRelative * @returns {string} */ -export function getUndoPath( - filename: string, - outputPath: string, - enforceRelative: boolean -): string; +export function getUndoPath(filename: string, outputPath: string, enforceRelative: boolean): string; From 638add34ee2077912add28295ba059dd10071ffa Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 17 Jan 2022 21:39:42 +0300 Subject: [PATCH 12/19] fix: types --- src/index.js | 11 ++- src/loader.js | 6 +- types/index.d.ts | 243 ++++++++++++++++++++++++++-------------------- types/loader.d.ts | 14 +-- types/utils.d.ts | 22 ++++- 5 files changed, 172 insertions(+), 124 deletions(-) diff --git a/src/index.js b/src/index.js index 084fb122..58c783c8 100644 --- a/src/index.js +++ b/src/index.js @@ -89,11 +89,11 @@ const CODE_GENERATION_RESULT = { /** @typedef {Module & { content: Buffer, media?: string, sourceMap?: Buffer, supports?: string, layer?: string }} CssModule */ -/** @typedef {{ new(...args: any): TODO }} CssModuleConstructor */ +/** @typedef {{ new(...args: TODO): TODO }} CssModuleConstructor */ /** @typedef {Dependency & { context: string | undefined, identifier: string, identifierIndex: number, content: Buffer, sourceMap?: Buffer, media?: string, supports?: string, layer?: string, assetsInfo?: Map, assets?: { [key: string]: TODO }}} CssDependency */ -/** @typedef {{ new(...args: any): TODO }} CssDependencyConstructor */ +/** @typedef {{ new(...args: TODO): CssDependency }} CssDependencyConstructor */ /** * @@ -111,7 +111,6 @@ const registered = new WeakSet(); class MiniCssExtractPlugin { /** - * @private * @param {Compiler["webpack"]} webpack * @returns {CssModuleConstructor} */ @@ -382,13 +381,15 @@ class MiniCssExtractPlugin { * Prevent creation of multiple CssDependency classes to allow other integrations to get the current CssDependency. */ if (cssDependencyCache.has(webpack)) { - return /** @type {CssDependencyConstructor} */ (cssDependencyCache.get(webpack)); + return /** @type {CssDependencyConstructor} */ ( + cssDependencyCache.get(webpack) + ); } class CssDependency extends webpack.Dependency { /** * @param {Omit} loaderDependency - * @param {string | null} context + * @param {string | undefined} context * @param {number} identifierIndex */ constructor( diff --git a/src/loader.js b/src/loader.js index a5b517cb..9ed69182 100644 --- a/src/loader.js +++ b/src/loader.js @@ -37,7 +37,7 @@ const MiniCssExtractPlugin = require("./index"); /** * @param {string} content - * @param {{ context: TODO, options: LoaderOptions, locals: {[key: string]: string } | undefined }} context + * @param {{ loaderContext: import("webpack").LoaderContext, options: LoaderOptions, locals: {[key: string]: string } | undefined }} context * @returns {string} */ function hotLoader(content, context) { @@ -49,7 +49,7 @@ function hotLoader(content, context) { if(module.hot) { // ${Date.now()} var cssReload = require(${stringifyRequest( - context.context, + context.loaderContext, path.join(__dirname, "hmr/hotModuleReplacement.js") )})(module.id, ${JSON.stringify({ ...context.options, @@ -243,7 +243,7 @@ function pitch(request) { let resultSource = `// extracted by ${MiniCssExtractPlugin.pluginName}`; resultSource += this.hot - ? hotLoader(result, { context: this.context, options, locals }) + ? hotLoader(result, { loaderContext: this, options, locals }) : result; callback(null, resultSource); diff --git a/types/index.d.ts b/types/index.d.ts index 8ee0afd6..e0985503 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,83 +1,112 @@ export = MiniCssExtractPlugin; declare class MiniCssExtractPlugin { - /** - * @private - * @param {Compiler["webpack"]} webpack - * @returns {CssModuleConstructor} - */ - private static getCssModule; - /** - * @param {Compiler["webpack"]} webpack - * @returns {CssDependencyConstructor} - */ - static getCssDependency(webpack: Compiler["webpack"]): CssDependencyConstructor; - /** - * @param {PluginOptions} [options] - */ - constructor(options?: PluginOptions | undefined); - /** - * @private - * @type {WeakMap>} - * @private - */ - private _sortedModulesCache; - /** - * @private - * @type {NormalizedPluginOptions} - */ - private options; - /** - * @private - * @type {RuntimeOptions} - */ - private runtimeOptions; - /** - * @param {Compiler} compiler - */ - apply(compiler: Compiler): void; - /** - * @private - * @param {Chunk} chunk - * @param {ChunkGraph} chunkGraph - * @returns {Iterable} - */ - private getChunkModules; - /** - * @private - * @param {Compilation} compilation - * @param {Chunk} chunk - * @param {CssModule[]} modules - * @param {Compilation["requestShortener"]} requestShortener - * @returns {Set} - */ - private sortModules; - /** - * @private - * @param {Compiler} compiler - * @param {Compilation} compilation - * @param {Chunk} chunk - * @param {CssModule[]} modules - * @param {Compiler["requestShortener"]} requestShortener - * @param {string} filenameTemplate - * @param {Parameters['output']['filename'], string | undefined>>[0]} pathData - * @returns {Source} - */ - private renderContentAsset; + /** + * @param {Compiler["webpack"]} webpack + * @returns {CssModuleConstructor} + */ + static getCssModule(webpack: Compiler["webpack"]): CssModuleConstructor; + /** + * @param {Compiler["webpack"]} webpack + * @returns {CssDependencyConstructor} + */ + static getCssDependency( + webpack: Compiler["webpack"] + ): CssDependencyConstructor; + /** + * @param {PluginOptions} [options] + */ + constructor(options?: PluginOptions | undefined); + /** + * @private + * @type {WeakMap>} + * @private + */ + private _sortedModulesCache; + /** + * @private + * @type {NormalizedPluginOptions} + */ + private options; + /** + * @private + * @type {RuntimeOptions} + */ + private runtimeOptions; + /** + * @param {Compiler} compiler + */ + apply(compiler: Compiler): void; + /** + * @private + * @param {Chunk} chunk + * @param {ChunkGraph} chunkGraph + * @returns {Iterable} + */ + private getChunkModules; + /** + * @private + * @param {Compilation} compilation + * @param {Chunk} chunk + * @param {CssModule[]} modules + * @param {Compilation["requestShortener"]} requestShortener + * @returns {Set} + */ + private sortModules; + /** + * @private + * @param {Compiler} compiler + * @param {Compilation} compilation + * @param {Chunk} chunk + * @param {CssModule[]} modules + * @param {Compiler["requestShortener"]} requestShortener + * @param {string} filenameTemplate + * @param {Parameters['output']['filename'], string | undefined>>[0]} pathData + * @returns {Source} + */ + private renderContentAsset; } declare namespace MiniCssExtractPlugin { - export { pluginName, pluginSymbol, loader, Schema, Compiler, Compilation, ChunkGraph, Chunk, LoaderContext, ChunkGroup, Module, Dependency, Source, Configuration, WebpackError, AssetInfo, LoaderDependency, LoaderOptions, PluginOptions, NormalizedPluginOptions, RuntimeOptions, TODO, CssModule, CssModuleConstructor, CssDependency, CssDependencyConstructor }; + export { + pluginName, + pluginSymbol, + loader, + Schema, + Compiler, + Compilation, + ChunkGraph, + Chunk, + LoaderContext, + ChunkGroup, + Module, + Dependency, + Source, + Configuration, + WebpackError, + AssetInfo, + LoaderDependency, + LoaderOptions, + PluginOptions, + NormalizedPluginOptions, + RuntimeOptions, + TODO, + CssModule, + CssModuleConstructor, + CssDependency, + CssDependencyConstructor, + }; } type Compiler = import("webpack").Compiler; -type CssDependencyConstructor = new (...args: any) => TODO; +type CssModuleConstructor = new (...args: any) => any; +type CssDependencyConstructor = new (...args: any) => CssDependency; type PluginOptions = { - filename?: Required['output']['filename']; - chunkFilename?: Required['output']['chunkFilename']; - ignoreOrder?: boolean | undefined; - insert?: string | ((linkTag: any) => void) | undefined; - attributes?: Record | undefined; - linkType?: string | false | undefined; - runtime?: boolean | undefined; - experimentalUseImportModule?: boolean | undefined; + filename?: Required["output"]["filename"]; + chunkFilename?: Required["output"]["chunkFilename"]; + ignoreOrder?: boolean | undefined; + insert?: string | ((linkTag: any) => void) | undefined; + attributes?: Record | undefined; + linkType?: string | false | undefined; + runtime?: boolean | undefined; + experimentalUseImportModule?: boolean | undefined; }; /** @typedef {import("schema-utils/declarations/validate").Schema} Schema */ /** @typedef {import("webpack").Compiler} Compiler */ @@ -146,46 +175,50 @@ type WebpackError = import("webpack").WebpackError; type AssetInfo = import("webpack").AssetInfo; type LoaderDependency = import("./loader.js").Dependency; type LoaderOptions = { - publicPath?: string | ((resourcePath: string, rootContext: string) => string) | undefined; - emit?: boolean | undefined; - esModule?: boolean | undefined; - layer?: string | undefined; + publicPath?: + | string + | ((resourcePath: string, rootContext: string) => string) + | undefined; + emit?: boolean | undefined; + esModule?: boolean | undefined; + layer?: string | undefined; }; type NormalizedPluginOptions = { - filename: Required['output']['filename']; - chunkFilename?: Required['output']['chunkFilename']; - ignoreOrder: boolean; - insert?: string | ((linkTag: any) => void) | undefined; - attributes?: Record | undefined; - linkType?: string | false | undefined; - runtime: boolean; - experimentalUseImportModule?: boolean | undefined; + filename: Required["output"]["filename"]; + chunkFilename?: Required["output"]["chunkFilename"]; + ignoreOrder: boolean; + insert?: string | ((linkTag: any) => void) | undefined; + attributes?: Record | undefined; + linkType?: string | false | undefined; + runtime: boolean; + experimentalUseImportModule?: boolean | undefined; }; type RuntimeOptions = { - insert: string | ((linkTag: any) => void) | undefined; - linkType: string | false | 'text/css'; - attributes: Record | undefined; + insert: string | ((linkTag: any) => void) | undefined; + linkType: string | false | "text/css"; + attributes: Record | undefined; }; type TODO = any; type CssModule = Module & { - content: Buffer; - media?: string; - sourceMap?: Buffer; - supports?: string; - layer?: string; + content: Buffer; + media?: string; + sourceMap?: Buffer; + supports?: string; + layer?: string; }; -type CssModuleConstructor = new (...args: any) => TODO; type CssDependency = import("webpack").Dependency & { - context: string | undefined; - identifier: string; - identifierIndex: number; - content: Buffer; - sourceMap?: Buffer | undefined; - media?: string | undefined; - supports?: string | undefined; - layer?: string | undefined; - assetsInfo?: Map | undefined; - assets?: { + context: string | undefined; + identifier: string; + identifierIndex: number; + content: Buffer; + sourceMap?: Buffer | undefined; + media?: string | undefined; + supports?: string | undefined; + layer?: string | undefined; + assetsInfo?: Map | undefined; + assets?: + | { [key: string]: any; - } | undefined; + } + | undefined; }; diff --git a/types/loader.d.ts b/types/loader.d.ts index fd8a64b7..e148c291 100644 --- a/types/loader.d.ts +++ b/types/loader.d.ts @@ -9,13 +9,13 @@ export type NormalModule = import("webpack").NormalModule; export type LoaderOptions = import("./index.js").LoaderOptions; export type TODO = any; export type Dependency = { - identifier: string; - context: string | null; - content: Buffer; - media: string; - supports?: string | undefined; - layer?: string | undefined; - sourceMap?: Buffer | undefined; + identifier: string; + context: string | null; + content: Buffer; + media: string; + supports?: string | undefined; + layer?: string | undefined; + sourceMap?: Buffer | undefined; }; /** * @this {import("webpack").LoaderContext} diff --git a/types/utils.d.ts b/types/utils.d.ts index 4725838d..6653c58c 100644 --- a/types/utils.d.ts +++ b/types/utils.d.ts @@ -13,14 +13,21 @@ export function trueFn(): boolean; * @param {string | number} id * @returns {null | Module} */ -export function findModuleById(compilation: Compilation, id: string | number): null | Module; +export function findModuleById( + compilation: Compilation, + id: string | number +): null | Module; /** * @param {LoaderContext} loaderContext * @param {string | Buffer} code * @param {string} filename * @returns {object} */ -export function evalModuleCode(loaderContext: LoaderContext, code: string | Buffer, filename: string): object; +export function evalModuleCode( + loaderContext: LoaderContext, + code: string | Buffer, + filename: string +): object; /** * @param {Module} a * @param {Module} b @@ -36,11 +43,18 @@ export const SINGLE_DOT_PATH_SEGMENT: "__mini_css_extract_plugin_single_dot_path * @param {string} request * @returns {string} */ -export function stringifyRequest(loaderContext: LoaderContext, request: string): string; +export function stringifyRequest( + loaderContext: LoaderContext, + request: string +): string; /** * @param {string} filename * @param {string} outputPath * @param {boolean} enforceRelative * @returns {string} */ -export function getUndoPath(filename: string, outputPath: string, enforceRelative: boolean): string; +export function getUndoPath( + filename: string, + outputPath: string, + enforceRelative: boolean +): string; From 2f447059b2dd498df480a4d7c51f94553df10e6e Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 17 Jan 2022 21:45:56 +0300 Subject: [PATCH 13/19] fix: types --- src/index.js | 6 ++---- types/index.d.ts | 6 +++--- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/index.js b/src/index.js index 58c783c8..243ac673 100644 --- a/src/index.js +++ b/src/index.js @@ -89,9 +89,9 @@ const CODE_GENERATION_RESULT = { /** @typedef {Module & { content: Buffer, media?: string, sourceMap?: Buffer, supports?: string, layer?: string }} CssModule */ -/** @typedef {{ new(...args: TODO): TODO }} CssModuleConstructor */ +/** @typedef {{ new(...args: TODO): CssModule }} CssModuleConstructor */ -/** @typedef {Dependency & { context: string | undefined, identifier: string, identifierIndex: number, content: Buffer, sourceMap?: Buffer, media?: string, supports?: string, layer?: string, assetsInfo?: Map, assets?: { [key: string]: TODO }}} CssDependency */ +/** @typedef {Dependency & { context: string | undefined, identifier: string, identifierIndex: number, content: Buffer, sourceMap?: Buffer, media?: string, supports?: string, layer?: TODO, assetsInfo?: Map, assets?: { [key: string]: TODO }}} CssDependency */ /** @typedef {{ new(...args: TODO): CssDependency }} CssDependencyConstructor */ @@ -122,8 +122,6 @@ class MiniCssExtractPlugin { return /** @type {CssModuleConstructor} */ (cssModuleCache.get(webpack)); } - // TODO bug with layer - // @ts-ignore class CssModule extends webpack.Module { /** * @param {CssDependency} dependency diff --git a/types/index.d.ts b/types/index.d.ts index e0985503..3dd981f6 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -96,8 +96,8 @@ declare namespace MiniCssExtractPlugin { }; } type Compiler = import("webpack").Compiler; -type CssModuleConstructor = new (...args: any) => any; -type CssDependencyConstructor = new (...args: any) => CssDependency; +type CssModuleConstructor = new (...args: TODO) => CssModule; +type CssDependencyConstructor = new (...args: TODO) => CssDependency; type PluginOptions = { filename?: Required["output"]["filename"]; chunkFilename?: Required["output"]["chunkFilename"]; @@ -214,7 +214,7 @@ type CssDependency = import("webpack").Dependency & { sourceMap?: Buffer | undefined; media?: string | undefined; supports?: string | undefined; - layer?: string | undefined; + layer?: TODO; assetsInfo?: Map | undefined; assets?: | { From 4b4aec4e1a4fa33c6b48e6562a70b7430a0d2caf Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 17 Jan 2022 21:47:49 +0300 Subject: [PATCH 14/19] fix: types --- src/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 243ac673..bfb364c5 100644 --- a/src/index.js +++ b/src/index.js @@ -346,8 +346,7 @@ class MiniCssExtractPlugin { const sourceMap = read(); const assets = read(); const assetsInfo = read(); - // @ts-ignore - const dep = new CssModule({ + const dep = new /** @type {CssModuleConstructor} */ (CssModule)({ context: contextModule, identifier, identifierIndex, From 7ac58cb1010e70904440afdaf8b5ff7cec5ad811 Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 17 Jan 2022 21:56:39 +0300 Subject: [PATCH 15/19] fix: types --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index bfb364c5..ae97f8c6 100644 --- a/src/index.js +++ b/src/index.js @@ -689,7 +689,7 @@ class MiniCssExtractPlugin { ).filter((module) => module.type === MODULE_TYPE); const filenameTemplate = - /** @type {TODO} */ + /** @type {string} */ ( chunk.canBeInitial() ? this.options.filename From a2d3c3421b38851d609464c85efa253bf8d5a1a1 Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 17 Jan 2022 22:30:35 +0300 Subject: [PATCH 16/19] fix: types --- src/index.js | 53 +++++++++++++++++++++++++++--------------------- types/index.d.ts | 14 ++++++++++--- 2 files changed, 41 insertions(+), 26 deletions(-) diff --git a/src/index.js b/src/index.js index ae97f8c6..3ead5b09 100644 --- a/src/index.js +++ b/src/index.js @@ -89,11 +89,15 @@ const CODE_GENERATION_RESULT = { /** @typedef {Module & { content: Buffer, media?: string, sourceMap?: Buffer, supports?: string, layer?: string }} CssModule */ -/** @typedef {{ new(...args: TODO): CssModule }} CssModuleConstructor */ +/** @typedef {CssDependency} CssModuleDependency */ -/** @typedef {Dependency & { context: string | undefined, identifier: string, identifierIndex: number, content: Buffer, sourceMap?: Buffer, media?: string, supports?: string, layer?: TODO, assetsInfo?: Map, assets?: { [key: string]: TODO }}} CssDependency */ +/** @typedef {{ new(dependency: CssModuleDependency): CssModule }} CssModuleConstructor */ -/** @typedef {{ new(...args: TODO): CssDependency }} CssDependencyConstructor */ +/** @typedef {Dependency & { context: string | null, identifier: string, identifierIndex: number, content: Buffer, sourceMap?: Buffer, media?: string, supports?: string, layer?: TODO, assetsInfo?: Map, assets?: { [key: string]: TODO }}} CssDependency */ + +/** @typedef {Omit} CssDependencyOptions */ + +/** @typedef {{ new(loaderDependency: CssDependencyOptions, context: string | null, identifierIndex: number): CssDependency }} CssDependencyConstructor */ /** * @@ -124,7 +128,7 @@ class MiniCssExtractPlugin { class CssModule extends webpack.Module { /** - * @param {CssDependency} dependency + * @param {CssModuleDependency} dependency */ constructor({ context, @@ -138,7 +142,7 @@ class MiniCssExtractPlugin { assets, assetsInfo, }) { - super(MODULE_TYPE, context); + super(MODULE_TYPE, /** @type {string | undefined} */ (context)); this.id = ""; this._context = context; @@ -346,18 +350,20 @@ class MiniCssExtractPlugin { const sourceMap = read(); const assets = read(); const assetsInfo = read(); - const dep = new /** @type {CssModuleConstructor} */ (CssModule)({ - context: contextModule, - identifier, - identifierIndex, - content, - layer, - supports, - media, - sourceMap, - assets, - assetsInfo, - }); + const dep = new CssModule( + /** @type {TODO} */ ({ + context: contextModule, + identifier, + identifierIndex, + content, + layer, + supports, + media, + sourceMap, + assets, + assetsInfo, + }) + ); dep.deserialize(context); @@ -385,8 +391,8 @@ class MiniCssExtractPlugin { class CssDependency extends webpack.Dependency { /** - * @param {Omit} loaderDependency - * @param {string | undefined} context + * @param {CssDependencyOptions} loaderDependency + * @param {string | null} context * @param {number} identifierIndex */ constructor( @@ -641,12 +647,13 @@ class MiniCssExtractPlugin { compiler.hooks.thisCompilation.tap(pluginName, (compilation) => { class CssModuleFactory { /** - * @param {TODO} dependencies - * @param {TODO} callback + * @param {{ dependencies: Dependency[] }} dependencies + * @param {(arg0?: Error, arg1?: TODO) => void} callback */ // eslint-disable-next-line class-methods-use-this create({ dependencies: [dependency] }, callback) { - callback(null, new CssModule(dependency)); + // eslint-disable-next-line no-undefined + callback(undefined, new CssModule(/** @type {CssDependency} */ (dependency))); } } @@ -1039,7 +1046,7 @@ class MiniCssExtractPlugin { `${RuntimeGlobals.require}.miniCssF`, /** * @param {Chunk} referencedChunk - * @returns {any} + * @returns {TODO} */ (referencedChunk) => { if (!referencedChunk.contentHash[MODULE_TYPE]) { diff --git a/types/index.d.ts b/types/index.d.ts index 3dd981f6..aa5b430c 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -90,14 +90,20 @@ declare namespace MiniCssExtractPlugin { RuntimeOptions, TODO, CssModule, + CssModuleDependency, CssModuleConstructor, CssDependency, + CssDependencyOptions, CssDependencyConstructor, }; } type Compiler = import("webpack").Compiler; -type CssModuleConstructor = new (...args: TODO) => CssModule; -type CssDependencyConstructor = new (...args: TODO) => CssDependency; +type CssModuleConstructor = new (dependency: CssModuleDependency) => CssModule; +type CssDependencyConstructor = new ( + loaderDependency: CssDependencyOptions, + context: string | null, + identifierIndex: number +) => CssDependency; type PluginOptions = { filename?: Required["output"]["filename"]; chunkFilename?: Required["output"]["chunkFilename"]; @@ -206,8 +212,9 @@ type CssModule = Module & { supports?: string; layer?: string; }; +type CssModuleDependency = CssDependency; type CssDependency = import("webpack").Dependency & { - context: string | undefined; + context: string | null; identifier: string; identifierIndex: number; content: Buffer; @@ -222,3 +229,4 @@ type CssDependency = import("webpack").Dependency & { } | undefined; }; +type CssDependencyOptions = Omit; From 95c5dde715f7402a069b64958203de7a4715f856 Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 17 Jan 2022 22:36:05 +0300 Subject: [PATCH 17/19] fix: types --- src/index.js | 37 +++++++++++++++++++------------------ types/index.d.ts | 20 +++++++++++++------- 2 files changed, 32 insertions(+), 25 deletions(-) diff --git a/src/index.js b/src/index.js index 3ead5b09..7e09615a 100644 --- a/src/index.js +++ b/src/index.js @@ -87,13 +87,13 @@ const CODE_GENERATION_RESULT = { runtimeRequirements: new Set(), }; -/** @typedef {Module & { content: Buffer, media?: string, sourceMap?: Buffer, supports?: string, layer?: string }} CssModule */ +/** @typedef {Module & { content: Buffer, media?: string, sourceMap?: Buffer, supports?: string, layer?: string, assets?: { [key: string]: TODO }, assetsInfo?: Map }} CssModule */ -/** @typedef {CssDependency} CssModuleDependency */ +/** @typedef {{ context: string | null, identifier: string, identifierIndex: number, content: Buffer, sourceMap?: Buffer, media?: string, supports?: string, layer?: TODO, assetsInfo?: Map, assets?: { [key: string]: TODO }}} CssModuleDependency */ /** @typedef {{ new(dependency: CssModuleDependency): CssModule }} CssModuleConstructor */ -/** @typedef {Dependency & { context: string | null, identifier: string, identifierIndex: number, content: Buffer, sourceMap?: Buffer, media?: string, supports?: string, layer?: TODO, assetsInfo?: Map, assets?: { [key: string]: TODO }}} CssDependency */ +/** @typedef {Dependency & CssModuleDependency} CssDependency */ /** @typedef {Omit} CssDependencyOptions */ @@ -350,20 +350,18 @@ class MiniCssExtractPlugin { const sourceMap = read(); const assets = read(); const assetsInfo = read(); - const dep = new CssModule( - /** @type {TODO} */ ({ - context: contextModule, - identifier, - identifierIndex, - content, - layer, - supports, - media, - sourceMap, - assets, - assetsInfo, - }) - ); + const dep = new CssModule({ + context: contextModule, + identifier, + identifierIndex, + content, + layer, + supports, + media, + sourceMap, + assets, + assetsInfo, + }); dep.deserialize(context); @@ -653,7 +651,10 @@ class MiniCssExtractPlugin { // eslint-disable-next-line class-methods-use-this create({ dependencies: [dependency] }, callback) { // eslint-disable-next-line no-undefined - callback(undefined, new CssModule(/** @type {CssDependency} */ (dependency))); + callback( + undefined, + new CssModule(/** @type {CssDependency} */ (dependency)) + ); } } diff --git a/types/index.d.ts b/types/index.d.ts index aa5b430c..fc81c9ee 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -205,15 +205,20 @@ type RuntimeOptions = { attributes: Record | undefined; }; type TODO = any; -type CssModule = Module & { +type CssModule = import("webpack").Module & { content: Buffer; - media?: string; - sourceMap?: Buffer; - supports?: string; - layer?: string; + media?: string | undefined; + sourceMap?: Buffer | undefined; + supports?: string | undefined; + layer?: string | undefined; + assets?: + | { + [key: string]: any; + } + | undefined; + assetsInfo?: Map | undefined; }; -type CssModuleDependency = CssDependency; -type CssDependency = import("webpack").Dependency & { +type CssModuleDependency = { context: string | null; identifier: string; identifierIndex: number; @@ -229,4 +234,5 @@ type CssDependency = import("webpack").Dependency & { } | undefined; }; +type CssDependency = Dependency & CssModuleDependency; type CssDependencyOptions = Omit; From 4a03b2e5e5ce2d456d37310c4eeb46d6afda1b1c Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 17 Jan 2022 22:49:52 +0300 Subject: [PATCH 18/19] chore: fix styles --- src/loader.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/loader.js b/src/loader.js index 9ed69182..885c2828 100644 --- a/src/loader.js +++ b/src/loader.js @@ -44,7 +44,7 @@ function hotLoader(content, context) { const accept = context.locals ? "" : "module.hot.accept(undefined, cssReload);"; - + return `${content} if(module.hot) { // ${Date.now()} From 26b7d9dd6097ecf9db66ea4c7a480fd38278f356 Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 17 Jan 2022 22:56:35 +0300 Subject: [PATCH 19/19] chore: fix types --- src/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/index.js b/src/index.js index 7e09615a..7f0e2842 100644 --- a/src/index.js +++ b/src/index.js @@ -20,7 +20,6 @@ const { /** @typedef {import("webpack").Compilation} Compilation */ /** @typedef {import("webpack").ChunkGraph} ChunkGraph */ /** @typedef {import("webpack").Chunk} Chunk */ -/** @typedef {import("webpack").LoaderContext} LoaderContext */ /** @typedef {Parameters[0]} ChunkGroup */ /** @typedef {import("webpack").Module} Module */ /** @typedef {import("webpack").Dependency} Dependency */