From 214157064964c7d435b703feaab61ef3d4fe86d7 Mon Sep 17 00:00:00 2001 From: alexander-akait Date: Sat, 29 Aug 2026 13:32:45 +0000 Subject: [PATCH] test: cover more module types with the built-in CSS support Follow-up to #609. Allow the module `type` of the rule to be configured in the `getCssCompiler` helper and add tests for it: - the `css` type keeps local class names of a `*.module.less` file - the `css/module` type renames local class names of any file - a `Less` warning is reported as a webpack warning Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_015mWLDEnMwEUsTLYX1akDLL --- test/__snapshots__/built-in-css.test.js.snap | 34 ++++++++++++++++++ test/built-in-css.test.js | 38 ++++++++++++++++++++ test/helpers/getCssCompiler.js | 7 ++-- 3 files changed, 76 insertions(+), 3 deletions(-) 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);