From 85f6eda32b32e477a582d14c512437ceae71002c Mon Sep 17 00:00:00 2001 From: Bert Hertogen Date: Mon, 14 May 2018 13:45:19 +0200 Subject: [PATCH 1/6] feat: allow filename to be a function --- src/index.js | 23 +++++++++++++++-- test/cases/filename-function/app.js | 1 + .../filename-function/expected/index.css | 2 ++ .../expected/this.is.app.css | 2 ++ test/cases/filename-function/index.js | 1 + test/cases/filename-function/style.css | 1 + .../cases/filename-function/webpack.config.js | 25 +++++++++++++++++++ 7 files changed, 53 insertions(+), 2 deletions(-) create mode 100644 test/cases/filename-function/app.js create mode 100644 test/cases/filename-function/expected/index.css create mode 100644 test/cases/filename-function/expected/this.is.app.css create mode 100644 test/cases/filename-function/index.js create mode 100644 test/cases/filename-function/style.css create mode 100644 test/cases/filename-function/webpack.config.js diff --git a/src/index.js b/src/index.js index 6aa5436f..3d0dff8c 100644 --- a/src/index.js +++ b/src/index.js @@ -111,6 +111,11 @@ class MiniCssExtractPlugin { options ); if (!this.options.chunkFilename) { + if (this.isFunction(this.options.filename)) { + throw new Error( + `You are required to provide a value for chunkFilename when using a Function for this.options.filename, please specify the [name], [id] or [chunkhash] in this function` + ); + } const { filename } = this.options; const hasName = filename.includes('[name]'); const hasId = filename.includes('[id]'); @@ -170,7 +175,7 @@ class MiniCssExtractPlugin { renderedModules, compilation.runtimeTemplate.requestShortener ), - filenameTemplate: this.options.filename, + filenameTemplate: this.getFilename(chunk, this.options.filename), pathOptions: { chunk, contentHashType: NS, @@ -194,7 +199,10 @@ class MiniCssExtractPlugin { renderedModules, compilation.runtimeTemplate.requestShortener ), - filenameTemplate: this.options.chunkFilename, + filenameTemplate: this.getFilename( + chunk, + this.options.chunkFilename + ), pathOptions: { chunk, contentHashType: NS, @@ -366,6 +374,17 @@ class MiniCssExtractPlugin { }); } + getFilename(chunk, filename) { + return this.isFunction(filename) ? filename(chunk) : filename; + } + + isFunction(functionToCheck) { + return ( + functionToCheck && + {}.toString.call(functionToCheck) === '[object Function]' + ); + } + getCssChunkObject(mainChunk) { const obj = {}; for (const chunk of mainChunk.getAllAsyncChunks()) { diff --git a/test/cases/filename-function/app.js b/test/cases/filename-function/app.js new file mode 100644 index 00000000..aa3357bf --- /dev/null +++ b/test/cases/filename-function/app.js @@ -0,0 +1 @@ +import './style.css'; diff --git a/test/cases/filename-function/expected/index.css b/test/cases/filename-function/expected/index.css new file mode 100644 index 00000000..aea53e43 --- /dev/null +++ b/test/cases/filename-function/expected/index.css @@ -0,0 +1,2 @@ +body { background: red; } + diff --git a/test/cases/filename-function/expected/this.is.app.css b/test/cases/filename-function/expected/this.is.app.css new file mode 100644 index 00000000..aea53e43 --- /dev/null +++ b/test/cases/filename-function/expected/this.is.app.css @@ -0,0 +1,2 @@ +body { background: red; } + diff --git a/test/cases/filename-function/index.js b/test/cases/filename-function/index.js new file mode 100644 index 00000000..aa3357bf --- /dev/null +++ b/test/cases/filename-function/index.js @@ -0,0 +1 @@ +import './style.css'; diff --git a/test/cases/filename-function/style.css b/test/cases/filename-function/style.css new file mode 100644 index 00000000..31fc5b8a --- /dev/null +++ b/test/cases/filename-function/style.css @@ -0,0 +1 @@ +body { background: red; } diff --git a/test/cases/filename-function/webpack.config.js b/test/cases/filename-function/webpack.config.js new file mode 100644 index 00000000..eacf17d4 --- /dev/null +++ b/test/cases/filename-function/webpack.config.js @@ -0,0 +1,25 @@ +const Self = require('../../../'); + +module.exports = { + entry: { + index: './index.js', + app: './app.js', + }, + module: { + rules: [ + { + test: /\.css$/, + use: [ + Self.loader, + 'css-loader', + ], + }, + ], + }, + plugins: [ + new Self({ + filename: (chunk) => chunk == 'app' ? 'this.is.app.css' : '[name].css', + chunkFilename: (chunk) => '[name].css', + }), + ], +}; From 52cf7f6cf2d8d035ca9bd85d3fc999c1cde715c1 Mon Sep 17 00:00:00 2001 From: Bert Hertogen Date: Mon, 14 May 2018 14:05:55 +0200 Subject: [PATCH 2/6] feat: update tests --- src/index.js | 4 +++- test/cases/filename-function/webpack.config.js | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 3d0dff8c..de4a77aa 100644 --- a/src/index.js +++ b/src/index.js @@ -268,7 +268,9 @@ class MiniCssExtractPlugin { if (Object.keys(chunkMap).length > 0) { const chunkMaps = chunk.getChunkMaps(); const linkHrefPath = mainTemplate.getAssetPath( - JSON.stringify(this.options.chunkFilename), + JSON.stringify( + this.getFilename(chunk, this.options.chunkFilename) + ), { hash: `" + ${mainTemplate.renderCurrentHashCode(hash)} + "`, hashWithLength: (length) => diff --git a/test/cases/filename-function/webpack.config.js b/test/cases/filename-function/webpack.config.js index eacf17d4..02892760 100644 --- a/test/cases/filename-function/webpack.config.js +++ b/test/cases/filename-function/webpack.config.js @@ -18,8 +18,8 @@ module.exports = { }, plugins: [ new Self({ - filename: (chunk) => chunk == 'app' ? 'this.is.app.css' : '[name].css', - chunkFilename: (chunk) => '[name].css', + filename: (data) => data.chunk.name == 'app' ? 'this.is.app.css' : `[name].css`, + chunkFilename: (data) => '[name].css', }), ], }; From cf7b731e7e96bf6a174ba95078b945ffbd370497 Mon Sep 17 00:00:00 2001 From: Bert Hertogen Date: Mon, 14 May 2018 14:09:05 +0200 Subject: [PATCH 3/6] feat: remove throw and change isFunction --- src/index.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/index.js b/src/index.js index de4a77aa..e2008c29 100644 --- a/src/index.js +++ b/src/index.js @@ -111,11 +111,6 @@ class MiniCssExtractPlugin { options ); if (!this.options.chunkFilename) { - if (this.isFunction(this.options.filename)) { - throw new Error( - `You are required to provide a value for chunkFilename when using a Function for this.options.filename, please specify the [name], [id] or [chunkhash] in this function` - ); - } const { filename } = this.options; const hasName = filename.includes('[name]'); const hasId = filename.includes('[id]'); @@ -381,10 +376,7 @@ class MiniCssExtractPlugin { } isFunction(functionToCheck) { - return ( - functionToCheck && - {}.toString.call(functionToCheck) === '[object Function]' - ); + return typeof functionToCheck === 'function'; } getCssChunkObject(mainChunk) { From a06f5df00f0b9a48000dc63a87f4d8e6fea4e07a Mon Sep 17 00:00:00 2001 From: Bert Hertogen Date: Mon, 14 May 2018 14:29:43 +0200 Subject: [PATCH 4/6] feat: pass correct chunk --- src/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index e2008c29..fa0eb8de 100644 --- a/src/index.js +++ b/src/index.js @@ -372,7 +372,9 @@ class MiniCssExtractPlugin { } getFilename(chunk, filename) { - return this.isFunction(filename) ? filename(chunk) : filename; + return this.isFunction(filename) + ? filename(chunk.chunk || chunk) + : filename; } isFunction(functionToCheck) { From 835624c0e91d0362778a2d897f3cac64ab57dbc2 Mon Sep 17 00:00:00 2001 From: Bert Hertogen Date: Mon, 14 May 2018 18:27:36 +0200 Subject: [PATCH 5/6] feat: fix test and names --- src/index.js | 6 +++--- test/cases/filename-function/webpack.config.js | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/index.js b/src/index.js index fa0eb8de..24771019 100644 --- a/src/index.js +++ b/src/index.js @@ -372,9 +372,9 @@ class MiniCssExtractPlugin { } getFilename(chunk, filename) { - return this.isFunction(filename) - ? filename(chunk.chunk || chunk) - : filename; + console.log('--chunk--'); + console.log(chunk); + return this.isFunction(filename) ? filename(chunk) : filename; } isFunction(functionToCheck) { diff --git a/test/cases/filename-function/webpack.config.js b/test/cases/filename-function/webpack.config.js index 02892760..6f0c267f 100644 --- a/test/cases/filename-function/webpack.config.js +++ b/test/cases/filename-function/webpack.config.js @@ -18,8 +18,8 @@ module.exports = { }, plugins: [ new Self({ - filename: (data) => data.chunk.name == 'app' ? 'this.is.app.css' : `[name].css`, - chunkFilename: (data) => '[name].css', + filename: (chunk) => chunk.name == 'app' ? 'this.is.app.css' : `[name].css`, + chunkFilename: (chunk) => '[name].css', }), ], }; From 44cd88f4ad68b6139e21b7ec5381d0996566c7b2 Mon Sep 17 00:00:00 2001 From: Bert Hertogen Date: Fri, 25 May 2018 20:10:52 +0200 Subject: [PATCH 6/6] feat: remove console.log's Store filename in options, this way function is called once --- src/index.js | 26 +++++++++++++++++++------- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/src/index.js b/src/index.js index 24771019..74e14351 100644 --- a/src/index.js +++ b/src/index.js @@ -170,7 +170,11 @@ class MiniCssExtractPlugin { renderedModules, compilation.runtimeTemplate.requestShortener ), - filenameTemplate: this.getFilename(chunk, this.options.filename), + filenameTemplate: this.getFilename( + chunk, + this.options.filename, + this.options.processedFilename + ), pathOptions: { chunk, contentHashType: NS, @@ -196,7 +200,8 @@ class MiniCssExtractPlugin { ), filenameTemplate: this.getFilename( chunk, - this.options.chunkFilename + this.options.chunkFilename, + this.options.processedChunkFilename ), pathOptions: { chunk, @@ -264,7 +269,11 @@ class MiniCssExtractPlugin { const chunkMaps = chunk.getChunkMaps(); const linkHrefPath = mainTemplate.getAssetPath( JSON.stringify( - this.getFilename(chunk, this.options.chunkFilename) + this.getFilename( + chunk, + this.options.chunkFilename, + this.options.processedChunkFilename + ) ), { hash: `" + ${mainTemplate.renderCurrentHashCode(hash)} + "`, @@ -371,10 +380,13 @@ class MiniCssExtractPlugin { }); } - getFilename(chunk, filename) { - console.log('--chunk--'); - console.log(chunk); - return this.isFunction(filename) ? filename(chunk) : filename; + getFilename(chunk, filename, processedFilename) { + if (!processedFilename) { + processedFilename = this.isFunction(filename) + ? filename(chunk) + : filename; + } + return processedFilename; } isFunction(functionToCheck) {