feat: Add support for using only webpackImporter

[paniuncle]

This PR contains a:

• bugfix
• new feature
• code refactor
• test update
• typo fix
• metadata update

Motivation / Use-Case

When using the resolve.extensionAlias property in webpack or rspack, the built-in importer of less-loader would cause this property to become ineffective. Therefore, we've added an onlyWebpackImporter option to enable this capability.

Breaking Changes

No breaking change

Additional Info

No additional info

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: paniuncle / name: Pani (da0be65, 9a2edd7)

[alexander-akait]

This can improve performance in some cases. Use it with caution because aliases and @import from node_modules will not work.

webpack resolver supports aliases and @import, can you clarify?

Also let's use exiting variable, i.e. webpackImporter: boolean | "only"

[paniuncle]

This can improve performance in some cases. Use it with caution because aliases and @import from node_modules will not work.

webpack resolver supports aliases and @import, can you clarify?

Also let's use exiting variable, i.e. webpackImporter: boolean | "only"

I've modified the code to reuse the variable webpackImporter. Additionally, I've supplemented the unit test related content in the code. Regarding the use of webpackImporter: only, references to node_modules can also work properly.

[paniuncle]

Regarding the issue where built-in resolver doesn't work with webpack/rspack's option resolve.extensionAlias, here's a concrete example using rspack:

rspack.config.ts:

import { defineConfig } from '@rspack/cli';

const platform = 'platform-a'; // or maybe platform-b
export default defineConfig({
  resolve: {
    extensionAlias: {
      '.less': [`.${platform}.less`, '.less']
    }
  }
});

As mentioned earlier, there are scenarios where different style distributions are defined through environment variables, such as platform-a and platform-b.

I defined LESS variables for two different platforms:
File: var.platform-a.less

@background-color: #fff;

File: var.platform-b.less

@background-color: #000;

File: var.less

@background-color: red;

LESS definitions using these variables:
File: index.less

@import "./var.less"

.test-class {
  background: @background-color;
}

When we want to avoid prefixing every @import "var.less" with ~ (especially since the ~ prefix is now deprecated), using the built-in resolver prevents webpack/rspack's resolve configuration from taking effect. Therefore, we need to add a configuration to enforce using only webpack/rspack's resolver.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 92.21%. Comparing base (5fcfdbc) to head (9a2edd7).
Report is 15 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #562      +/-   ##
==========================================
+ Coverage   92.02%   92.21%   +0.19%     
==========================================
  Files           3        3              
  Lines         163      167       +4     
  Branches       41       44       +3     
==========================================
+ Hits          150      154       +4     
  Misses         12       12              
  Partials        1        1              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[alexander-akait]

@paniuncle release - https://github.com/webpack-contrib/less-loader/releases/tag/v12.3.0