Skip to content

Commit 8b6f045

Browse files
cap-Bernarditocap-Bernardito
committed
refactor: enable esModules by default
1 parent bdc092e commit 8b6f045

File tree

8 files changed

+430
-3
lines changed

8 files changed

+430
-3
lines changed

‎README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1066,10 +1066,10 @@ module.exports = {
10661066
Type: `Boolean`
10671067
Default: `false`
10681068

1069-
By default, `css-loader` generates JS modules that use the CommonJS modules syntax.
1069+
By default, `css-loader` generates JS modules that use the ES modules syntax.
10701070
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/).
10711071

1072-
You can enable a ES module syntax using:
1072+
You can enable a CommonJS modules syntax using:
10731073

10741074
**webpack.config.js**
10751075

@@ -1081,7 +1081,7 @@ module.exports = {
10811081
test: /\.css$/i,
10821082
loader: 'css-loader',
10831083
options: {
1084-
esModule: true,
1084+
esModule: false,
10851085
},
10861086
},
10871087
],

‎package-lock.json

Lines changed: 98 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,10 @@
7676
"file-loader": "^6.0.0",
7777
"husky": "^4.2.5",
7878
"jest": "^26.1.0",
79+
"jsdom": "^16.3.0",
7980
"lint-staged": "^10.2.11",
8081
"memfs": "^3.2.0",
82+
"mini-css-extract-plugin": "^0.9.0",
8183
"npm-run-all": "^4.1.5",
8284
"postcss-loader": "^3.0.0",
8385
"postcss-preset-env": "^6.7.0",
@@ -86,6 +88,7 @@
8688
"sass-loader": "^9.0.2",
8789
"standard-version": "^8.0.2",
8890
"strip-ansi": "^6.0.0",
91+
"style-loader": "^1.2.1",
8992
"url-loader": "^4.1.0",
9093
"webpack": "^4.43.0"
9194
},

