+",
+ },
+}
+`;
+
+exports[`"esModule" option should work with esModule-css-loader + esModule-style-loader: warnings 1`] = `Array []`;
diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap
index cfe5a918..acc8a8fb 100644
--- a/test/__snapshots__/loader.test.js.snap
+++ b/test/__snapshots__/loader.test.js.snap
@@ -381,76 +381,6 @@ exports[`loader should work with ModuleConcatenationPlugin: errors 1`] = `Array
exports[`loader should work with ModuleConcatenationPlugin: warnings 1`] = `Array []`;
-exports[`loader should work with commonjs-css-loader + commonjs-mini-css-extract-plugin: css 1`] = `
-".some-class {
- color: red;
-}
-
-"
-`;
-
-exports[`loader should work with commonjs-css-loader + commonjs-mini-css-extract-plugin: errors 1`] = `Array []`;
-
-exports[`loader should work with commonjs-css-loader + commonjs-mini-css-extract-plugin: result 1`] = `Object {}`;
-
-exports[`loader should work with commonjs-css-loader + commonjs-mini-css-extract-plugin: warnings 1`] = `Array []`;
-
-exports[`loader should work with commonjs-css-loader + commonjs-style-loader: DOM 1`] = `
-"
-
style-loader test
-
-
-
-
Body
-
-
-
-
-"
-`;
-
-exports[`loader should work with commonjs-css-loader + commonjs-style-loader: errors 1`] = `Array []`;
-
-exports[`loader should work with commonjs-css-loader + commonjs-style-loader: warnings 1`] = `Array []`;
-
-exports[`loader should work with commonjs-css-loader + esModule-mini-css-extract-plugin: css 1`] = `
-".some-class {
- color: red;
-}
-
-"
-`;
-
-exports[`loader should work with commonjs-css-loader + esModule-mini-css-extract-plugin: errors 1`] = `Array []`;
-
-exports[`loader should work with commonjs-css-loader + esModule-mini-css-extract-plugin: result 1`] = `Object {}`;
-
-exports[`loader should work with commonjs-css-loader + esModule-mini-css-extract-plugin: warnings 1`] = `Array []`;
-
-exports[`loader should work with commonjs-css-loader + esModule-style-loader: DOM 1`] = `
-"
-
style-loader test
-
-
-
-
Body
-
-
-
-
-"
-`;
-
-exports[`loader should work with commonjs-css-loader + esModule-style-loader: errors 1`] = `Array []`;
-
-exports[`loader should work with commonjs-css-loader + esModule-style-loader: warnings 1`] = `Array []`;
-
exports[`loader should work with empty css: errors 1`] = `Array []`;
exports[`loader should work with empty css: module 1`] = `
@@ -649,76 +579,6 @@ a[href=\\"\\" i] {
exports[`loader should work with empty options: warnings 1`] = `Array []`;
-exports[`loader should work with esModule-css-loader + commonjs-mini-css-extract-plugin: css 1`] = `
-".some-class {
- color: red;
-}
-
-"
-`;
-
-exports[`loader should work with esModule-css-loader + commonjs-mini-css-extract-plugin: errors 1`] = `Array []`;
-
-exports[`loader should work with esModule-css-loader + commonjs-mini-css-extract-plugin: result 1`] = `Object {}`;
-
-exports[`loader should work with esModule-css-loader + commonjs-mini-css-extract-plugin: warnings 1`] = `Array []`;
-
-exports[`loader should work with esModule-css-loader + commonjs-style-loader: DOM 1`] = `
-"
-
style-loader test
-
-
-
-
Body
-
-
-
-
-"
-`;
-
-exports[`loader should work with esModule-css-loader + commonjs-style-loader: errors 1`] = `Array []`;
-
-exports[`loader should work with esModule-css-loader + commonjs-style-loader: warnings 1`] = `Array []`;
-
-exports[`loader should work with esModule-css-loader + esModule-mini-css-extract-plugin: css 1`] = `
-".some-class {
- color: red;
-}
-
-"
-`;
-
-exports[`loader should work with esModule-css-loader + esModule-mini-css-extract-plugin: errors 1`] = `Array []`;
-
-exports[`loader should work with esModule-css-loader + esModule-mini-css-extract-plugin: result 1`] = `Object {}`;
-
-exports[`loader should work with esModule-css-loader + esModule-mini-css-extract-plugin: warnings 1`] = `Array []`;
-
-exports[`loader should work with esModule-css-loader + esModule-style-loader: DOM 1`] = `
-"
-
style-loader test
-
-
-
-
Body
-
-
-
-
-"
-`;
-
-exports[`loader should work with esModule-css-loader + esModule-style-loader: errors 1`] = `Array []`;
-
-exports[`loader should work with esModule-css-loader + esModule-style-loader: warnings 1`] = `Array []`;
-
exports[`loader should work with the "modules.auto" option and the "importLoaders" option: errors 1`] = `Array []`;
exports[`loader should work with the "modules.auto" option and the "importLoaders" option: result 1`] = `
diff --git a/test/esModule-option.test.js b/test/esModule-option.test.js
index 6e51ac5a..80463996 100644
--- a/test/esModule-option.test.js
+++ b/test/esModule-option.test.js
@@ -1,3 +1,7 @@
+import path from 'path';
+
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+
import {
compile,
getCompiler,
@@ -5,6 +9,7 @@ import {
getExecutedCode,
getModuleSource,
getWarnings,
+ readAsset,
} from './helpers/index';
describe('"esModule" option', () => {
@@ -159,6 +164,132 @@ describe('"esModule" option', () => {
expect(getErrors(stats)).toMatchSnapshot('errors');
});
+ const styleLoaderTests = [
+ {
+ localLoaderMode: 'commonjs',
+ extractLoaderMode: 'commonjs',
+ },
+ {
+ localLoaderMode: 'esModule',
+ extractLoaderMode: 'esModule',
+ },
+ {
+ localLoaderMode: 'commonjs',
+ extractLoaderMode: 'esModule',
+ },
+ {
+ localLoaderMode: 'esModule',
+ extractLoaderMode: 'commonjs',
+ },
+ ];
+
+ for (const test of styleLoaderTests) {
+ it(`should work with ${test.localLoaderMode}-css-loader + ${test.extractLoaderMode}-style-loader`, async () => {
+ const compiler = getCompiler(
+ './es-module/template/index.js',
+ {},
+ {
+ module: {
+ rules: [
+ {
+ test: /\.css$/i,
+ use: [
+ {
+ loader: 'style-loader',
+ options: {
+ esModule: test.extractLoaderMode === 'esModule',
+ },
+ },
+ {
+ loader: path.resolve(__dirname, '../src'),
+ options: {
+ esModule: test.localLoaderMode === 'esModule',
+ modules: true,
+ },
+ },
+ ],
+ },
+ ],
+ },
+ }
+ );
+ const stats = await compile(compiler);
+
+ expect(
+ // eslint-disable-next-line no-eval
+ eval(readAsset('main.bundle.js', compiler, stats))
+ ).toMatchSnapshot('result');
+
+ expect(getWarnings(stats)).toMatchSnapshot('warnings');
+ expect(getErrors(stats)).toMatchSnapshot('errors');
+ });
+ }
+
+ const miniCssExtractPluginTests = [
+ {
+ localLoaderMode: 'commonjs',
+ extractLoaderMode: 'commonjs',
+ },
+ {
+ localLoaderMode: 'esModule',
+ extractLoaderMode: 'esModule',
+ },
+ {
+ localLoaderMode: 'commonjs',
+ extractLoaderMode: 'esModule',
+ },
+ {
+ localLoaderMode: 'esModule',
+ extractLoaderMode: 'commonjs',
+ },
+ ];
+
+ for (const test of miniCssExtractPluginTests) {
+ it(`should work with ${test.localLoaderMode}-css-loader + ${test.extractLoaderMode}-mini-css-extract-plugin`, async () => {
+ const compiler = getCompiler(
+ './es-module/template/index.js',
+ {},
+ {
+ module: {
+ rules: [
+ {
+ test: /\.css$/i,
+ use: [
+ {
+ loader: MiniCssExtractPlugin.loader,
+ options: {
+ esModule: test.extractLoaderMode === 'esModule',
+ },
+ },
+ {
+ loader: path.resolve(__dirname, '../src'),
+ options: {
+ esModule: test.localLoaderMode === 'esModule',
+ modules: true,
+ },
+ },
+ ],
+ },
+ ],
+ },
+ plugins: [
+ new MiniCssExtractPlugin({
+ filename: '[name].css',
+ chunkFilename: '[id].css',
+ }),
+ ],
+ }
+ );
+ const stats = await compile(compiler);
+
+ expect(
+ getExecutedCode('main.bundle.js', compiler, stats)
+ ).toMatchSnapshot('result');
+ expect(getWarnings(stats)).toMatchSnapshot('warnings');
+ expect(getErrors(stats)).toMatchSnapshot('errors');
+ });
+ }
+
it('should emit error when class has unsupported name', async () => {
const compiler = getCompiler('./es-module/named/broken/index.js', {
esModule: true,
diff --git a/test/fixtures/es-module/template/index.css b/test/fixtures/es-module/template/index.css
new file mode 100644
index 00000000..b3ccc301
--- /dev/null
+++ b/test/fixtures/es-module/template/index.css
@@ -0,0 +1,11 @@
+:local(.header-baz) {
+ color: red;
+}
+
+:local(.body) {
+ color: coral;
+}
+
+:local(.footer) {
+ color: blue;
+}
diff --git a/test/fixtures/es-module/template/index.js b/test/fixtures/es-module/template/index.js
new file mode 100644
index 00000000..6742d444
--- /dev/null
+++ b/test/fixtures/es-module/template/index.js
@@ -0,0 +1,6 @@
+import css from './index.css';
+import html from './template.js';
+
+const result = {css, html};
+
+export default result;
diff --git a/test/fixtures/es-module/template/template.js b/test/fixtures/es-module/template/template.js
new file mode 100644
index 00000000..31b948a2
--- /dev/null
+++ b/test/fixtures/es-module/template/template.js
@@ -0,0 +1,9 @@
+import css from './index.css';
+
+let html = '\n';
+
+html += `