test: importLoaders option

test/__snapshots__/importLoaders-option.test.js.snap

@@ -0,0 +1,196 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`importLoaders option 0 (\`postcss-loader\` before): errors 1`] = `Array []`;
+
+exports[`importLoaders option 0 (\`postcss-loader\` before): module (evaluated) 1`] = `
+Array [
+  Array [
+    2,
+    ".bar {
+  color: blue;
+  color: rgb(0 0 100% / 90%);
+}
+",
+    "",
+  ],
+  Array [
+    1,
+    ".foo {
+  color: red;
+  color: rgba(0, 0, 255, 0.9);
+}
+",
+    "",
+  ],
+]
+`;
+
+exports[`importLoaders option 0 (\`postcss-loader\` before): module 1`] = `
+"exports = module.exports = require(\\"../../../lib/runtime/api.js\\")(false);
+// imports
+exports.i(require(\\"-!../../../index.js??ref--4-0!./imported.css\\"), \\"\\");
+
+// module
+exports.push([module.id, \\".foo {\\\\n  color: red;\\\\n  color: rgba(0, 0, 255, 0.9);\\\\n}\\\\n\\", \\"\\"]);
+
+// exports
+"
+`;
+
+exports[`importLoaders option 0 (\`postcss-loader\` before): warnings 1`] = `Array []`;
+
+exports[`importLoaders option 1 (\`postcss-loader\` before): errors 1`] = `Array []`;
+
+exports[`importLoaders option 1 (\`postcss-loader\` before): module (evaluated) 1`] = `
+Array [
+  Array [
+    2,
+    ".bar {
+  color: blue;
+  color: rgba(0, 0, 255, 0.9);
+}
+",
+    "",
+  ],
+  Array [
+    1,
+    ".foo {
+  color: red;
+  color: rgba(0, 0, 255, 0.9);
+}
+",
+    "",
+  ],
+]
+`;
+
+exports[`importLoaders option 1 (\`postcss-loader\` before): module 1`] = `
+"exports = module.exports = require(\\"../../../lib/runtime/api.js\\")(false);
+// imports
+exports.i(require(\\"-!../../../index.js??ref--4-0!../../../node_modules/postcss-loader/src/index.js??ref--4-1!./imported.css\\"), \\"\\");
+
+// module
+exports.push([module.id, \\".foo {\\\\n  color: red;\\\\n  color: rgba(0, 0, 255, 0.9);\\\\n}\\\\n\\", \\"\\"]);
+
+// exports
+"
+`;
+
+exports[`importLoaders option 1 (\`postcss-loader\` before): warnings 1`] = `Array []`;
+
+exports[`importLoaders option 1 (no loaders before): errors 1`] = `Array []`;
+
+exports[`importLoaders option 1 (no loaders before): module (evaluated) 1`] = `
+Array [
+  Array [
+    2,
+    ".bar {
+  color: blue;
+  color: rgb(0 0 100% / 90%);
+}
+",
+    "",
+  ],
+  Array [
+    1,
+    ".foo {
+  color: red;
+  color: rgb(0 0 100% / 90%);
+}
+",
+    "",
+  ],
+]
+`;
+
+exports[`importLoaders option 1 (no loaders before): module 1`] = `
+"exports = module.exports = require(\\"../../../lib/runtime/api.js\\")(false);
+// imports
+exports.i(require(\\"-!../../../index.js??ref--4-0!./imported.css\\"), \\"\\");
+
+// module
+exports.push([module.id, \\".foo {\\\\n  color: red;\\\\n  color: rgb(0 0 100% / 90%);\\\\n}\\\\n\\", \\"\\"]);
+
+// exports
+"
+`;
+
+exports[`importLoaders option 1 (no loaders before): warnings 1`] = `Array []`;
+
+exports[`importLoaders option 2 (\`postcss-loader\` before): errors 1`] = `Array []`;
+
+exports[`importLoaders option 2 (\`postcss-loader\` before): module (evaluated) 1`] = `
+Array [
+  Array [
+    2,
+    ".bar {
+  color: blue;
+  color: rgba(0, 0, 255, 0.9);
+}
+",
+    "",
+  ],
+  Array [
+    1,
+    ".foo {
+  color: red;
+  color: rgba(0, 0, 255, 0.9);
+}
+",
+    "",
+  ],
+]
+`;
+
+exports[`importLoaders option 2 (\`postcss-loader\` before): module 1`] = `
+"exports = module.exports = require(\\"../../../lib/runtime/api.js\\")(false);
+// imports
+exports.i(require(\\"-!../../../index.js??ref--4-0!../../../node_modules/postcss-loader/src/index.js??ref--4-1!./imported.css\\"), \\"\\");
+
+// module
+exports.push([module.id, \\".foo {\\\\n  color: red;\\\\n  color: rgba(0, 0, 255, 0.9);\\\\n}\\\\n\\", \\"\\"]);
+
+// exports
+"
+`;
+
+exports[`importLoaders option 2 (\`postcss-loader\` before): warnings 1`] = `Array []`;
+
+exports[`importLoaders option not specify (no loader before): errors 1`] = `Array []`;
+
+exports[`importLoaders option not specify (no loader before): module (evaluated) 1`] = `
+Array [
+  Array [
+    2,
+    ".bar {
+  color: blue;
+  color: rgb(0 0 100% / 90%);
+}
+",
+    "",
+  ],
+  Array [
+    1,
+    ".foo {
+  color: red;
+  color: rgba(0, 0, 255, 0.9);
+}
+",
+    "",
+  ],
+]
+`;
+
+exports[`importLoaders option not specify (no loader before): module 1`] = `
+"exports = module.exports = require(\\"../../../lib/runtime/api.js\\")(false);
+// imports
+exports.i(require(\\"-!../../../index.js??ref--4-0!./imported.css\\"), \\"\\");
+
+// module
+exports.push([module.id, \\".foo {\\\\n  color: red;\\\\n  color: rgba(0, 0, 255, 0.9);\\\\n}\\\\n\\", \\"\\"]);
+
+// exports
+"
+`;
+
+exports[`importLoaders option not specify (no loader before): warnings 1`] = `Array []`;

