Skip to content

Commit

Permalink
fix: improve esMododule exports
Browse files Browse the repository at this point in the history
  • Loading branch information
jantimon committed Feb 29, 2024
1 parent 1787dab commit 023d85c
Show file tree
Hide file tree
Showing 18 changed files with 37 additions and 229 deletions.
42 changes: 0 additions & 42 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -407,7 +407,6 @@ module.exports = {
- **[`publicPath`](#publicPath)**
- **[`emit`](#emit)**
- **[`esModule`](#esModule)**
- **[`defaultExport`](#defaultExport)**

#### `publicPath`

Expand Down Expand Up @@ -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
Expand Down
1 change: 0 additions & 1 deletion src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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]
*/

Expand Down
5 changes: 0 additions & 5 deletions src/loader-options.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
Expand Down
13 changes: 4 additions & 9 deletions src/loader.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down Expand Up @@ -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${
Expand Down
16 changes: 8 additions & 8 deletions test/__snapshots__/validate-loader-options.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -21,47 +21,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?, defaultExport?, layer? }"
object { publicPath?, emit?, esModule?, layer? }"
`;
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?, defaultExport?, layer? }"
object { publicPath?, emit?, esModule?, layer? }"
`;
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?, defaultExport?, layer? }"
object { publicPath?, emit?, esModule?, layer? }"
`;
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?, defaultExport?, layer? }"
object { publicPath?, emit?, esModule?, layer? }"
`;
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?, defaultExport?, layer? }"
object { publicPath?, emit?, esModule?, layer? }"
`;
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?, defaultExport?, layer? }"
object { publicPath?, emit?, esModule?, layer? }"
`;
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?, defaultExport?, layer? }"
object { publicPath?, emit?, esModule?, layer? }"
`;
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?, defaultExport?, layer? }"
object { publicPath?, emit?, esModule?, layer? }"
`;
Original file line number Diff line number Diff line change
Expand Up @@ -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__ = ({});


/***/ })
Expand Down
9 changes: 7 additions & 2 deletions test/cases/es-module-concatenation-modules/expected/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 */
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"});


/***/ })
Expand Down
4 changes: 3 additions & 1 deletion test/cases/es-named-export-as-is/expected/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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"});


/***/ })
Expand Down
4 changes: 3 additions & 1 deletion test/cases/es-named-export-output-module/expected/main.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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"});


/***/ })
Expand Down
12 changes: 0 additions & 12 deletions test/cases/es-named-export-with-default/expected/main.css

This file was deleted.

91 changes: 0 additions & 91 deletions test/cases/es-named-export-with-default/expected/main.js

This file was deleted.

4 changes: 0 additions & 4 deletions test/cases/es-named-export-with-default/index.js

This file was deleted.

11 changes: 0 additions & 11 deletions test/cases/es-named-export-with-default/style.css

This file was deleted.

Loading

0 comments on commit 023d85c

Please sign in to comment.