Skip to content

Commit

Permalink
fix: added the defaultExport option to generate default and named e…
Browse files Browse the repository at this point in the history 
…xport together (#1084)
  • Loading branch information
@jantimon
jantimon committed Apr 2, 2024
1 parent 92c7eb3 commit 74ae781
Show file tree
Hide file tree
Showing 12 changed files with 252 additions and 9 deletions.
55 changes: 55 additions & 0 deletions README.md
View file
Expand Up @@ -407,6 +407,7 @@ module.exports = {
- **[`publicPath`](#publicPath)**
- **[`emit`](#emit)**
- **[`esModule`](#esModule)**
- **[`defaultExport`](#defaultExport)**

#### `publicPath`

Expand Down Expand Up @@ -549,6 +550,60 @@ module.exports = {
};
```

#### `defaultExport`

Type:

```ts
type defaultExport = boolean;
```

Default: `false`

> **Note**
>
> This option will work only when you set `namedExport` to `true` in `css-loader`
By default, `mini-css-extract-plugin` generates JS modules based on the `esModule` and `namedExport` options in `css-loader`.
Using the `esModule` and `namedExport` options will allow you to better optimize your code.
If you set `esModule: true` and `namedExport: true` for `css-loader` `mini-css-extract-plugin` will generate **only** a named export.
Our official recommendation is to use only named export for better future compatibility.
But for some applications, it is not easy to quickly rewrite the code from the default export to 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,
},
},
{
loader: "css-loader",
esModule: true,
modules: {
namedExport: true,
},
},
],
},
],
},
};
```

## Examples

### Recommended
Expand Down
1 change: 1 addition & 0 deletions src/index.js
View file
Expand Up @@ -37,6 +37,7 @@ const {
* @property {boolean} [emit]
* @property {boolean} [esModule]
* @property {string} [layer]
* @property {boolean} [defaultExport]
*/

/**
Expand Down
5 changes: 5 additions & 0 deletions src/loader-options.json
View file
Expand Up @@ -27,6 +27,11 @@
},
"layer": {
"type": "string"
},
"defaultExport": {
"type": "boolean",
"description": "Duplicate the named export with CSS modules locals to the default export (only when `esModules: true` for css-loader).",
"link": "https://github.com/webpack-contrib/mini-css-extract-plugin#defaultexports"
}
}
}
11 changes: 10 additions & 1 deletion src/loader.js
View file
Expand Up @@ -272,7 +272,16 @@ function pitch(request) {
.map(([id, key]) => `${id} as ${JSON.stringify(key)}`)
.join(", ")} }`;

return `${localsString}\n${exportsString}\n`;
const defaultExport =
typeof options.defaultExport !== "undefined"
? options.defaultExport
: false;

return defaultExport
? `${localsString}\n${exportsString}\nexport default { ${identifiers
.map(([id, key]) => `${JSON.stringify(key)}: ${id}`)
.join(", ")} }\n`
: `${localsString}\n${exportsString}\n`;
}

return `\n${
Expand Down
23 changes: 15 additions & 8 deletions test/__snapshots__/validate-loader-options.test.js.snap
View file
@@ -1,5 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`validate options should throw an error on the "defaultExport" option with "1" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader has been initialized using an options object that does not match the API schema.
- options.defaultExport should be a boolean.
-> Duplicate the named export with CSS modules locals to the default export (only when \`esModules: true\` for css-loader).
-> Read more at https://github.com/webpack-contrib/mini-css-extract-plugin#defaultexports"
`;

exports[`validate options should throw an error on the "esModule" option with "1" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader has been initialized using an options object that does not match the API schema.
- options.esModule should be a boolean.
Expand All @@ -21,47 +28,47 @@ exports[`validate options should throw an error on the "publicPath" option with
exports[`validate options should throw an error on the "unknown" option with "/test/" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader 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 { publicPath?, emit?, esModule?, layer? }"
object { publicPath?, emit?, esModule?, layer?, defaultExport? }"
`;
exports[`validate options should throw an error on the "unknown" option with "[]" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader 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 { publicPath?, emit?, esModule?, layer? }"
object { publicPath?, emit?, esModule?, layer?, defaultExport? }"
`;
exports[`validate options should throw an error on the "unknown" option with "{"foo":"bar"}" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader 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 { publicPath?, emit?, esModule?, layer? }"
object { publicPath?, emit?, esModule?, layer?, defaultExport? }"
`;
exports[`validate options should throw an error on the "unknown" option with "{}" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader 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 { publicPath?, emit?, esModule?, layer? }"
object { publicPath?, emit?, esModule?, layer?, defaultExport? }"
`;
exports[`validate options should throw an error on the "unknown" option with "1" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader 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 { publicPath?, emit?, esModule?, layer? }"
object { publicPath?, emit?, esModule?, layer?, defaultExport? }"
`;
exports[`validate options should throw an error on the "unknown" option with "false" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader 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 { publicPath?, emit?, esModule?, layer? }"
object { publicPath?, emit?, esModule?, layer?, defaultExport? }"
`;
exports[`validate options should throw an error on the "unknown" option with "test" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader 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 { publicPath?, emit?, esModule?, layer? }"
object { publicPath?, emit?, esModule?, layer?, defaultExport? }"
`;
exports[`validate options should throw an error on the "unknown" option with "true" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader 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 { publicPath?, emit?, esModule?, layer? }"
object { publicPath?, emit?, esModule?, layer?, defaultExport? }"
`;
12 changes: 12 additions & 0 deletions test/cases/es-named-and-default-export/expected/main.css
View file
@@ -0,0 +1,12 @@
.foo__style__a-class {
background: red;
}

.foo__style__b__class {
color: green;
}

.foo__style__cClass {
color: blue;
}

93 changes: 93 additions & 0 deletions test/cases/es-named-and-default-export/expected/main.js
View file
@@ -0,0 +1,93 @@
/******/ (() => { // 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 */ "a-class": () => (/* binding */ _1),
/* harmony export */ b__class: () => (/* binding */ _2),
/* 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": _1, "b__class": _2, "cClass": _3 });


/***/ })
/******/ ]);
/************************************************************************/
/******/ // 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__["a-class"], bClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.b__class, cClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.cClass });

})();

/******/ })()
;
8 changes: 8 additions & 0 deletions test/cases/es-named-and-default-export/index.js
View file
@@ -0,0 +1,8 @@
import css, {
"a-class" as aClass,
"b__class" as bClass,
cClass,
} from "./style.css";

// eslint-disable-next-line no-console
console.log({ css, aClass, bClass, cClass });
11 changes: 11 additions & 0 deletions test/cases/es-named-and-default-export/style.css
View file
@@ -0,0 +1,11 @@
.a-class {
background: red;
}

.b__class {
color: green;
}

.cClass {
color: blue;
}
36 changes: 36 additions & 0 deletions test/cases/es-named-and-default-export/webpack.config.js
View file
@@ -0,0 +1,36 @@
import Self from "../../../src";

module.exports = {
entry: "./index.js",
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: Self.loader,
options: {
defaultExport: true,
},
},
{
loader: "css-loader",
options: {
esModule: true,
modules: {
namedExport: true,
exportLocalsConvention: "asIs",
localIdentName: "foo__[name]__[local]",
},
},
},
],
},
],
},
plugins: [
new Self({
filename: "[name].css",
}),
],
};
4 changes: 4 additions & 0 deletions test/validate-loader-options.test.js
View file
Expand Up @@ -10,6 +10,10 @@ describe("validate options", () => {
success: [true, false],
failure: [1],
},
defaultExport: {
success: [true, false],
failure: [1],
},
unknown: {
success: [],
failure: [1, true, false, "test", /test/, [], {}, { foo: "bar" }],
Expand Down
2 changes: 2 additions & 0 deletions types/index.d.ts
View file
Expand Up @@ -148,6 +148,7 @@ type PluginOptions = {
* @property {boolean} [emit]
* @property {boolean} [esModule]
* @property {string} [layer]
* @property {boolean} [defaultExport]
*/
/**
* @typedef {Object} PluginOptions
Expand Down Expand Up @@ -200,6 +201,7 @@ type LoaderOptions = {
emit?: boolean | undefined;
esModule?: boolean | undefined;
layer?: string | undefined;
defaultExport?: boolean | undefined;
};
type NormalizedPluginOptions = {
filename: Required<Configuration>["output"]["filename"];
Expand Down

0 comments on commit 74ae781

Please sign in to comment.