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.

Author: jacob-ebey

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;',

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++) {',

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"
+        }
+      ]
     }
   }
 }

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? }"
 `;