From 8e79d681ec16ff1ee8da35daa288f67797847abe Mon Sep 17 00:00:00 2001 From: Jacob Ebey Date: Mon, 21 Dec 2020 20:53:45 -0800 Subject: [PATCH] feat(options): added query option that gets appended to the chunk href Added query option that gets appended to the chunk href. This option can be a string or a synchronous function. --- src/CssLoadingRuntimeModule.js | 9 ++++++++- src/index.js | 14 +++++++++++++- src/plugin-options.json | 11 +++++++++++ .../validate-plugin-options.test.js.snap | 16 ++++++++-------- 4 files changed, 40 insertions(+), 10 deletions(-) diff --git a/src/CssLoadingRuntimeModule.js b/src/CssLoadingRuntimeModule.js index ce16abc6..50935847 100644 --- a/src/CssLoadingRuntimeModule.js +++ b/src/CssLoadingRuntimeModule.js @@ -50,6 +50,13 @@ module.exports = class CssLoadingRuntimeModule extends RuntimeModule { if (!withLoading && !withHmr) return null; + let queryPostfix = ''; + if (typeof this.runtimeOptions.query === 'string') { + queryPostfix = ` + ${JSON.stringify(this.runtimeOptions.query)}`; + } else if (typeof this.runtimeOptions.query === 'function') { + queryPostfix = ` + ${JSON.stringify(this.runtimeOptions.query() || '')}`; + } + return Template.asString([ `var createStylesheet = ${runtimeTemplate.basicFunction( 'chunkId, fullhref, resolve, reject', @@ -174,7 +181,7 @@ module.exports = class CssLoadingRuntimeModule extends RuntimeModule { [ 'applyHandlers.push(applyHandler);', `chunkIds.forEach(${runtimeTemplate.basicFunction('chunkId', [ - `var href = ${RuntimeGlobals.require}.miniCssF(chunkId);`, + `var href = ${RuntimeGlobals.require}.miniCssF(chunkId)${queryPostfix};`, `var fullhref = ${RuntimeGlobals.publicPath} + href;`, 'const oldTag = findStylesheet(href, fullhref);', 'if(!oldTag) return;', diff --git a/src/index.js b/src/index.js index 6e791e57..57407399 100644 --- a/src/index.js +++ b/src/index.js @@ -64,6 +64,7 @@ class MiniCssExtractPlugin { this.runtimeOptions = { insert, linkType, + query: options.query, }; this.runtimeOptions.attributes = Template.asString( @@ -369,6 +370,17 @@ class MiniCssExtractPlugin { } ); + let queryPostfix = ''; + if (typeof this.runtimeOptions.query === 'string') { + queryPostfix = ` + ${JSON.stringify( + this.runtimeOptions.query + )}`; + } else if (typeof this.runtimeOptions.query === 'function') { + queryPostfix = ` + ${JSON.stringify( + this.runtimeOptions.query() || '' + )}`; + } + return Template.asString([ source, '', @@ -379,7 +391,7 @@ class MiniCssExtractPlugin { Template.indent([ 'promises.push(installedCssChunks[chunkId] = new Promise(function(resolve, reject) {', Template.indent([ - `var href = ${linkHrefPath};`, + `var href = ${linkHrefPath}${queryPostfix};`, `var fullhref = ${mainTemplate.requireFn}.p + href;`, 'var existingLinkTags = document.getElementsByTagName("link");', 'for(var i = 0; i < existingLinkTags.length; i++) {', diff --git a/src/plugin-options.json b/src/plugin-options.json index 04e5c9ed..616d1d7a 100644 --- a/src/plugin-options.json +++ b/src/plugin-options.json @@ -49,6 +49,17 @@ "type": "boolean" } ] + }, + "query": { + "description": "A configurable postfix to be appended to the href of the chunk.", + "anyOf": [ + { + "type": "string" + }, + { + "instanceof": "Function" + } + ] } } } diff --git a/test/__snapshots__/validate-plugin-options.test.js.snap b/test/__snapshots__/validate-plugin-options.test.js.snap index 8d9e1b45..f41db0ae 100644 --- a/test/__snapshots__/validate-plugin-options.test.js.snap +++ b/test/__snapshots__/validate-plugin-options.test.js.snap @@ -99,47 +99,47 @@ exports[`validate options should throw an error on the "linkType" option with "i exports[`validate options should throw an error on the "unknown" option with "/test/" value 1`] = ` "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema. - options has an unknown property 'unknown'. These properties are valid: - object { filename?, chunkFilename?, ignoreOrder?, insert?, attributes?, linkType? }" + object { filename?, chunkFilename?, ignoreOrder?, insert?, attributes?, linkType?, query? }" `; exports[`validate options should throw an error on the "unknown" option with "[]" value 1`] = ` "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema. - options has an unknown property 'unknown'. These properties are valid: - object { filename?, chunkFilename?, ignoreOrder?, insert?, attributes?, linkType? }" + object { filename?, chunkFilename?, ignoreOrder?, insert?, attributes?, linkType?, query? }" `; exports[`validate options should throw an error on the "unknown" option with "{"foo":"bar"}" value 1`] = ` "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema. - options has an unknown property 'unknown'. These properties are valid: - object { filename?, chunkFilename?, ignoreOrder?, insert?, attributes?, linkType? }" + object { filename?, chunkFilename?, ignoreOrder?, insert?, attributes?, linkType?, query? }" `; exports[`validate options should throw an error on the "unknown" option with "{}" value 1`] = ` "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema. - options has an unknown property 'unknown'. These properties are valid: - object { filename?, chunkFilename?, ignoreOrder?, insert?, attributes?, linkType? }" + object { filename?, chunkFilename?, ignoreOrder?, insert?, attributes?, linkType?, query? }" `; exports[`validate options should throw an error on the "unknown" option with "1" value 1`] = ` "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema. - options has an unknown property 'unknown'. These properties are valid: - object { filename?, chunkFilename?, ignoreOrder?, insert?, attributes?, linkType? }" + object { filename?, chunkFilename?, ignoreOrder?, insert?, attributes?, linkType?, query? }" `; exports[`validate options should throw an error on the "unknown" option with "false" value 1`] = ` "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema. - options has an unknown property 'unknown'. These properties are valid: - object { filename?, chunkFilename?, ignoreOrder?, insert?, attributes?, linkType? }" + object { filename?, chunkFilename?, ignoreOrder?, insert?, attributes?, linkType?, query? }" `; exports[`validate options should throw an error on the "unknown" option with "test" value 1`] = ` "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema. - options has an unknown property 'unknown'. These properties are valid: - object { filename?, chunkFilename?, ignoreOrder?, insert?, attributes?, linkType? }" + object { filename?, chunkFilename?, ignoreOrder?, insert?, attributes?, linkType?, query? }" `; exports[`validate options should throw an error on the "unknown" option with "true" value 1`] = ` "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema. - options has an unknown property 'unknown'. These properties are valid: - object { filename?, chunkFilename?, ignoreOrder?, insert?, attributes?, linkType? }" + object { filename?, chunkFilename?, ignoreOrder?, insert?, attributes?, linkType?, query? }" `;