test/fixtures/nested-import/imported.css

@@ -0,0 +1,4 @@
+.bar {
+  color: blue;
+  color: rgb(0 0 100% / 90%);
+}

test/fixtures/nested-import/source.css

@@ -0,0 +1,6 @@
+@import './imported.css';
+
+.foo {
+  color: red;
+  color: rgb(0 0 100% / 90%);
+}

test/helpers.js

@@ -31,6 +31,7 @@ function evaluated(output, modules, moduleId = 1) {
         const importedModule = modules.find((el) => {
           const modulePath = el.identifier.split('!').pop();
           const importedPaths = [
+            'nested-import',
             'postcss-present-env',
             'icss/tests-cases/import',
             'icss/tests-cases/import-reserved-keywords',

test/importLoaders-option.test.js

@@ -0,0 +1,106 @@
+const postcssPresetEnv = require('postcss-preset-env');
+
+const { webpack, evaluated } = require('./helpers');
+
+describe('importLoaders option', () => {
+  it('not specify (no loader before)', async () => {
+    // It is hard to test `postcss` on reuse `ast`, please look on coverage before merging
+    const config = {
+      postcssLoader: true,
+      postcssLoaderOptions: {
+        plugins: () => [postcssPresetEnv({ stage: 0 })],
+      },
+    };
+    const testId = './nested-import/source.css';
+    const stats = await webpack(testId, config);
+    const { modules } = stats.toJson();
+    const module = modules.find((m) => m.id === testId);
+
+    expect(module.source).toMatchSnapshot('module');
+    expect(evaluated(module.source, modules)).toMatchSnapshot(
+      'module (evaluated)'
+    );
+    expect(stats.compilation.warnings).toMatchSnapshot('warnings');
+    expect(stats.compilation.errors).toMatchSnapshot('errors');
+  });
+
+  it('1 (no loaders before)', async () => {
+    const config = {
+      loader: { options: { importLoaders: 1 } },
+    };
+    const testId = './nested-import/source.css';
+    const stats = await webpack(testId, config);
+    const { modules } = stats.toJson();
+    const module = modules.find((m) => m.id === testId);
+
+    expect(module.source).toMatchSnapshot('module');
+    expect(evaluated(module.source, modules)).toMatchSnapshot(
+      'module (evaluated)'
+    );
+    expect(stats.compilation.warnings).toMatchSnapshot('warnings');
+    expect(stats.compilation.errors).toMatchSnapshot('errors');
+  });
+
+  it('0 (`postcss-loader` before)', async () => {
+    const config = {
+      loader: { options: { importLoaders: 0 } },
+      postcssLoader: true,
+      postcssLoaderOptions: {
+        plugins: () => [postcssPresetEnv({ stage: 0 })],
+      },
+    };
+    const testId = './nested-import/source.css';
+    const stats = await webpack(testId, config);
+    const { modules } = stats.toJson();
+    const module = modules.find((m) => m.id === testId);
+
+    expect(module.source).toMatchSnapshot('module');
+    expect(evaluated(module.source, modules)).toMatchSnapshot(
+      'module (evaluated)'
+    );
+    expect(stats.compilation.warnings).toMatchSnapshot('warnings');
+    expect(stats.compilation.errors).toMatchSnapshot('errors');
+  });
+
+  it('1 (`postcss-loader` before)', async () => {
+    const config = {
+      loader: { options: { importLoaders: 1 } },
+      postcssLoader: true,
+      postcssLoaderOptions: {
+        plugins: () => [postcssPresetEnv({ stage: 0 })],
+      },
+    };
+    const testId = './nested-import/source.css';
+    const stats = await webpack(testId, config);
+    const { modules } = stats.toJson();
+    const module = modules.find((m) => m.id === testId);
+
+    expect(module.source).toMatchSnapshot('module');
+    expect(evaluated(module.source, modules)).toMatchSnapshot(
+      'module (evaluated)'
+    );
+    expect(stats.compilation.warnings).toMatchSnapshot('warnings');
+    expect(stats.compilation.errors).toMatchSnapshot('errors');
+  });
+
+  it('2 (`postcss-loader` before)', async () => {
+    const config = {
+      loader: { options: { importLoaders: 2 } },
+      postcssLoader: true,
+      postcssLoaderOptions: {
+        plugins: () => [postcssPresetEnv({ stage: 0 })],
+      },
+    };
+    const testId = './nested-import/source.css';
+    const stats = await webpack(testId, config);
+    const { modules } = stats.toJson();
+    const module = modules.find((m) => m.id === testId);
+
+    expect(module.source).toMatchSnapshot('module');
+    expect(evaluated(module.source, modules)).toMatchSnapshot(
+      'module (evaluated)'
+    );
+    expect(stats.compilation.warnings).toMatchSnapshot('warnings');
+    expect(stats.compilation.errors).toMatchSnapshot('errors');
+  });
+});