From ae3f41fec58471e5133295664a6113e517499864 Mon Sep 17 00:00:00 2001 From: Jan Nicklas Date: Thu, 29 Feb 2024 09:23:29 +0100 Subject: [PATCH] fix: improve esMododule exports --- README.md | 42 --------- src/index.js | 1 - src/loader-options.json | 5 - src/loader.js | 13 +-- .../expected/main.js | 4 +- .../expected/main.js | 9 +- .../expected/main.mjs | 4 +- .../es-named-export-as-is/expected/main.js | 4 +- .../expected/main.mjs | 4 +- .../expected/main.css | 12 --- .../expected/main.js | 91 ------------------- .../es-named-export-with-default/index.js | 4 - .../es-named-export-with-default/style.css | 11 --- .../webpack.config.js | 36 -------- test/cases/es-named-export/expected/main.js | 4 +- .../expected/main.js | 4 +- types/index.d.ts | 2 - 17 files changed, 29 insertions(+), 221 deletions(-) delete mode 100644 test/cases/es-named-export-with-default/expected/main.css delete mode 100644 test/cases/es-named-export-with-default/expected/main.js delete mode 100644 test/cases/es-named-export-with-default/index.js delete mode 100644 test/cases/es-named-export-with-default/style.css delete mode 100644 test/cases/es-named-export-with-default/webpack.config.js diff --git a/README.md b/README.md index 417fe6b6..7d499a09 100644 --- a/README.md +++ b/README.md @@ -407,7 +407,6 @@ module.exports = { - **[`publicPath`](#publicPath)** - **[`emit`](#emit)** - **[`esModule`](#esModule)** -- **[`defaultExport`](#defaultExport)** #### `publicPath` @@ -550,47 +549,6 @@ module.exports = { }; ``` -#### `defaultExport` - -Type: - -```ts -type defaultExport = boolean; -``` - -Default: `false` - -By default, `mini-css-extract-plugin` generates JS modules with a default export. -However for name exports, each local is exported as a named export. - -In case you need both default and named exports, you can enable this option: - -**webpack.config.js** - -```js -const MiniCssExtractPlugin = require("mini-css-extract-plugin"); - -module.exports = { - plugins: [new MiniCssExtractPlugin()], - module: { - rules: [ - { - test: /\.css$/i, - use: [ - { - loader: MiniCssExtractPlugin.loader, - options: { - defaultExport: true, - }, - }, - "css-loader", - ], - }, - ], - }, -}; -``` - ## Examples ### Recommended diff --git a/src/index.js b/src/index.js index 3601833f..51809608 100644 --- a/src/index.js +++ b/src/index.js @@ -36,7 +36,6 @@ const { * @property {string | ((resourcePath: string, rootContext: string) => string)} [publicPath] * @property {boolean} [emit] * @property {boolean} [esModule] - * @property {boolean} [defaultExport] * @property {string} [layer] */ diff --git a/src/loader-options.json b/src/loader-options.json index 6b333001..6d10fec2 100644 --- a/src/loader-options.json +++ b/src/loader-options.json @@ -25,11 +25,6 @@ "description": "Generates JS modules that use the ES modules syntax.", "link": "https://github.com/webpack-contrib/mini-css-extract-plugin#esmodule" }, - "defaultExport": { - "type": "boolean", - "description": "Generates JS modules with the default export syntax even for named exports.", - "link": "https://github.com/webpack-contrib/mini-css-extract-plugin#defaultexports" - }, "layer": { "type": "string" } diff --git a/src/loader.js b/src/loader.js index 53b74984..b6f4c744 100644 --- a/src/loader.js +++ b/src/loader.js @@ -124,11 +124,6 @@ function pitch(request) { const esModule = typeof options.esModule !== "undefined" ? options.esModule : true; - const defaultExport = - typeof options.defaultExport !== "undefined" - ? options.defaultExport - : false; - /** * @param {Dependency[] | [null, object][]} dependencies */ @@ -276,10 +271,10 @@ function pitch(request) { const exportsString = `export { ${identifiers .map(([id, key]) => `${id} as ${JSON.stringify(key)}`) .join(", ")} }`; - const exportDefaultString = defaultExport - ? `export default ${JSON.stringify(locals)}\n` - : ""; - return `${localsString}\n${exportsString}\n${exportDefaultString}`; + const exportDefaultString = `export default ${JSON.stringify( + locals + )}`; + return `${localsString}\n${exportsString}\n${exportDefaultString}\n`; } return `\n${ diff --git a/test/cases/custom-loader-with-functional-exports/expected/main.js b/test/cases/custom-loader-with-functional-exports/expected/main.js index e3e3d2ff..0e7d18db 100644 --- a/test/cases/custom-loader-with-functional-exports/expected/main.js +++ b/test/cases/custom-loader-with-functional-exports/expected/main.js @@ -8,12 +8,14 @@ __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ cnA: () => (/* binding */ _1), -/* harmony export */ cnB: () => (/* binding */ _2) +/* harmony export */ cnB: () => (/* binding */ _2), +/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); // extracted by mini-css-extract-plugin var _1 = () => "class-name-a"; var _2 = () => "class-name-b"; +/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({}); /***/ }) diff --git a/test/cases/es-module-concatenation-modules/expected/main.js b/test/cases/es-module-concatenation-modules/expected/main.js index 918474db..14034b62 100644 --- a/test/cases/es-module-concatenation-modules/expected/main.js +++ b/test/cases/es-module-concatenation-modules/expected/main.js @@ -48,14 +48,16 @@ __webpack_require__.d(__webpack_exports__, { var a_namespaceObject = {}; __webpack_require__.r(a_namespaceObject); __webpack_require__.d(a_namespaceObject, { - a: () => (_1) + a: () => (_1), + "default": () => (a) }); // NAMESPACE OBJECT: ./b.css var b_namespaceObject = {}; __webpack_require__.r(b_namespaceObject); __webpack_require__.d(b_namespaceObject, { - b: () => (b_1) + b: () => (b_1), + "default": () => (b) }); // NAMESPACE OBJECT: ./index.js @@ -71,16 +73,19 @@ __webpack_require__.d(index_namespaceObject, { // extracted by mini-css-extract-plugin var _1 = "foo__a"; +/* harmony default export */ const a = ({"a":"foo__a"}); ;// CONCATENATED MODULE: ./b.css // extracted by mini-css-extract-plugin var b_1 = "foo__b"; +/* harmony default export */ const b = ({"b":"foo__b"}); ;// CONCATENATED MODULE: ./c.css // extracted by mini-css-extract-plugin var c_1 = "foo__c"; +/* harmony default export */ const c = ({"c":"foo__c"}); ;// CONCATENATED MODULE: ./index.js /* eslint-disable import/no-namespace */ diff --git a/test/cases/es-named-export-as-is-output-module/expected/main.mjs b/test/cases/es-named-export-as-is-output-module/expected/main.mjs index dd030372..3a6c09be 100644 --- a/test/cases/es-named-export-as-is-output-module/expected/main.mjs +++ b/test/cases/es-named-export-as-is-output-module/expected/main.mjs @@ -7,13 +7,15 @@ __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "a-class": () => (/* binding */ _1), /* harmony export */ b__class: () => (/* binding */ _2), -/* harmony export */ cClass: () => (/* binding */ _3) +/* harmony export */ cClass: () => (/* binding */ _3), +/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); // extracted by mini-css-extract-plugin var _1 = "Xh041yLR4iCP4RGjge50"; var _2 = "NMuRsxoDwvW8BhSXhFAY"; var _3 = "ayWIv09rPsAqE2JznIsI"; +/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"a-class":"Xh041yLR4iCP4RGjge50","b__class":"NMuRsxoDwvW8BhSXhFAY","cClass":"ayWIv09rPsAqE2JznIsI"}); /***/ }) diff --git a/test/cases/es-named-export-as-is/expected/main.js b/test/cases/es-named-export-as-is/expected/main.js index a17ffa68..a8b1d5fa 100644 --- a/test/cases/es-named-export-as-is/expected/main.js +++ b/test/cases/es-named-export-as-is/expected/main.js @@ -9,13 +9,15 @@ __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "a-class": () => (/* binding */ _1), /* harmony export */ b__class: () => (/* binding */ _2), -/* harmony export */ cClass: () => (/* binding */ _3) +/* harmony export */ cClass: () => (/* binding */ _3), +/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); // extracted by mini-css-extract-plugin var _1 = "Xh041yLR4iCP4RGjge50"; var _2 = "NMuRsxoDwvW8BhSXhFAY"; var _3 = "ayWIv09rPsAqE2JznIsI"; +/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"a-class":"Xh041yLR4iCP4RGjge50","b__class":"NMuRsxoDwvW8BhSXhFAY","cClass":"ayWIv09rPsAqE2JznIsI"}); /***/ }) diff --git a/test/cases/es-named-export-output-module/expected/main.mjs b/test/cases/es-named-export-output-module/expected/main.mjs index eea1b171..74d00fae 100644 --- a/test/cases/es-named-export-output-module/expected/main.mjs +++ b/test/cases/es-named-export-output-module/expected/main.mjs @@ -7,13 +7,15 @@ __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ aClass: () => (/* binding */ _1), /* harmony export */ bClass: () => (/* binding */ _2), -/* harmony export */ cClass: () => (/* binding */ _3) +/* harmony export */ cClass: () => (/* binding */ _3), +/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); // extracted by mini-css-extract-plugin var _1 = "foo__style__a-class"; var _2 = "foo__style__b__class"; var _3 = "foo__style__cClass"; +/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"aClass":"foo__style__a-class","bClass":"foo__style__b__class","cClass":"foo__style__cClass"}); /***/ }) diff --git a/test/cases/es-named-export-with-default/expected/main.css b/test/cases/es-named-export-with-default/expected/main.css deleted file mode 100644 index f0c5f7a2..00000000 --- a/test/cases/es-named-export-with-default/expected/main.css +++ /dev/null @@ -1,12 +0,0 @@ -.foo__style__aClass { - background: red; -} - -.foo__style__bClass { - color: green; -} - -.foo__style__cClass { - color: blue; -} - diff --git a/test/cases/es-named-export-with-default/expected/main.js b/test/cases/es-named-export-with-default/expected/main.js deleted file mode 100644 index 793d6b94..00000000 --- a/test/cases/es-named-export-with-default/expected/main.js +++ /dev/null @@ -1,91 +0,0 @@ -/******/ (() => { // webpackBootstrap -/******/ "use strict"; -/******/ var __webpack_modules__ = ([ -/* 0 */, -/* 1 */ -/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { - -__webpack_require__.r(__webpack_exports__); -/* harmony export */ __webpack_require__.d(__webpack_exports__, { -/* harmony export */ aClass: () => (/* binding */ _1), -/* harmony export */ bClass: () => (/* binding */ _2), -/* harmony export */ cClass: () => (/* binding */ _3) -/* harmony export */ }); -// extracted by mini-css-extract-plugin -var _1 = "foo__style__aClass"; -var _2 = "foo__style__bClass"; -var _3 = "foo__style__cClass"; - - - -/***/ }) -/******/ ]); -/************************************************************************/ -/******/ // 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; -/******/ } -/******/ -/************************************************************************/ -/******/ /* webpack/runtime/define property getters */ -/******/ (() => { -/******/ // define getter functions for harmony exports -/******/ __webpack_require__.d = (exports, definition) => { -/******/ for(var key in definition) { -/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { -/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); -/******/ } -/******/ } -/******/ }; -/******/ })(); -/******/ -/******/ /* webpack/runtime/hasOwnProperty shorthand */ -/******/ (() => { -/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) -/******/ })(); -/******/ -/******/ /* 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 }); -/******/ }; -/******/ })(); -/******/ -/************************************************************************/ -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); - - -// eslint-disable-next-line no-console -console.log({ css: _style_css__WEBPACK_IMPORTED_MODULE_0__["default"], aClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.aClass, bClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.bClass, cClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.cClass }); - -})(); - -/******/ })() -; \ No newline at end of file diff --git a/test/cases/es-named-export-with-default/index.js b/test/cases/es-named-export-with-default/index.js deleted file mode 100644 index ccbeff4d..00000000 --- a/test/cases/es-named-export-with-default/index.js +++ /dev/null @@ -1,4 +0,0 @@ -import css, { aClass, bClass, cClass } from "./style.css"; - -// eslint-disable-next-line no-console -console.log({ css, aClass, bClass, cClass }); diff --git a/test/cases/es-named-export-with-default/style.css b/test/cases/es-named-export-with-default/style.css deleted file mode 100644 index 19d3d6be..00000000 --- a/test/cases/es-named-export-with-default/style.css +++ /dev/null @@ -1,11 +0,0 @@ -.aClass { - background: red; -} - -.bClass { - color: green; -} - -.cClass { - color: blue; -} diff --git a/test/cases/es-named-export-with-default/webpack.config.js b/test/cases/es-named-export-with-default/webpack.config.js deleted file mode 100644 index e14a75b8..00000000 --- a/test/cases/es-named-export-with-default/webpack.config.js +++ /dev/null @@ -1,36 +0,0 @@ -const Self = require("../../../"); - -module.exports = { - entry: "./index.js", - module: { - rules: [ - { - test: /\.css$/, - use: [ - { - loader: Self.loader, - options: { - defaultExport: false, - }, - }, - { - loader: "css-loader", - options: { - esModule: true, - modules: { - namedExport: true, - exportLocalsConvention: "asIs", - localIdentName: "foo__[name]__[local]", - }, - }, - }, - ], - }, - ], - }, - plugins: [ - new Self({ - filename: "[name].css", - }), - ], -}; diff --git a/test/cases/es-named-export/expected/main.js b/test/cases/es-named-export/expected/main.js index 08202354..6ddc762a 100644 --- a/test/cases/es-named-export/expected/main.js +++ b/test/cases/es-named-export/expected/main.js @@ -9,13 +9,15 @@ __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "a-class": () => (/* binding */ _1), /* harmony export */ b__class: () => (/* binding */ _2), -/* harmony export */ cClass: () => (/* binding */ _3) +/* harmony export */ cClass: () => (/* binding */ _3), +/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); // extracted by mini-css-extract-plugin var _1 = "foo__style__a-class"; var _2 = "foo__style__b__class"; var _3 = "foo__style__cClass"; +/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"a-class":"foo__style__a-class","b__class":"foo__style__b__class","cClass":"foo__style__cClass"}); /***/ }) diff --git a/test/cases/export-only-locals-and-es-named-export/expected/main.js b/test/cases/export-only-locals-and-es-named-export/expected/main.js index fc556c4f..aa67251d 100644 --- a/test/cases/export-only-locals-and-es-named-export/expected/main.js +++ b/test/cases/export-only-locals-and-es-named-export/expected/main.js @@ -9,13 +9,15 @@ __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ aClass: () => (/* binding */ _1), /* harmony export */ bClass: () => (/* binding */ _2), -/* harmony export */ cClass: () => (/* binding */ _3) +/* harmony export */ cClass: () => (/* binding */ _3), +/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); // extracted by mini-css-extract-plugin var _1 = "foo__style__a-class"; var _2 = "foo__style__b__class"; var _3 = "foo__style__cClass"; +/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"aClass":"foo__style__a-class","bClass":"foo__style__b__class","cClass":"foo__style__cClass"}); /***/ }) diff --git a/types/index.d.ts b/types/index.d.ts index 61142615..0765eb15 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -147,7 +147,6 @@ type PluginOptions = { * @property {string | ((resourcePath: string, rootContext: string) => string)} [publicPath] * @property {boolean} [emit] * @property {boolean} [esModule] - * @property {boolean} [defaultExport] * @property {string} [layer] */ /** @@ -200,7 +199,6 @@ type LoaderOptions = { | undefined; emit?: boolean | undefined; esModule?: boolean | undefined; - defaultExport?: boolean | undefined; layer?: string | undefined; }; type NormalizedPluginOptions = {