Skip to content

Commit

Permalink
feat: new esModule option (#475)
Browse files Browse the repository at this point in the history
  • Loading branch information
evilebottnawi authored Dec 20, 2019
1 parent 78e1613 commit 596e47a
Show file tree
Hide file tree
Showing 11 changed files with 159 additions and 2 deletions.
37 changes: 37 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,49 @@ Default: the `publicPath` in `webpackOptions.output`

Specifies a custom public path for the target file(s).

#### `esModule`

Type: `Boolean`
Default: `false`

By default, `mini-css-extract-plugin` generates JS modules that use the CommonJS modules syntax.
There are some cases in which using ES modules is beneficial, like in the case of [module concatenation](https://webpack.js.org/plugins/module-concatenation-plugin/) and [tree shaking](https://webpack.js.org/guides/tree-shaking/).

You can enable a ES module syntax using:

**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: {
esModule: true,
},
},
'css-loader',
],
},
],
},
};
```

#### Minimal example

**webpack.config.js**

```js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
plugins: [
new MiniCssExtractPlugin({
Expand Down
9 changes: 7 additions & 2 deletions src/loader.js
Original file line number Diff line number Diff line change
Expand Up @@ -203,11 +203,16 @@ export function pitch(request) {
return callback(e);
}

let resultSource = `// extracted by ${pluginName}`;
const esModule =
typeof options.esModule !== 'undefined' ? options.esModule : false;
const result = locals
? `\nmodule.exports = ${JSON.stringify(locals)};`
? `\n${esModule ? 'export default' : 'module.exports ='} ${JSON.stringify(
locals
)};`
: '';

let resultSource = `// extracted by ${pluginName}`;

resultSource += options.hmr
? hotLoader(result, { context: this.context, options, locals })
: result;
Expand Down
3 changes: 3 additions & 0 deletions src/options.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@
"instanceof": "Function"
}
]
},
"esModule": {
"type": "boolean"
}
},
"errorMessages": {
Expand Down
12 changes: 12 additions & 0 deletions test/cases/commonjs-module-syntax/expected/main.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
.foo__style__a {
background: red;
}

.foo__style__b {
color: green;
}

.c {
color: blue;
}

1 change: 1 addition & 0 deletions test/cases/commonjs-module-syntax/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import './style.css';
11 changes: 11 additions & 0 deletions test/cases/commonjs-module-syntax/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.a {
background: red;
}

:local(.b) {
color: green;
}

:global(.c) {
color: blue;
}
32 changes: 32 additions & 0 deletions test/cases/commonjs-module-syntax/webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import Self from '../../../src';

module.exports = {
entry: './index.js',
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: Self.loader,
options: { esModule: false },
},
{
loader: 'css-loader',
options: {
modules: {
mode: 'local',
localIdentName: 'foo__[name]__[local]',
},
},
},
],
},
],
},
plugins: [
new Self({
filename: '[name].css',
}),
],
};
12 changes: 12 additions & 0 deletions test/cases/es-module-syntax/expected/main.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
.foo__style__a {
background: red;
}

.foo__style__b {
color: green;
}

.c {
color: blue;
}

1 change: 1 addition & 0 deletions test/cases/es-module-syntax/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import './style.css';
11 changes: 11 additions & 0 deletions test/cases/es-module-syntax/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.a {
background: red;
}

:local(.b) {
color: green;
}

:global(.c) {
color: blue;
}
32 changes: 32 additions & 0 deletions test/cases/es-module-syntax/webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import Self from '../../../src';

module.exports = {
entry: './index.js',
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: Self.loader,
options: { esModule: true },
},
{
loader: 'css-loader',
options: {
modules: {
mode: 'local',
localIdentName: 'foo__[name]__[local]',
},
},
},
],
},
],
},
plugins: [
new Self({
filename: '[name].css',
}),
],
};

0 comments on commit 596e47a

Please sign in to comment.