feat: use the webpackImporter var and add unit test

Author: paniuncle

README.md

@@ -313,7 +313,7 @@ module.exports = {
 Type:
 
 ```ts
-type webpackImporter = boolean;
+type webpackImporter = boolean | "only";
 ```
 
 Default: `true`
@@ -346,45 +346,6 @@ module.exports = {
 };
 ```
 
-### `onlyWebpackImporter`
-
-Type:
-
-```ts
-type onlyWebpackImporter = boolean;
-```
-
-Default: `true`
-
-Enables/Disables the only use `webpack` importer.
-
-This can improve performance in some cases. Use it with caution because aliases and `@import` from [`node_modules`](https://webpack.js.org/configuration/resolve/#resolvemodules) will not work.
-
-**webpack.config.js**
-
-```js
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.less$/i,
-        use: [
-          "style-loader",
-          "css-loader",
-          {
-            loader: "less-loader",
-            options: {
-              webpackImporter: true,
-              onlyWebpackImporter: true,
-            },
-          },
-        ],
-      },
-    ],
-  },
-};
-```
-
 ### `implementation`
 
 Type:

src/options.json

@@ -35,7 +35,15 @@
     "webpackImporter": {
       "description": "Enables/Disables default `webpack` importer.",
       "link": "https://github.com/webpack-contrib/less-loader#webpackimporter",
-      "type": "boolean"
+      "anyOf": [
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "string",
+          "enum": ["only"]
+        }
+      ]
     },
     "implementation": {
       "description": "The implementation of the `Less` to be used.",

src/utils.js

@@ -106,7 +106,10 @@ function createWebpackLessPlugin(loaderContext, implementation) {
       let result;
 
       try {
-        if (IS_SPECIAL_MODULE_IMPORT.test(filename) || lessOptions.onlyWebpackImporter) {
+        if (
+          IS_SPECIAL_MODULE_IMPORT.test(filename) ||
+          lessOptions.webpackImporter === "only"
+        ) {
           const error = new Error();
 
           error.type = "Next";
@@ -178,7 +181,8 @@ function getLessOptions(loaderContext, loaderOptions, implementation) {
 
   const plugins = lessOptions.plugins.slice();
   const shouldUseWebpackImporter =
-    typeof loaderOptions.webpackImporter === "boolean"
+    typeof loaderOptions.webpackImporter === "boolean" ||
+    loaderOptions.webpackImporter === "only"
       ? loaderOptions.webpackImporter
       : true;
 

test/__snapshots__/validate-options.test.js.snap

@@ -238,7 +238,11 @@ exports[`validate options should throw an error on the "unknown" option with "tr
 
 exports[`validate options should throw an error on the "webpackImporter" option with "string" value 1`] = `
 "Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.
- - options.webpackImporter should be a boolean.
+ - options.webpackImporter should be one of these:
+   boolean | "only"
    -> Enables/Disables default \`webpack\` importer.
-   -> Read more at https://github.com/webpack-contrib/less-loader#webpackimporter"
+   -> Read more at https://github.com/webpack-contrib/less-loader#webpackimporter
+   Details:
+    * options.webpackImporter should be a boolean.
+    * options.webpackImporter should be "only"."
 `;

test/__snapshots__/webpackImporter-options.test.js.snap

@@ -36,6 +36,26 @@ exports[`"webpackImporter" option should work when value is "false": errors 1`]
 
 exports[`"webpackImporter" option should work when value is "false": warnings 1`] = `[]`;
 
+exports[`"webpackImporter" option should work when value is "only": css 1`] = `
+"@import "some/css.css";
+@import "some/css.css";
+#it-works {
+  color: hotpink;
+}
+.modules-dir-some-module,
+#it-works {
+  background: hotpink;
+}
+#it-works {
+  margin: 10px;
+}
+"
+`;
+
+exports[`"webpackImporter" option should work when value is "only": errors 1`] = `[]`;
+
+exports[`"webpackImporter" option should work when value is "only": warnings 1`] = `[]`;
+
 exports[`"webpackImporter" option should work when value is "true": css 1`] = `
 "@import "some/css.css";
 @import "some/css.css";

test/validate-options.test.js

@@ -22,7 +22,7 @@ describe("validate options", () => {
       failure: ["string"],
     },
     webpackImporter: {
-      success: [true, false],
+      success: [true, false, "only"],
       failure: ["string"],
     },
     implementation: {

test/webpackImporter-options.test.js

@@ -36,6 +36,21 @@ describe('"webpackImporter" option', () => {
     expect(getErrors(stats)).toMatchSnapshot("errors");
   });
 
+  it('should work when value is "only"', async () => {
+    const testId = "./import-webpack.less";
+    const compiler = getCompiler(testId, {
+      webpackImporter: "only",
+    });
+    const stats = await compile(compiler);
+    const codeFromBundle = getCodeFromBundle(stats, compiler);
+    const codeFromLess = await getCodeFromLess(testId);
+
+    expect(codeFromBundle.css).toBe(codeFromLess.css);
+    expect(codeFromBundle.css).toMatchSnapshot("css");
+    expect(getWarnings(stats)).toMatchSnapshot("warnings");
+    expect(getErrors(stats)).toMatchSnapshot("errors");
+  });
+
   it('should work when value is "false"', async () => {
     const testId = "./import.less";
     const compiler = getCompiler(testId, {