Skip to content

Commit

Permalink
feat: enabled esModule by default (#489)
Browse files Browse the repository at this point in the history
BRAKING CHANGE: the `esModule` option is `true` by default, you need to change `const locals = require('./styles.css')` on ʻimport locals from './styles.css'`
  • Loading branch information
cap-Bernardito authored Oct 9, 2020
1 parent f8e13c9 commit 727a24d
Show file tree
Hide file tree
Showing 5 changed files with 9 additions and 7 deletions.
10 changes: 5 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ module.exports = {
| [**`attributes`**](#attributes) | `{Object}` | `{}` | Adds custom attributes to tag |
| [**`insert`**](#insert) | `{String\|Function}` | `head` | Inserts tag at the given position into the DOM |
| [**`base`**](#base) | `{Number}` | `true` | Sets module ID base (DLLPlugin) |
| [**`esModule`**](#esmodule) | `{Boolean}` | `false` | Use ES modules syntax |
| [**`esModule`**](#esmodule) | `{Boolean}` | `true` | Use ES modules syntax |
| [**`modules`**](#modules) | `{Object}` | `undefined` | Configuration CSS Modules |

### `injectType`
Expand Down Expand Up @@ -556,12 +556,12 @@ module.exports = {
### `esModule`

Type: `Boolean`
Default: `false`
Default: `true`

By default, `style-loader` generates JS modules that use the CommonJS modules syntax.
By default, `style-loader` generates JS modules that use the ES 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:
You can enable a CommonJS modules syntax using:

**webpack.config.js**

Expand All @@ -573,7 +573,7 @@ module.exports = {
test: /\.css$/i,
loader: 'style-loader',
options: {
esModule: true,
esModule: false,
},
},
],
Expand Down
2 changes: 1 addition & 1 deletion src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ loaderApi.pitch = function loader(request) {
: options.insert.toString();
const injectType = options.injectType || 'styleTag';
const esModule =
typeof options.esModule !== 'undefined' ? options.esModule : false;
typeof options.esModule !== 'undefined' ? options.esModule : true;
const namedExport =
esModule && options.modules && options.modules.namedExport;
const runtimeOptions = {
Expand Down
2 changes: 1 addition & 1 deletion test/attributes-option.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ describe('"attributes" option', () => {
expect.assertions(3);

const entry = getEntryByInjectType('nonce-require.js', injectType);
const compiler = getCompiler(entry, { injectType });
const compiler = getCompiler(entry, { injectType, esModule: false });
const stats = await compile(compiler);

runInJsDom('main.bundle.js', compiler, stats, (dom) => {
Expand Down
1 change: 1 addition & 0 deletions test/insert-option.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ describe('"insert" option', () => {

const entry = getEntryByInjectType('element.js', injectType);
const compiler = getCompiler(entry, {
esModule: false,
injectType,
insert: (element) =>
document.querySelector('#test-shadow').appendChild(element),
Expand Down
1 change: 1 addition & 0 deletions test/loader.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -324,6 +324,7 @@ describe('loader', () => {

const compiler = getCompiler('./lazy-negative-refs.js', {
injectType,
esModule: false,
});
const stats = await compile(compiler);

Expand Down

0 comments on commit 727a24d

Please sign in to comment.