diff --git a/test/__snapshots__/importLoaders-option.test.js.snap b/test/__snapshots__/importLoaders-option.test.js.snap new file mode 100644 index 00000000..7a38812e --- /dev/null +++ b/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 []`; diff --git a/test/fixtures/nested-import/imported.css b/test/fixtures/nested-import/imported.css new file mode 100644 index 00000000..fb5bac7b --- /dev/null +++ b/test/fixtures/nested-import/imported.css @@ -0,0 +1,4 @@ +.bar { + color: blue; + color: rgb(0 0 100% / 90%); +} diff --git a/test/fixtures/nested-import/source.css b/test/fixtures/nested-import/source.css new file mode 100644 index 00000000..25fa4ca1 --- /dev/null +++ b/test/fixtures/nested-import/source.css @@ -0,0 +1,6 @@ +@import './imported.css'; + +.foo { + color: red; + color: rgb(0 0 100% / 90%); +} diff --git a/test/helpers.js b/test/helpers.js index 8fdf01a5..be2f8596 100644 --- a/test/helpers.js +++ b/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', diff --git a/test/importLoaders-option.test.js b/test/importLoaders-option.test.js new file mode 100644 index 00000000..7cc02ad0 --- /dev/null +++ b/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'); + }); +});