From 5cfb0abd96c223780aec755b1f642c8f8de30a1e Mon Sep 17 00:00:00 2001 From: Alexander Akait <4567934+alexander-akait@users.noreply.github.com> Date: Sat, 11 Sep 2021 18:52:24 +0300 Subject: [PATCH] refactor: code of the `runtime` option (#832) --- README.md | 14 +- src/index.js | 15 +- src/plugin-options.json | 4 +- ...st.js.snap => runtime-option.test.js.snap} | 22 +- .../validate-plugin-options.test.js.snap | 16 +- test/cases/no-runtime/async.css | 3 + test/cases/no-runtime/expected/async.css | 4 + test/cases/no-runtime/expected/async.js | 13 + test/cases/no-runtime/expected/main.css | 4 + test/cases/no-runtime/expected/main.js | 262 ++++++++++++++++++ test/cases/no-runtime/index.js | 3 + test/cases/no-runtime/style.css | 3 + test/cases/no-runtime/webpack.config.js | 19 ++ ...-option.test.js => runtime-option.test.js} | 22 +- 14 files changed, 358 insertions(+), 46 deletions(-) rename test/__snapshots__/{noRuntime-option.test.js.snap => runtime-option.test.js.snap} (57%) create mode 100644 test/cases/no-runtime/async.css create mode 100644 test/cases/no-runtime/expected/async.css create mode 100644 test/cases/no-runtime/expected/async.js create mode 100644 test/cases/no-runtime/expected/main.css create mode 100644 test/cases/no-runtime/expected/main.js create mode 100644 test/cases/no-runtime/index.js create mode 100644 test/cases/no-runtime/style.css create mode 100644 test/cases/no-runtime/webpack.config.js rename test/{noRuntime-option.test.js => runtime-option.test.js} (91%) diff --git a/README.md b/README.md index fab71bbd..4f2edb57 100644 --- a/README.md +++ b/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,11 +266,14 @@ 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. @@ -278,10 +281,11 @@ An option to avoid the runtime generation. Assets are still extracted and can be ```js const MiniCssExtractPlugin = require("mini-css-extract-plugin"); + module.exports = { plugins: [ new MiniCssExtractPlugin({ - skipRuntimeLoading: true, + runtime: false, }), ], module: { diff --git a/src/index.js b/src/index.js index 1378946d..9dd313be 100644 --- a/src/index.js +++ b/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); diff --git a/src/plugin-options.json b/src/plugin-options.json index 7d70379d..8da511d4 100644 --- a/src/plugin-options.json +++ b/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" } } diff --git a/test/__snapshots__/noRuntime-option.test.js.snap b/test/__snapshots__/runtime-option.test.js.snap similarity index 57% rename from test/__snapshots__/noRuntime-option.test.js.snap rename to test/__snapshots__/runtime-option.test.js.snap index 93ab1046..56ffd112 100644 --- a/test/__snapshots__/noRuntime-option.test.js.snap +++ b/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`] = ` " style-loader test - +

Body

@@ -14,15 +14,15 @@ exports[`noRuntime option should work when noRuntime option is "false": DOM 1`] " `; -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`] = ` " style-loader test - +

Body

@@ -32,11 +32,11 @@ exports[`noRuntime option should work when noRuntime option is "true": DOM 1`] = " `; -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`] = ` " style-loader test @@ -50,6 +50,6 @@ exports[`noRuntime option should work without noRuntime option: DOM 1`] = ` " `; -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 []`; diff --git a/test/__snapshots__/validate-plugin-options.test.js.snap b/test/__snapshots__/validate-plugin-options.test.js.snap index ed3d6acd..c849007f 100644 --- a/test/__snapshots__/validate-plugin-options.test.js.snap +++ b/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? }" `; diff --git a/test/cases/no-runtime/async.css b/test/cases/no-runtime/async.css new file mode 100644 index 00000000..b1645094 --- /dev/null +++ b/test/cases/no-runtime/async.css @@ -0,0 +1,3 @@ +.async { + color: red; +} diff --git a/test/cases/no-runtime/expected/async.css b/test/cases/no-runtime/expected/async.css new file mode 100644 index 00000000..e665100a --- /dev/null +++ b/test/cases/no-runtime/expected/async.css @@ -0,0 +1,4 @@ +.async { + color: red; +} + diff --git a/test/cases/no-runtime/expected/async.js b/test/cases/no-runtime/expected/async.js new file mode 100644 index 00000000..0aad0f24 --- /dev/null +++ b/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 + + +/***/ }) + +}]); \ No newline at end of file diff --git a/test/cases/no-runtime/expected/main.css b/test/cases/no-runtime/expected/main.css new file mode 100644 index 00000000..cebc5c1c --- /dev/null +++ b/test/cases/no-runtime/expected/main.css @@ -0,0 +1,4 @@ +body { + background: red; +} + diff --git a/test/cases/no-runtime/expected/main.js b/test/cases/no-runtime/expected/main.js new file mode 100644 index 00000000..481fab1a --- /dev/null +++ b/test/cases/no-runtime/expected/main.js @@ -0,0 +1,262 @@ +/******/ (() => { // webpackBootstrap +/******/ "use strict"; +/******/ var __webpack_modules__ = ([ +/* 0 */, +/* 1 */ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +__webpack_require__.r(__webpack_exports__); +// extracted by mini-css-extract-plugin + + +/***/ }) +/******/ ]); +/************************************************************************/ +/******/ // The module cache +/******/ var __webpack_module_cache__ = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ // Check if module is in cache +/******/ var cachedModule = __webpack_module_cache__[moduleId]; +/******/ if (cachedModule !== undefined) { +/******/ return cachedModule.exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = __webpack_module_cache__[moduleId] = { +/******/ // no module.id needed +/******/ // no module.loaded needed +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = __webpack_modules__; +/******/ +/************************************************************************/ +/******/ /* webpack/runtime/ensure chunk */ +/******/ (() => { +/******/ __webpack_require__.f = {}; +/******/ // This file contains only the entry chunk. +/******/ // The chunk loading function for additional chunks +/******/ __webpack_require__.e = (chunkId) => { +/******/ return Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => { +/******/ __webpack_require__.f[key](chunkId, promises); +/******/ return promises; +/******/ }, [])); +/******/ }; +/******/ })(); +/******/ +/******/ /* webpack/runtime/get javascript chunk filename */ +/******/ (() => { +/******/ // This function allow to reference async chunks +/******/ __webpack_require__.u = (chunkId) => { +/******/ // return url for filenames based on template +/******/ return "" + "async" + ".js"; +/******/ }; +/******/ })(); +/******/ +/******/ /* webpack/runtime/global */ +/******/ (() => { +/******/ __webpack_require__.g = (function() { +/******/ if (typeof globalThis === 'object') return globalThis; +/******/ try { +/******/ return this || new Function('return this')(); +/******/ } catch (e) { +/******/ if (typeof window === 'object') return window; +/******/ } +/******/ })(); +/******/ })(); +/******/ +/******/ /* webpack/runtime/hasOwnProperty shorthand */ +/******/ (() => { +/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) +/******/ })(); +/******/ +/******/ /* webpack/runtime/load script */ +/******/ (() => { +/******/ var inProgress = {}; +/******/ // data-webpack is not used as build has no uniqueName +/******/ // loadScript function to load a script via script tag +/******/ __webpack_require__.l = (url, done, key, chunkId) => { +/******/ if(inProgress[url]) { inProgress[url].push(done); return; } +/******/ var script, needAttach; +/******/ if(key !== undefined) { +/******/ var scripts = document.getElementsByTagName("script"); +/******/ for(var i = 0; i < scripts.length; i++) { +/******/ var s = scripts[i]; +/******/ if(s.getAttribute("src") == url) { script = s; break; } +/******/ } +/******/ } +/******/ if(!script) { +/******/ needAttach = true; +/******/ script = document.createElement('script'); +/******/ +/******/ script.charset = 'utf-8'; +/******/ script.timeout = 120; +/******/ if (__webpack_require__.nc) { +/******/ script.setAttribute("nonce", __webpack_require__.nc); +/******/ } +/******/ +/******/ script.src = url; +/******/ } +/******/ inProgress[url] = [done]; +/******/ var onScriptComplete = (prev, event) => { +/******/ // avoid mem leaks in IE. +/******/ script.onerror = script.onload = null; +/******/ clearTimeout(timeout); +/******/ var doneFns = inProgress[url]; +/******/ delete inProgress[url]; +/******/ script.parentNode && script.parentNode.removeChild(script); +/******/ doneFns && doneFns.forEach((fn) => (fn(event))); +/******/ if(prev) return prev(event); +/******/ } +/******/ ; +/******/ var timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target: script }), 120000); +/******/ script.onerror = onScriptComplete.bind(null, script.onerror); +/******/ script.onload = onScriptComplete.bind(null, script.onload); +/******/ needAttach && document.head.appendChild(script); +/******/ }; +/******/ })(); +/******/ +/******/ /* webpack/runtime/make namespace object */ +/******/ (() => { +/******/ // define __esModule on exports +/******/ __webpack_require__.r = (exports) => { +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); +/******/ } +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ })(); +/******/ +/******/ /* webpack/runtime/publicPath */ +/******/ (() => { +/******/ var scriptUrl; +/******/ if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + ""; +/******/ var document = __webpack_require__.g.document; +/******/ if (!scriptUrl && document) { +/******/ if (document.currentScript) +/******/ scriptUrl = document.currentScript.src +/******/ if (!scriptUrl) { +/******/ var scripts = document.getElementsByTagName("script"); +/******/ if(scripts.length) scriptUrl = scripts[scripts.length - 1].src +/******/ } +/******/ } +/******/ // When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration +/******/ // or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic. +/******/ if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser"); +/******/ scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/"); +/******/ __webpack_require__.p = scriptUrl; +/******/ })(); +/******/ +/******/ /* webpack/runtime/jsonp chunk loading */ +/******/ (() => { +/******/ // no baseURI +/******/ +/******/ // object to store loaded and loading chunks +/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched +/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded +/******/ var installedChunks = { +/******/ 1: 0 +/******/ }; +/******/ +/******/ __webpack_require__.f.j = (chunkId, promises) => { +/******/ // JSONP chunk loading for javascript +/******/ var installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : undefined; +/******/ if(installedChunkData !== 0) { // 0 means "already installed". +/******/ +/******/ // a Promise means "currently loading". +/******/ if(installedChunkData) { +/******/ promises.push(installedChunkData[2]); +/******/ } else { +/******/ if(true) { // all chunks have JS +/******/ // setup Promise in chunk cache +/******/ var promise = new Promise((resolve, reject) => (installedChunkData = installedChunks[chunkId] = [resolve, reject])); +/******/ promises.push(installedChunkData[2] = promise); +/******/ +/******/ // start chunk loading +/******/ var url = __webpack_require__.p + __webpack_require__.u(chunkId); +/******/ // create error before stack unwound to get useful stacktrace later +/******/ var error = new Error(); +/******/ var loadingEnded = (event) => { +/******/ if(__webpack_require__.o(installedChunks, chunkId)) { +/******/ installedChunkData = installedChunks[chunkId]; +/******/ if(installedChunkData !== 0) installedChunks[chunkId] = undefined; +/******/ if(installedChunkData) { +/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type); +/******/ var realSrc = event && event.target && event.target.src; +/******/ error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')'; +/******/ error.name = 'ChunkLoadError'; +/******/ error.type = errorType; +/******/ error.request = realSrc; +/******/ installedChunkData[1](error); +/******/ } +/******/ } +/******/ }; +/******/ __webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId); +/******/ } else installedChunks[chunkId] = 0; +/******/ } +/******/ } +/******/ }; +/******/ +/******/ // no prefetching +/******/ +/******/ // no preloaded +/******/ +/******/ // no HMR +/******/ +/******/ // no HMR manifest +/******/ +/******/ // no on chunks loaded +/******/ +/******/ // install a JSONP callback for chunk loading +/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => { +/******/ var [chunkIds, moreModules, runtime] = data; +/******/ // add "moreModules" to the modules object, +/******/ // then flag all "chunkIds" as loaded and fire callback +/******/ var moduleId, chunkId, i = 0; +/******/ if(chunkIds.some((id) => (installedChunks[id] !== 0))) { +/******/ for(moduleId in moreModules) { +/******/ if(__webpack_require__.o(moreModules, moduleId)) { +/******/ __webpack_require__.m[moduleId] = moreModules[moduleId]; +/******/ } +/******/ } +/******/ if(runtime) var result = runtime(__webpack_require__); +/******/ } +/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data); +/******/ for(;i < chunkIds.length; i++) { +/******/ chunkId = chunkIds[i]; +/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) { +/******/ installedChunks[chunkId][0](); +/******/ } +/******/ installedChunks[chunkIds[i]] = 0; +/******/ } +/******/ +/******/ } +/******/ +/******/ var chunkLoadingGlobal = self["webpackChunk"] = self["webpackChunk"] || []; +/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0)); +/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal)); +/******/ })(); +/******/ +/************************************************************************/ +var __webpack_exports__ = {}; +// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk. +(() => { +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1); + + +__webpack_require__.e(/* import() | async */ 0).then(__webpack_require__.bind(__webpack_require__, 2)); + +})(); + +/******/ })() +; \ No newline at end of file diff --git a/test/cases/no-runtime/index.js b/test/cases/no-runtime/index.js new file mode 100644 index 00000000..00fb6ed3 --- /dev/null +++ b/test/cases/no-runtime/index.js @@ -0,0 +1,3 @@ +import "./style.css"; + +import(/* webpackChunkName: "async" */ "./async.css"); diff --git a/test/cases/no-runtime/style.css b/test/cases/no-runtime/style.css new file mode 100644 index 00000000..67ce83e4 --- /dev/null +++ b/test/cases/no-runtime/style.css @@ -0,0 +1,3 @@ +body { + background: red; +} diff --git a/test/cases/no-runtime/webpack.config.js b/test/cases/no-runtime/webpack.config.js new file mode 100644 index 00000000..bd2ce78a --- /dev/null +++ b/test/cases/no-runtime/webpack.config.js @@ -0,0 +1,19 @@ +import Self from "../../../src"; + +module.exports = { + entry: "./index.js", + module: { + rules: [ + { + test: /\.css$/, + use: [Self.loader, "css-loader"], + }, + ], + }, + plugins: [ + new Self({ + filename: "[name].css", + runtime: false, + }), + ], +}; diff --git a/test/noRuntime-option.test.js b/test/runtime-option.test.js similarity index 91% rename from test/noRuntime-option.test.js rename to test/runtime-option.test.js index b71b4463..d920e6a0 100644 --- a/test/noRuntime-option.test.js +++ b/test/runtime-option.test.js @@ -12,7 +12,7 @@ import { } from "./helpers/index"; describe("noRuntime option", () => { - it(`should work without noRuntime option`, async () => { + it("should work without the 'runtime' option", async () => { const compiler = getCompiler( "attributes.js", {}, @@ -41,7 +41,7 @@ describe("noRuntime option", () => { expect(getErrors(stats)).toMatchSnapshot("errors"); }); - it(`should work when noRuntime option is "false"`, async () => { + it("should work when the 'runtime' option is 'false'", async () => { const compiler = getCompiler( "attributes.js", {}, @@ -53,7 +53,7 @@ describe("noRuntime option", () => { }, plugins: [ new MiniCssExtractPlugin({ - noRuntime: false, + runtime: false, filename: "[name].css", }), ], @@ -63,15 +63,17 @@ describe("noRuntime option", () => { runInJsDom("main.bundle.js", compiler, stats, (dom, bundle) => { expect(dom.serialize()).toMatchSnapshot("DOM"); - expect(bundle).toContain("webpack/runtime/css loading"); - expect(bundle).toContain("webpack/runtime/get mini-css chunk filename"); + expect(bundle).not.toContain("webpack/runtime/css loading"); + expect(bundle).not.toContain( + "webpack/runtime/get mini-css chunk filename" + ); }); expect(getWarnings(stats)).toMatchSnapshot("warnings"); expect(getErrors(stats)).toMatchSnapshot("errors"); }); - it(`should work when noRuntime option is "true"`, async () => { + it("should work when the 'runtime' option is 'true'", async () => { const compiler = getCompiler( "attributes.js", {}, @@ -83,7 +85,7 @@ describe("noRuntime option", () => { }, plugins: [ new MiniCssExtractPlugin({ - noRuntime: true, + runtime: true, filename: "[name].css", }), ], @@ -93,10 +95,8 @@ describe("noRuntime option", () => { runInJsDom("main.bundle.js", compiler, stats, (dom, bundle) => { expect(dom.serialize()).toMatchSnapshot("DOM"); - expect(bundle).not.toContain("webpack/runtime/css loading"); - expect(bundle).not.toContain( - "webpack/runtime/get mini-css chunk filename" - ); + expect(bundle).toContain("webpack/runtime/css loading"); + expect(bundle).toContain("webpack/runtime/get mini-css chunk filename"); }); expect(getWarnings(stats)).toMatchSnapshot("warnings");