refactor: code of the runtime option (webpack-contrib#832)

Author: alexander-akait

README.md

@@ -87,7 +87,7 @@ module.exports = {
 |                      **[`insert`](#insert)**                      | `{String\|Function}` | `document.head.appendChild(linkTag);` | Inserts the `link` tag at the given position for [non-initial (async)](https://webpack.js.org/concepts/under-the-hood/#chunks) CSS chunks |
 |                  **[`attributes`](#attributes)**                  |      `{Object}`      |                 `{}`                  | Adds custom attributes to the `link` tag for [non-initial (async)](https://webpack.js.org/concepts/under-the-hood/#chunks) CSS chunks     |
 |                    **[`linkType`](#linkType)**                    | `{String\|Boolean}`  |              `text/css`               | Allows loading asynchronous chunks with a custom link type                                                                                |
-|                   **[`noRuntime`](#linkType)**                    |     `{Boolean}`      |                `false`                | Skips the runtime generation                                                                                                              |
+|                     **[`runtime`](#runtime)**                     |     `{Boolean}`      |                `true`                 | Allows to enable/disable the runtime generation                                                                                           |
 | **[`experimentalUseImportModule`](#experimentalUseImportModule)** |     `{Boolean}`      |                `false`                | Use an experimental webpack API to execute modules instead of child compilers                                                             |
 
 #### `filename`
@@ -266,22 +266,26 @@ module.exports = {
 };
 ```
 
-#### `noRuntime`
+#### `runtime`
 
-##### `Boolean`
+Type: `Boolean`
+Default: `true`
 
-An option to avoid the runtime generation. Assets are still extracted and can be used for a custom loading methods. For example, you can use [assets-webpack-plugin](https://github.com/ztoben/assets-webpack-plugin) to retreive them then use your own runtime code to download assets when needed.
+Allows to enable/disable the runtime generation.
+CSS will be still extracted and can be used for a custom loading methods.
+For example, you can use [assets-webpack-plugin](https://github.com/ztoben/assets-webpack-plugin) to retreive them then use your own runtime code to download assets when needed.
 
 `true` to skip.
 
 **webpack.config.js**
 
 ```js
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
 module.exports = {
   plugins: [
     new MiniCssExtractPlugin({
-      skipRuntimeLoading: true,
+      runtime: false,
     }),
   ],
   module: {

src/index.js

@@ -337,7 +337,7 @@ class MiniCssExtractPlugin {
         filename: DEFAULT_FILENAME,
         ignoreOrder: false,
         experimentalUseImportModule: false,
-        noRuntime: false,
+        runtime: true,
       },
       options
     );
@@ -521,13 +521,12 @@ class MiniCssExtractPlugin {
         }
       });
 
-      // All the code below is dedicated to the runtime and
-      // can be skipped in a noRuntime context
-      if (this.options.noRuntime) return;
-
-      const { Template } = webpack;
+      // All the code below is dedicated to the runtime and can be skipped when the `runtime` option is `false`
+      if (!this.options.runtime) {
+        return;
+      }
 
-      const { RuntimeGlobals, runtime } = webpack;
+      const { Template, RuntimeGlobals, RuntimeModule, runtime } = webpack;
 
       // eslint-disable-next-line no-shadow
       const getCssChunkObject = (mainChunk, compilation) => {
@@ -550,8 +549,6 @@ class MiniCssExtractPlugin {
         return obj;
       };
 
-      const { RuntimeModule } = webpack;
-
       class CssLoadingRuntimeModule extends RuntimeModule {
         constructor(runtimeRequirements, runtimeOptions) {
           super("css loading", 10);

src/plugin-options.json

@@ -66,9 +66,9 @@
       "description": "This option allows loading asynchronous chunks with a custom link type",
       "link": "https://github.com/webpack-contrib/mini-css-extract-plugin#linktype"
     },
-    "noRuntime": {
+    "runtime": {
       "type": "boolean",
-      "description": "An option to avoid the runtime generation. Assets are still extracted and can be used for a custom loading methods.",
+      "description": "Enabled/Disables runtime generation. CSS will be still extracted and can be used for a custom loading methods.",
       "link": "https://github.com/webpack-contrib/mini-css-extract-plugin#noRuntime"
     }
   }

test/__snapshots__/noRuntime-option.test.js.snap test/__snapshots__/runtime-option.test.js.snap

@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`noRuntime option should work when noRuntime option is "false": DOM 1`] = `
+exports[`noRuntime option should work when the 'runtime' option is 'false': DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"simple.css\\"><script charset=\\"utf-8\\" src=\\"simple.bundle.js\\"></script></head>
+<script charset=\\"utf-8\\" src=\\"simple.bundle.js\\"></script></head>
 <body>
   <h1>Body</h1>
   <div class=\\"target\\"></div>
@@ -14,15 +14,15 @@ exports[`noRuntime option should work when noRuntime option is "false": DOM 1`]
 </body></html>"
 `;
 
-exports[`noRuntime option should work when noRuntime option is "false": errors 1`] = `Array []`;
+exports[`noRuntime option should work when the 'runtime' option is 'false': errors 1`] = `Array []`;
 
-exports[`noRuntime option should work when noRuntime option is "false": warnings 1`] = `Array []`;
+exports[`noRuntime option should work when the 'runtime' option is 'false': warnings 1`] = `Array []`;
 
-exports[`noRuntime option should work when noRuntime option is "true": DOM 1`] = `
+exports[`noRuntime option should work when the 'runtime' option is 'true': DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<script charset=\\"utf-8\\" src=\\"simple.bundle.js\\"></script></head>
+<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"simple.css\\"><script charset=\\"utf-8\\" src=\\"simple.bundle.js\\"></script></head>
 <body>
   <h1>Body</h1>
   <div class=\\"target\\"></div>
@@ -32,11 +32,11 @@ exports[`noRuntime option should work when noRuntime option is "true": DOM 1`] =
 </body></html>"
 `;
 
-exports[`noRuntime option should work when noRuntime option is "true": errors 1`] = `Array []`;
+exports[`noRuntime option should work when the 'runtime' option is 'true': errors 1`] = `Array []`;
 
-exports[`noRuntime option should work when noRuntime option is "true": warnings 1`] = `Array []`;
+exports[`noRuntime option should work when the 'runtime' option is 'true': warnings 1`] = `Array []`;
 
-exports[`noRuntime option should work without noRuntime option: DOM 1`] = `
+exports[`noRuntime option should work without the 'runtime' option: DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
@@ -50,6 +50,6 @@ exports[`noRuntime option should work without noRuntime option: DOM 1`] = `
 </body></html>"
 `;
 
-exports[`noRuntime option should work without noRuntime option: errors 1`] = `Array []`;
+exports[`noRuntime option should work without the 'runtime' option: errors 1`] = `Array []`;
 
-exports[`noRuntime option should work without noRuntime option: warnings 1`] = `Array []`;
+exports[`noRuntime option should work without the 'runtime' option: warnings 1`] = `Array []`;

test/__snapshots__/validate-plugin-options.test.js.snap

@@ -117,47 +117,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?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, noRuntime? }"
+   object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, runtime? }"
 `;
 
 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?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, noRuntime? }"
+   object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, runtime? }"
 `;
 
 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?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, noRuntime? }"
+   object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, runtime? }"
 `;
 
 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?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, noRuntime? }"
+   object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, runtime? }"
 `;
 
 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?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, noRuntime? }"
+   object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, runtime? }"
 `;
 
 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?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, noRuntime? }"
+   object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, runtime? }"
 `;
 
 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?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, noRuntime? }"
+   object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, runtime? }"
 `;
 
 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?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, noRuntime? }"
+   object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, runtime? }"
 `;

test/cases/no-runtime/async.css

@@ -0,0 +1,3 @@
+.async {
+  color: red;
+}

test/cases/no-runtime/expected/async.css

@@ -0,0 +1,4 @@
+.async {
+  color: red;
+}
+

test/cases/no-runtime/expected/async.js

@@ -0,0 +1,13 @@
+"use strict";
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[0],{
+
+/***/ 2:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ })
+
+}]);

test/cases/no-runtime/expected/main.css

@@ -0,0 +1,4 @@
+body {
+  background: red;
+}
+