diff --git a/test/__snapshots__/built-in-css.test.js.snap b/test/__snapshots__/built-in-css.test.js.snap index c49db5e..6e0230b 100644 --- a/test/__snapshots__/built-in-css.test.js.snap +++ b/test/__snapshots__/built-in-css.test.js.snap @@ -16,6 +16,16 @@ exports[`built-in CSS support > should emit assets from \`url()\` 2`] = ` [] `; +exports[`built-in CSS support > should emit less warning as webpack warning 1`] = ` +[ + "ModuleWarning: Module Warning (from \`replaced original path\`):\\nWARNING: extend ' .body1' has no matches" +] +`; + +exports[`built-in CSS support > should emit less warning as webpack warning 2`] = ` +[] +`; + exports[`built-in CSS support > should generate source maps 1`] = ` [] `; @@ -24,6 +34,30 @@ exports[`built-in CSS support > should generate source maps 2`] = ` [] `; +exports[`built-in CSS support > should not treat a file as a CSS module with the \`css\` type 1`] = ` +".box {\\n color: #fe33ac;\\n}\\n.nested {\\n color: #fe33ac;\\n padding: 10px;\\n}\\n\\n" +`; + +exports[`built-in CSS support > should not treat a file as a CSS module with the \`css\` type 2`] = ` +[] +`; + +exports[`built-in CSS support > should not treat a file as a CSS module with the \`css\` type 3`] = ` +[] +`; + +exports[`built-in CSS support > should treat any file as a CSS module with the \`css/module\` type 1`] = ` +".built-in-css_basic_less-imported {\\n color: hotpink;\\n}\\n.built-in-css_basic_less-modules-dir-some-module {\\n color: hotpink;\\n}\\n.built-in-css_basic_less-box {\\n color: #fe33ac;\\n border-color: #fdcdea;\\n background: url(circle.svg);\\n}\\n\\n" +`; + +exports[`built-in CSS support > should treat any file as a CSS module with the \`css/module\` type 2`] = ` +[] +`; + +exports[`built-in CSS support > should treat any file as a CSS module with the \`css/module\` type 3`] = ` +[] +`; + exports[`built-in CSS support > should work 1`] = ` ".imported {\\n color: hotpink;\\n}\\n.modules-dir-some-module {\\n color: hotpink;\\n}\\n.box {\\n color: #fe33ac;\\n border-color: #fdcdea;\\n background: url(circle.svg);\\n}\\n\\n" `; diff --git a/test/built-in-css.test.js b/test/built-in-css.test.js index 66a5413..344a274 100644 --- a/test/built-in-css.test.js +++ b/test/built-in-css.test.js @@ -55,6 +55,35 @@ describe("built-in CSS support", { timeout: 30000 }, () => { t.assert.snapshot(getErrors(stats)); }); + it("should not treat a file as a CSS module with the `css` type", async (t) => { + const testId = "./built-in-css/style.module.less"; + const compiler = getCssCompiler(testId, {}, { type: "css" }); + const stats = await compile(compiler); + const css = readAsset("main.css", compiler, stats); + + assert.match(css, /^\.box\b/m, "Expected local class names to be kept"); + t.assert.snapshot(css); + t.assert.snapshot(getWarnings(stats)); + t.assert.snapshot(getErrors(stats)); + }); + + it("should treat any file as a CSS module with the `css/module` type", async (t) => { + const testId = "./built-in-css/basic.less"; + const compiler = getCssCompiler(testId, {}, { type: "css/module" }); + const stats = await compile(compiler); + const css = readAsset("main.css", compiler, stats); + + assert.doesNotMatch( + css, + /^\.box\b/m, + "Expected local class names to be renamed", + ); + assert.match(css, /^\.[\w-]+-box\b/m); + t.assert.snapshot(css); + t.assert.snapshot(getWarnings(stats)); + t.assert.snapshot(getErrors(stats)); + }); + it("should work with the `lessOptions` option", async (t) => { const testId = "./built-in-css/variables.less"; const compiler = getCssCompiler(testId, { @@ -104,6 +133,15 @@ describe("built-in CSS support", { timeout: 30000 }, () => { t.assert.snapshot(getErrors(stats)); }); + it("should emit less warning as webpack warning", async (t) => { + const testId = "./warn.less"; + const compiler = getCssCompiler(testId); + const stats = await compile(compiler); + + t.assert.snapshot(getWarnings(stats)); + t.assert.snapshot(getErrors(stats)); + }); + it("should emit an error on a broken file", async (t) => { const testId = "./error.less"; const compiler = getCssCompiler(testId); diff --git a/test/helpers/getCssCompiler.js b/test/helpers/getCssCompiler.js index f20d2e9..ccffc30 100644 --- a/test/helpers/getCssCompiler.js +++ b/test/helpers/getCssCompiler.js @@ -11,10 +11,11 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url)); * (i.e. `experiments.css`) instead of `css-loader`/`style-loader`. * @param {string} fixture fixture * @param {object} loaderOptions loader options - * @param {object} config webpack config + * @param {object} config webpack config, the `type` property is used as the module type of the rule * @returns {Compiler} compiler */ export default (fixture, loaderOptions = {}, config = {}) => { + const { type = "css/auto", ...webpackConfig } = config; const fullConfig = { mode: "development", devtool: config.devtool || false, @@ -36,7 +37,7 @@ export default (fixture, loaderOptions = {}, config = {}) => { rules: [ { test: /\.less$/i, - type: "css/auto", + type, use: [ { loader: path.resolve(__dirname, "../../src/index.js"), @@ -47,7 +48,7 @@ export default (fixture, loaderOptions = {}, config = {}) => { ], }, plugins: [], - ...config, + ...webpackConfig, }; const compiler = webpack(fullConfig);