Skip to content

Commit 0116433

Browse files
cap-Bernarditocap-Bernardito
committed
refactor: esModule enable by default
1 parent cb9983f commit 0116433

File tree

4 files changed

+63
-68
lines changed

4 files changed

+63
-68
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1064,7 +1064,7 @@ module.exports = {
10641064
### `esModule`
10651065

10661066
Type: `Boolean`
1067-
Default: `false`
1067+
Default: `true`
10681068

10691069
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/).

‎src/utils.js

+1-5
Original file line numberDiff line numberDiff line change
@@ -315,11 +315,7 @@ function getModuleCode(
315315
const { css, map } = result;
316316
const sourceMapValue = sourceMap && map ? `,${map}` : '';
317317
let code = JSON.stringify(css);
318-
let beforeCode = '';
319-
320-
beforeCode += esModule
321-
? `var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(${sourceMap});\n`
322-
: `var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(${sourceMap});\n`;
318+
let beforeCode = `var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(${sourceMap});\n`;
323319

324320
for (const item of apiImports) {
325321
const { type, media, dedupe } = item;

‎test/__snapshots__/esModule-option.test.js.snap

+48-56
Original file line numberDiff line numberDiff line change
@@ -418,110 +418,102 @@ Array [
418418
419419
exports[`"esModule" option should work with a value equal to "true": warnings 1`] = `Array []`;
420420
421-
exports[`"esModule" option should work with commonjs-css-loader + commonjs-mini-css-extract-plugin: errors 1`] = `Array []`;
421+
exports[`"esModule" option should work with commonjs css-loader + commonjs mini-css-extract-plugin: errors 1`] = `Array []`;
422422
423-
exports[`"esModule" option should work with commonjs-css-loader + commonjs-mini-css-extract-plugin: result 1`] = `undefined`;
423+
exports[`"esModule" option should work with commonjs css-loader + commonjs mini-css-extract-plugin: result 1`] = `undefined`;
424424
425-
exports[`"esModule" option should work with commonjs-css-loader + commonjs-mini-css-extract-plugin: warnings 1`] = `Array []`;
425+
exports[`"esModule" option should work with commonjs css-loader + commonjs mini-css-extract-plugin: warnings 1`] = `Array []`;
426426
427-
exports[`"esModule" option should work with commonjs-css-loader + commonjs-style-loader: errors 1`] = `Array []`;
427+
exports[`"esModule" option should work with commonjs css-loader + commonjs style-loader: errors 1`] = `Array []`;
428428
429-
exports[`"esModule" option should work with commonjs-css-loader + commonjs-style-loader: result 1`] = `
429+
exports[`"esModule" option should work with commonjs css-loader + commonjs style-loader: result 1`] = `
430430
Object {
431-
"default": Object {
432-
"css": Object {
433-
"body": "uTw0Zyl5UXHez5t_lWCWm",
434-
"footer": "_2QW_-wZzF9G9_VrEnlztAG",
435-
"header-baz": "_24LP0msVwbV2gDQs7MsBEI",
436-
},
437-
"html": "
431+
"css": Object {
432+
"body": "uTw0Zyl5UXHez5t_lWCWm",
433+
"footer": "_2QW_-wZzF9G9_VrEnlztAG",
434+
"header-baz": "_24LP0msVwbV2gDQs7MsBEI",
435+
},
436+
"html": "
438437
<div class=\\"_24LP0msVwbV2gDQs7MsBEI\\">
439438
<div class=\\"uTw0Zyl5UXHez5t_lWCWm\\">
440439
<div class=\\"_2QW_-wZzF9G9_VrEnlztAG\\">
441440
",
442-
},
443441
}
444442
`;
445443
446-
exports[`"esModule" option should work with commonjs-css-loader + commonjs-style-loader: warnings 1`] = `Array []`;
444+
exports[`"esModule" option should work with commonjs css-loader + commonjs style-loader: warnings 1`] = `Array []`;
447445
448-
exports[`"esModule" option should work with commonjs-css-loader + esModule-mini-css-extract-plugin: errors 1`] = `Array []`;
446+
exports[`"esModule" option should work with commonjs css-loader + esModule mini-css-extract-plugin: errors 1`] = `Array []`;
449447
450-
exports[`"esModule" option should work with commonjs-css-loader + esModule-mini-css-extract-plugin: result 1`] = `undefined`;
448+
exports[`"esModule" option should work with commonjs css-loader + esModule mini-css-extract-plugin: result 1`] = `undefined`;
451449
452-
exports[`"esModule" option should work with commonjs-css-loader + esModule-mini-css-extract-plugin: warnings 1`] = `Array []`;
450+
exports[`"esModule" option should work with commonjs css-loader + esModule mini-css-extract-plugin: warnings 1`] = `Array []`;
453451
454-
exports[`"esModule" option should work with commonjs-css-loader + esModule-style-loader: errors 1`] = `Array []`;
452+
exports[`"esModule" option should work with commonjs css-loader + esModule style-loader: errors 1`] = `Array []`;
455453
456-
exports[`"esModule" option should work with commonjs-css-loader + esModule-style-loader: result 1`] = `
454+
exports[`"esModule" option should work with commonjs css-loader + esModule style-loader: result 1`] = `
457455
Object {
458-
"default": Object {
459-
"css": Object {
460-
"body": "uTw0Zyl5UXHez5t_lWCWm",
461-
"footer": "_2QW_-wZzF9G9_VrEnlztAG",
462-
"header-baz": "_24LP0msVwbV2gDQs7MsBEI",
463-
},
464-
"html": "
456+
"css": Object {
457+
"body": "uTw0Zyl5UXHez5t_lWCWm",
458+
"footer": "_2QW_-wZzF9G9_VrEnlztAG",
459+
"header-baz": "_24LP0msVwbV2gDQs7MsBEI",
460+
},
461+
"html": "
465462
<div class=\\"_24LP0msVwbV2gDQs7MsBEI\\">
466463
<div class=\\"uTw0Zyl5UXHez5t_lWCWm\\">
467464
<div class=\\"_2QW_-wZzF9G9_VrEnlztAG\\">
468465
",
469-
},
470466
}
471467
`;
472468
473-
exports[`"esModule" option should work with commonjs-css-loader + esModule-style-loader: warnings 1`] = `Array []`;
469+
exports[`"esModule" option should work with commonjs css-loader + esModule style-loader: warnings 1`] = `Array []`;
474470
475-
exports[`"esModule" option should work with esModule-css-loader + commonjs-mini-css-extract-plugin: errors 1`] = `Array []`;
471+
exports[`"esModule" option should work with esModule css-loader + commonjs mini-css-extract-plugin: errors 1`] = `Array []`;
476472
477-
exports[`"esModule" option should work with esModule-css-loader + commonjs-mini-css-extract-plugin: result 1`] = `undefined`;
473+
exports[`"esModule" option should work with esModule css-loader + commonjs mini-css-extract-plugin: result 1`] = `undefined`;
478474
479-
exports[`"esModule" option should work with esModule-css-loader + commonjs-mini-css-extract-plugin: warnings 1`] = `Array []`;
475+
exports[`"esModule" option should work with esModule css-loader + commonjs mini-css-extract-plugin: warnings 1`] = `Array []`;
480476
481-
exports[`"esModule" option should work with esModule-css-loader + commonjs-style-loader: errors 1`] = `Array []`;
477+
exports[`"esModule" option should work with esModule css-loader + commonjs style-loader: errors 1`] = `Array []`;
482478
483-
exports[`"esModule" option should work with esModule-css-loader + commonjs-style-loader: result 1`] = `
479+
exports[`"esModule" option should work with esModule css-loader + commonjs style-loader: result 1`] = `
484480
Object {
485-
"default": Object {
486-
"css": Object {
487-
"body": "uTw0Zyl5UXHez5t_lWCWm",
488-
"footer": "_2QW_-wZzF9G9_VrEnlztAG",
489-
"header-baz": "_24LP0msVwbV2gDQs7MsBEI",
490-
},
491-
"html": "
481+
"css": Object {
482+
"body": "uTw0Zyl5UXHez5t_lWCWm",
483+
"footer": "_2QW_-wZzF9G9_VrEnlztAG",
484+
"header-baz": "_24LP0msVwbV2gDQs7MsBEI",
485+
},
486+
"html": "
492487
<div class=\\"_24LP0msVwbV2gDQs7MsBEI\\">
493488
<div class=\\"uTw0Zyl5UXHez5t_lWCWm\\">
494489
<div class=\\"_2QW_-wZzF9G9_VrEnlztAG\\">
495490
",
496-
},
497491
}
498492
`;
499493
500-
exports[`"esModule" option should work with esModule-css-loader + commonjs-style-loader: warnings 1`] = `Array []`;
494+
exports[`"esModule" option should work with esModule css-loader + commonjs style-loader: warnings 1`] = `Array []`;
501495
502-
exports[`"esModule" option should work with esModule-css-loader + esModule-mini-css-extract-plugin: errors 1`] = `Array []`;
496+
exports[`"esModule" option should work with esModule css-loader + esModule mini-css-extract-plugin: errors 1`] = `Array []`;
503497
504-
exports[`"esModule" option should work with esModule-css-loader + esModule-mini-css-extract-plugin: result 1`] = `undefined`;
498+
exports[`"esModule" option should work with esModule css-loader + esModule mini-css-extract-plugin: result 1`] = `undefined`;
505499
506-
exports[`"esModule" option should work with esModule-css-loader + esModule-mini-css-extract-plugin: warnings 1`] = `Array []`;
500+
exports[`"esModule" option should work with esModule css-loader + esModule mini-css-extract-plugin: warnings 1`] = `Array []`;
507501
508-
exports[`"esModule" option should work with esModule-css-loader + esModule-style-loader: errors 1`] = `Array []`;
502+
exports[`"esModule" option should work with esModule css-loader + esModule style-loader: errors 1`] = `Array []`;
509503
510-
exports[`"esModule" option should work with esModule-css-loader + esModule-style-loader: result 1`] = `
504+
exports[`"esModule" option should work with esModule css-loader + esModule style-loader: result 1`] = `
511505
Object {
512-
"default": Object {
513-
"css": Object {
514-
"body": "uTw0Zyl5UXHez5t_lWCWm",
515-
"footer": "_2QW_-wZzF9G9_VrEnlztAG",
516-
"header-baz": "_24LP0msVwbV2gDQs7MsBEI",
517-
},
518-
"html": "
506+
"css": Object {
507+
"body": "uTw0Zyl5UXHez5t_lWCWm",
508+
"footer": "_2QW_-wZzF9G9_VrEnlztAG",
509+
"header-baz": "_24LP0msVwbV2gDQs7MsBEI",
510+
},
511+
"html": "
519512
<div class=\\"_24LP0msVwbV2gDQs7MsBEI\\">
520513
<div class=\\"uTw0Zyl5UXHez5t_lWCWm\\">
521514
<div class=\\"_2QW_-wZzF9G9_VrEnlztAG\\">
522515
",
523-
},
524516
}
525517
`;
526518
527-
exports[`"esModule" option should work with esModule-css-loader + esModule-style-loader: warnings 1`] = `Array []`;
519+
exports[`"esModule" option should work with esModule css-loader + esModule style-loader: warnings 1`] = `Array []`;

‎test/esModule-option.test.js

+13-6
Original file line numberDiff line numberDiff line change
@@ -184,11 +184,18 @@ describe('"esModule" option', () => {
184184
];
185185

186186
for (const test of styleLoaderTests) {
187-
it(`should work with ${test.localLoaderMode}-css-loader + ${test.extractLoaderMode}-style-loader`, async () => {
187+
it(`should work with ${test.localLoaderMode} css-loader + ${test.extractLoaderMode} style-loader`, async () => {
188188
const compiler = getCompiler(
189189
'./es-module/template/index.js',
190190
{},
191191
{
192+
output: {
193+
path: path.resolve(__dirname, './outputs'),
194+
filename: '[name].bundle.js',
195+
chunkFilename: '[name].chunk.js',
196+
publicPath: '/webpack/public/path/',
197+
libraryTarget: 'commonjs2',
198+
},
192199
module: {
193200
rules: [
194201
{
@@ -215,10 +222,10 @@ describe('"esModule" option', () => {
215222
);
216223
const stats = await compile(compiler);
217224

218-
expect(
219-
// eslint-disable-next-line no-eval
220-
eval(readAsset('main.bundle.js', compiler, stats))
221-
).toMatchSnapshot('result');
225+
// eslint-disable-next-line no-eval
226+
const result = eval(readAsset('main.bundle.js', compiler, stats));
227+
228+
expect(result.default || result).toMatchSnapshot('result');
222229

223230
expect(getWarnings(stats)).toMatchSnapshot('warnings');
224231
expect(getErrors(stats)).toMatchSnapshot('errors');
@@ -245,7 +252,7 @@ describe('"esModule" option', () => {
245252
];
246253

247254
for (const test of miniCssExtractPluginTests) {
248-
it(`should work with ${test.localLoaderMode}-css-loader + ${test.extractLoaderMode}-mini-css-extract-plugin`, async () => {
255+
it(`should work with ${test.localLoaderMode} css-loader + ${test.extractLoaderMode} mini-css-extract-plugin`, async () => {
249256
const compiler = getCompiler(
250257
'./es-module/template/index.js',
251258
{},

0 commit comments

Comments
 (0)