fix: respect third-party plugins for Less (#353)

Author: cap-Bernardito

src/utils.js

@@ -156,7 +156,7 @@ function getLessOptions(loaderContext, loaderOptions) {
     ...options,
   };
 
-  lessOptions.plugins.push(createWebpackLessPlugin(loaderContext));
+  lessOptions.plugins.unshift(createWebpackLessPlugin(loaderContext));
 
   const useSourceMap =
     typeof loaderOptions.sourceMap === 'boolean'

test/__snapshots__/loader.test.js.snap

@@ -323,6 +323,26 @@ exports[`loader should transform urls: errors 1`] = `Array []`;
 
 exports[`loader should transform urls: warnings 1`] = `Array []`;
 
+exports[`loader should work third-party plugins as fileLoader: css 1`] = `
+".file-loader {
+  background: coral;
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc9.ttf) format('truetype');
+}
+.modules-dir-scope-module {
+  color: hotpink;
+}
+"
+`;
+
+exports[`loader should work third-party plugins as fileLoader: errors 1`] = `Array []`;
+
+exports[`loader should work third-party plugins as fileLoader: warnings 1`] = `Array []`;
+
 exports[`loader should work: css 1`] = `
 ".box {
   color: #fe33ac;

test/fixtures/file-load-replacement.less

@@ -0,0 +1,3 @@
+.file-loader {
+  background: coral;
+}

test/fixtures/file-load.less

@@ -0,0 +1,3 @@
+@import "forFileLoaderPluginResolve.less";
+@import (once) url("https://fonts.googleapis.com/css?family=Roboto:500");
+@import "~@scope/module";

test/fixtures/folder/customFileLoaderPlugin.js

@@ -0,0 +1,26 @@
+import path from "path";
+import less from "less";
+
+class Plugin extends less.FileManager {
+  supports(filename) {
+    if (filename === 'forFileLoaderPluginResolve.less') {
+      return true;
+    }
+
+    return false;
+  }
+
+  loadFile(filename, ...args) {
+    const result = path.resolve(__dirname, '../', 'file-load-replacement.less');
+
+    return super.loadFile(result, ...args);
+  };
+}
+
+class CustomFileLoaderPlugin {
+  install(less, pluginManager) {
+    pluginManager.addFileManager(new Plugin());
+  }
+}
+
+module.exports = CustomFileLoaderPlugin;

test/helpers/getCodeFromLess.js

@@ -96,17 +96,20 @@ class CustomImportPlugin {
 async function getCodeFromLess(testId, options = {}) {
   const pathToFile = path.resolve(__dirname, '..', 'fixtures', testId);
   const defaultOptions = {
-    plugins: [new CustomImportPlugin()],
+    plugins: [],
     relativeUrls: true,
     filename: pathToFile,
   };
   const lessOptions = options.lessOptions || {};
   const data = await fs.promises.readFile(pathToFile);
-
-  const result = await less.render(data.toString(), {
+  const mergedOptions = {
     ...defaultOptions,
     ...lessOptions,
-  });
+  };
+
+  mergedOptions.plugins.unshift(new CustomImportPlugin());
+
+  const result = await less.render(data.toString(), mergedOptions);
 
   return result;
 }

test/loader.test.js

@@ -1,6 +1,7 @@
 import path from 'path';
 
 import CustomImportPlugin from './fixtures/folder/customImportPlugin';
+import CustomFileLoaderPlugin from './fixtures/folder/customFileLoaderPlugin';
 
 import {
   compile,
@@ -99,6 +100,27 @@ describe('loader', () => {
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
 
+  it('should work third-party plugins as fileLoader', async () => {
+    const testId = './file-load.less';
+    const compiler = getCompiler(testId, {
+      lessOptions: {
+        plugins: [new CustomFileLoaderPlugin()],
+      },
+    });
+    const stats = await compile(compiler);
+    const codeFromBundle = getCodeFromBundle(stats, compiler);
+    const codeFromLess = await getCodeFromLess(testId, {
+      lessOptions: {
+        plugins: [new CustomFileLoaderPlugin()],
+      },
+    });
+
+    expect(codeFromBundle.css).toBe(codeFromLess.css);
+    expect(codeFromBundle.css).toMatchSnapshot('css');
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
+
   it('should not alter the original options object', async () => {
     const options = { lessOptions: { plugins: [] } };
     const copiedOptions = { ...options };