Skip to content

esModule option enable by default #1111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Jul 17, 2020
Merged

esModule option enable by default #1111

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c5b52ac
feat: esModule export named
cap-Bernardito Jul 15, 2020
2b59046
feat: namedExport
cap-Bernardito Jul 16, 2020
99cfb33
refactor: enable esModules by default
cap-Bernardito Jul 16, 2020
1a225ac
refactor: enable esModules by default
cap-Bernardito Jul 16, 2020
4539dbe
refactor: enable esModule oprion by default
cap-Bernardito Jul 16, 2020
789b6ed
refactor: rebase
cap-Bernardito Jul 16, 2020
c7cb29f
refactor: rebase onto master
cap-Bernardito Jul 16, 2020
cb9983f
refactor: esModule enable by default
cap-Bernardito Jul 16, 2020
0116433
refactor: esModule enable by default
cap-Bernardito Jul 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
refactor: esModule enable by default
  • Loading branch information
@cap-Bernardito
cap-Bernardito committed Jul 17, 2020
commit 0116433083b2c5cbb57a2fb8537f35bf20d9de1c
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1064,7 +1064,7 @@ module.exports = {
### `esModule`

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

By default, `css-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/).
Expand Down
6 changes: 1 addition & 5 deletions src/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,11 +315,7 @@ function getModuleCode(
const { css, map } = result;
const sourceMapValue = sourceMap && map ? `,${map}` : '';
let code = JSON.stringify(css);
let beforeCode = '';

beforeCode += esModule
? `var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(${sourceMap});\n`
: `var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(${sourceMap});\n`;
let beforeCode = `var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(${sourceMap});\n`;

for (const item of apiImports) {
const { type, media, dedupe } = item;
Expand Down
104 changes: 48 additions & 56 deletions test/__snapshots__/esModule-option.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -418,110 +418,102 @@ Array [

exports[`"esModule" option should work with a value equal to "true": warnings 1`] = `Array []`;

exports[`"esModule" option should work with commonjs-css-loader + commonjs-mini-css-extract-plugin: errors 1`] = `Array []`;
exports[`"esModule" option should work with commonjs css-loader + commonjs mini-css-extract-plugin: errors 1`] = `Array []`;

exports[`"esModule" option should work with commonjs-css-loader + commonjs-mini-css-extract-plugin: result 1`] = `undefined`;
exports[`"esModule" option should work with commonjs css-loader + commonjs mini-css-extract-plugin: result 1`] = `undefined`;

exports[`"esModule" option should work with commonjs-css-loader + commonjs-mini-css-extract-plugin: warnings 1`] = `Array []`;
exports[`"esModule" option should work with commonjs css-loader + commonjs mini-css-extract-plugin: warnings 1`] = `Array []`;

exports[`"esModule" option should work with commonjs-css-loader + commonjs-style-loader: errors 1`] = `Array []`;
exports[`"esModule" option should work with commonjs css-loader + commonjs style-loader: errors 1`] = `Array []`;

exports[`"esModule" option should work with commonjs-css-loader + commonjs-style-loader: result 1`] = `
exports[`"esModule" option should work with commonjs css-loader + commonjs style-loader: result 1`] = `
Object {
"default": Object {
"css": Object {
"body": "uTw0Zyl5UXHez5t_lWCWm",
"footer": "_2QW_-wZzF9G9_VrEnlztAG",
"header-baz": "_24LP0msVwbV2gDQs7MsBEI",
},
"html": "
"css": Object {
"body": "uTw0Zyl5UXHez5t_lWCWm",
"footer": "_2QW_-wZzF9G9_VrEnlztAG",
"header-baz": "_24LP0msVwbV2gDQs7MsBEI",
},
"html": "
<div class=\\"_24LP0msVwbV2gDQs7MsBEI\\">
<div class=\\"uTw0Zyl5UXHez5t_lWCWm\\">
<div class=\\"_2QW_-wZzF9G9_VrEnlztAG\\">
",
},
}
`;

exports[`"esModule" option should work with commonjs-css-loader + commonjs-style-loader: warnings 1`] = `Array []`;
exports[`"esModule" option should work with commonjs css-loader + commonjs style-loader: warnings 1`] = `Array []`;

exports[`"esModule" option should work with commonjs-css-loader + esModule-mini-css-extract-plugin: errors 1`] = `Array []`;
exports[`"esModule" option should work with commonjs css-loader + esModule mini-css-extract-plugin: errors 1`] = `Array []`;

exports[`"esModule" option should work with commonjs-css-loader + esModule-mini-css-extract-plugin: result 1`] = `undefined`;
exports[`"esModule" option should work with commonjs css-loader + esModule mini-css-extract-plugin: result 1`] = `undefined`;

exports[`"esModule" option should work with commonjs-css-loader + esModule-mini-css-extract-plugin: warnings 1`] = `Array []`;
exports[`"esModule" option should work with commonjs css-loader + esModule mini-css-extract-plugin: warnings 1`] = `Array []`;

exports[`"esModule" option should work with commonjs-css-loader + esModule-style-loader: errors 1`] = `Array []`;
exports[`"esModule" option should work with commonjs css-loader + esModule style-loader: errors 1`] = `Array []`;

exports[`"esModule" option should work with commonjs-css-loader + esModule-style-loader: result 1`] = `
exports[`"esModule" option should work with commonjs css-loader + esModule style-loader: result 1`] = `
Object {
"default": Object {
"css": Object {
"body": "uTw0Zyl5UXHez5t_lWCWm",
"footer": "_2QW_-wZzF9G9_VrEnlztAG",
"header-baz": "_24LP0msVwbV2gDQs7MsBEI",
},
"html": "
"css": Object {
"body": "uTw0Zyl5UXHez5t_lWCWm",
"footer": "_2QW_-wZzF9G9_VrEnlztAG",
"header-baz": "_24LP0msVwbV2gDQs7MsBEI",
},
"html": "
<div class=\\"_24LP0msVwbV2gDQs7MsBEI\\">
<div class=\\"uTw0Zyl5UXHez5t_lWCWm\\">
<div class=\\"_2QW_-wZzF9G9_VrEnlztAG\\">
",
},
}
`;

exports[`"esModule" option should work with commonjs-css-loader + esModule-style-loader: warnings 1`] = `Array []`;
exports[`"esModule" option should work with commonjs css-loader + esModule style-loader: warnings 1`] = `Array []`;

exports[`"esModule" option should work with esModule-css-loader + commonjs-mini-css-extract-plugin: errors 1`] = `Array []`;
exports[`"esModule" option should work with esModule css-loader + commonjs mini-css-extract-plugin: errors 1`] = `Array []`;

exports[`"esModule" option should work with esModule-css-loader + commonjs-mini-css-extract-plugin: result 1`] = `undefined`;
exports[`"esModule" option should work with esModule css-loader + commonjs mini-css-extract-plugin: result 1`] = `undefined`;

exports[`"esModule" option should work with esModule-css-loader + commonjs-mini-css-extract-plugin: warnings 1`] = `Array []`;
exports[`"esModule" option should work with esModule css-loader + commonjs mini-css-extract-plugin: warnings 1`] = `Array []`;

exports[`"esModule" option should work with esModule-css-loader + commonjs-style-loader: errors 1`] = `Array []`;
exports[`"esModule" option should work with esModule css-loader + commonjs style-loader: errors 1`] = `Array []`;

exports[`"esModule" option should work with esModule-css-loader + commonjs-style-loader: result 1`] = `
exports[`"esModule" option should work with esModule css-loader + commonjs style-loader: result 1`] = `
Object {
"default": Object {
"css": Object {
"body": "uTw0Zyl5UXHez5t_lWCWm",
"footer": "_2QW_-wZzF9G9_VrEnlztAG",
"header-baz": "_24LP0msVwbV2gDQs7MsBEI",
},
"html": "
"css": Object {
"body": "uTw0Zyl5UXHez5t_lWCWm",
"footer": "_2QW_-wZzF9G9_VrEnlztAG",
"header-baz": "_24LP0msVwbV2gDQs7MsBEI",
},
"html": "
<div class=\\"_24LP0msVwbV2gDQs7MsBEI\\">
<div class=\\"uTw0Zyl5UXHez5t_lWCWm\\">
<div class=\\"_2QW_-wZzF9G9_VrEnlztAG\\">
",
},
}
`;

exports[`"esModule" option should work with esModule-css-loader + commonjs-style-loader: warnings 1`] = `Array []`;
exports[`"esModule" option should work with esModule css-loader + commonjs style-loader: warnings 1`] = `Array []`;

exports[`"esModule" option should work with esModule-css-loader + esModule-mini-css-extract-plugin: errors 1`] = `Array []`;
exports[`"esModule" option should work with esModule css-loader + esModule mini-css-extract-plugin: errors 1`] = `Array []`;

exports[`"esModule" option should work with esModule-css-loader + esModule-mini-css-extract-plugin: result 1`] = `undefined`;
exports[`"esModule" option should work with esModule css-loader + esModule mini-css-extract-plugin: result 1`] = `undefined`;

exports[`"esModule" option should work with esModule-css-loader + esModule-mini-css-extract-plugin: warnings 1`] = `Array []`;
exports[`"esModule" option should work with esModule css-loader + esModule mini-css-extract-plugin: warnings 1`] = `Array []`;

exports[`"esModule" option should work with esModule-css-loader + esModule-style-loader: errors 1`] = `Array []`;
exports[`"esModule" option should work with esModule css-loader + esModule style-loader: errors 1`] = `Array []`;

exports[`"esModule" option should work with esModule-css-loader + esModule-style-loader: result 1`] = `
exports[`"esModule" option should work with esModule css-loader + esModule style-loader: result 1`] = `
Object {
"default": Object {
"css": Object {
"body": "uTw0Zyl5UXHez5t_lWCWm",
"footer": "_2QW_-wZzF9G9_VrEnlztAG",
"header-baz": "_24LP0msVwbV2gDQs7MsBEI",
},
"html": "
"css": Object {
"body": "uTw0Zyl5UXHez5t_lWCWm",
"footer": "_2QW_-wZzF9G9_VrEnlztAG",
"header-baz": "_24LP0msVwbV2gDQs7MsBEI",
},
"html": "
<div class=\\"_24LP0msVwbV2gDQs7MsBEI\\">
<div class=\\"uTw0Zyl5UXHez5t_lWCWm\\">
<div class=\\"_2QW_-wZzF9G9_VrEnlztAG\\">
",
},
}
`;

exports[`"esModule" option should work with esModule-css-loader + esModule-style-loader: warnings 1`] = `Array []`;
exports[`"esModule" option should work with esModule css-loader + esModule style-loader: warnings 1`] = `Array []`;
19 changes: 13 additions & 6 deletions test/esModule-option.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,11 +184,18 @@ describe('"esModule" option', () => {
];

for (const test of styleLoaderTests) {
it(`should work with ${test.localLoaderMode}-css-loader + ${test.extractLoaderMode}-style-loader`, async () => {
it(`should work with ${test.localLoaderMode} css-loader + ${test.extractLoaderMode} style-loader`, async () => {
const compiler = getCompiler(
'./es-module/template/index.js',
{},
{
output: {
path: path.resolve(__dirname, './outputs'),
filename: '[name].bundle.js',
chunkFilename: '[name].chunk.js',
publicPath: '/webpack/public/path/',
libraryTarget: 'commonjs2',
},
module: {
rules: [
{
Expand All @@ -215,10 +222,10 @@ describe('"esModule" option', () => {
);
const stats = await compile(compiler);

expect(
// eslint-disable-next-line no-eval
eval(readAsset('main.bundle.js', compiler, stats))
).toMatchSnapshot('result');
// eslint-disable-next-line no-eval
const result = eval(readAsset('main.bundle.js', compiler, stats));

expect(result.default || result).toMatchSnapshot('result');

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

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