‎test/__snapshots__/loader.test.js.snap

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -381,6 +381,76 @@ exports[`loader should work with ModuleConcatenationPlugin: errors 1`] = `Array
381381
382382
exports[`loader should work with ModuleConcatenationPlugin: warnings 1`] = `Array []`;
383383
384+
exports[`loader should work with commonjs-css-loader + commonjs-mini-css-extract-plugin: css 1`] = `
385+
".some-class {
386+
color: red;
387+
}
388+
389+
"
390+
`;
391+
392+
exports[`loader should work with commonjs-css-loader + commonjs-mini-css-extract-plugin: errors 1`] = `Array []`;
393+
394+
exports[`loader should work with commonjs-css-loader + commonjs-mini-css-extract-plugin: result 1`] = `Object {}`;
395+
396+
exports[`loader should work with commonjs-css-loader + commonjs-mini-css-extract-plugin: warnings 1`] = `Array []`;
397+
398+
exports[`loader should work with commonjs-css-loader + commonjs-style-loader: DOM 1`] = `
399+
"<!DOCTYPE html><html><head>
400+
<title>style-loader test</title>
401+
<style id=\\"existing-style\\">.existing { color: yellow }</style>
402+
<style>.some-class {
403+
color: red;
404+
}
405+
</style></head>
406+
<body>
407+
<h1>Body</h1>
408+
<div class=\\"target\\"></div>
409+
<iframe class=\\"iframeTarget\\"></iframe>
410+
411+
412+
</body></html>"
413+
`;
414+
415+
exports[`loader should work with commonjs-css-loader + commonjs-style-loader: errors 1`] = `Array []`;
416+
417+
exports[`loader should work with commonjs-css-loader + commonjs-style-loader: warnings 1`] = `Array []`;
418+
419+
exports[`loader should work with commonjs-css-loader + esModule-mini-css-extract-plugin: css 1`] = `
420+
".some-class {
421+
color: red;
422+
}
423+
424+
"
425+
`;
426+
427+
exports[`loader should work with commonjs-css-loader + esModule-mini-css-extract-plugin: errors 1`] = `Array []`;
428+
429+
exports[`loader should work with commonjs-css-loader + esModule-mini-css-extract-plugin: result 1`] = `Object {}`;
430+
431+
exports[`loader should work with commonjs-css-loader + esModule-mini-css-extract-plugin: warnings 1`] = `Array []`;
432+
433+
exports[`loader should work with commonjs-css-loader + esModule-style-loader: DOM 1`] = `
434+
"<!DOCTYPE html><html><head>
435+
<title>style-loader test</title>
436+
<style id=\\"existing-style\\">.existing { color: yellow }</style>
437+
<style>.some-class {
438+
color: red;
439+
}
440+
</style></head>
441+
<body>
442+
<h1>Body</h1>
443+
<div class=\\"target\\"></div>
444+
<iframe class=\\"iframeTarget\\"></iframe>
445+
446+
447+
</body></html>"
448+
`;
449+
450+
exports[`loader should work with commonjs-css-loader + esModule-style-loader: errors 1`] = `Array []`;
451+
452+
exports[`loader should work with commonjs-css-loader + esModule-style-loader: warnings 1`] = `Array []`;
453+
384454
exports[`loader should work with empty css: errors 1`] = `Array []`;
385455
386456
exports[`loader should work with empty css: module 1`] = `
@@ -579,6 +649,76 @@ a[href=\\"\\" i] {
579649
580650
exports[`loader should work with empty options: warnings 1`] = `Array []`;
581651
652+
exports[`loader should work with esModule-css-loader + commonjs-mini-css-extract-plugin: css 1`] = `
653+
".some-class {
654+
color: red;
655+
}
656+
657+
"
658+
`;
659+
660+
exports[`loader should work with esModule-css-loader + commonjs-mini-css-extract-plugin: errors 1`] = `Array []`;
661+
662+
exports[`loader should work with esModule-css-loader + commonjs-mini-css-extract-plugin: result 1`] = `Object {}`;
663+
664+
exports[`loader should work with esModule-css-loader + commonjs-mini-css-extract-plugin: warnings 1`] = `Array []`;
665+
666+
exports[`loader should work with esModule-css-loader + commonjs-style-loader: DOM 1`] = `
667+
"<!DOCTYPE html><html><head>
668+
<title>style-loader test</title>
669+
<style id=\\"existing-style\\">.existing { color: yellow }</style>
670+
<style>.some-class {
671+
color: red;
672+
}
673+
</style></head>
674+
<body>
675+
<h1>Body</h1>
676+
<div class=\\"target\\"></div>
677+
<iframe class=\\"iframeTarget\\"></iframe>
678+
679+
680+
</body></html>"
681+
`;
682+
683+
exports[`loader should work with esModule-css-loader + commonjs-style-loader: errors 1`] = `Array []`;
684+
685+
exports[`loader should work with esModule-css-loader + commonjs-style-loader: warnings 1`] = `Array []`;
686+
687+
exports[`loader should work with esModule-css-loader + esModule-mini-css-extract-plugin: css 1`] = `
688+
".some-class {
689+
color: red;
690+
}
691+
692+
"
693+
`;
694+
695+
exports[`loader should work with esModule-css-loader + esModule-mini-css-extract-plugin: errors 1`] = `Array []`;
696+
697+
exports[`loader should work with esModule-css-loader + esModule-mini-css-extract-plugin: result 1`] = `Object {}`;
698+
699+
exports[`loader should work with esModule-css-loader + esModule-mini-css-extract-plugin: warnings 1`] = `Array []`;
700+
701+
exports[`loader should work with esModule-css-loader + esModule-style-loader: DOM 1`] = `
702+
"<!DOCTYPE html><html><head>
703+
<title>style-loader test</title>
704+
<style id=\\"existing-style\\">.existing { color: yellow }</style>
705+
<style>.some-class {
706+
color: red;
707+
}
708+
</style></head>
709+
<body>
710+
<h1>Body</h1>
711+
<div class=\\"target\\"></div>
712+
<iframe class=\\"iframeTarget\\"></iframe>
713+
714+
715+
</body></html>"
716+
`;
717+
718+
exports[`loader should work with esModule-css-loader + esModule-style-loader: errors 1`] = `Array []`;
719+
720+
exports[`loader should work with esModule-css-loader + esModule-style-loader: warnings 1`] = `Array []`;
721+
582722
exports[`loader should work with the "modules.auto" option and the "importLoaders" option: errors 1`] = `Array []`;
583723
584724
exports[`loader should work with the "modules.auto" option and the "importLoaders" option: result 1`] = `

‎test/fixtures/simple-style.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import "./simple.css";
2+

‎test/helpers/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import getWarnings from './getWarnings';
88
import normalizeErrors from './normalizeErrors';
99
import readAsset from './readAsset';
1010
import readsAssets from './readAssets';
11+
import runInJsDom from './runInJsDom';
1112

1213
export {
1314
compile,
@@ -20,4 +21,5 @@ export {
2021
normalizeErrors,
2122
readAsset,
2223
readsAssets,
24+
runInJsDom,
2325
};

0 commit comments

Comments
 (0)