feat: add support for less-loader

Enables threadloader to be used for less-loader

package.json

@@ -30,6 +30,7 @@
     "fix:prettier": "npm run lint:prettier -- --write",
     "fix": "npm-run-all -l fix:js fix:prettier",
     "test:only": "cross-env NODE_ENV=test jest --forceExit",
+    "testDebug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand webpack.test.js",
     "test:watch": "npm run test:only -- --watch",
     "test:coverage": "npm run test:only -- --collectCoverageFrom=\"src/**/*.js\" --coverage",
     "pretest": "npm run lint",
@@ -68,6 +69,8 @@
     "eslint-plugin-import": "^2.28.0",
     "husky": "^4.3.0",
     "jest": "^29.6.2",
+    "less": "4.2.0",
+    "less-loader": "11.1.3",
     "lint-staged": "^10.5.0",
     "lodash": "^4.17.20",
     "memfs": "^3.5.1",
@@ -82,7 +85,7 @@
     "sass-loader": "^11.0.1",
     "standard-version": "^9.0.0",
     "ts-loader": "^9.4.4",
-    "webpack": "^5.88.2"
+    "webpack": "5.89.0"
   },
   "keywords": [
     "webpack"

src/WorkerPool.js

@@ -21,6 +21,7 @@ class PoolWorker {
     this.activeJobs = 0;
     this.onJobDone = onJobDone;
     this.id = workerId;
+    this.logger = Object.create(null);
 
     workerId += 1;
     // Empty or invalid node args would break the child process
@@ -271,6 +272,63 @@ class PoolWorker {
         finalCallback();
         break;
       }
+      case 'getLogger': {
+        const { data: name } = message;
+        const { data: jobData } = this.jobs[id];
+        if (!this.logger[name]) {
+          this.logger[name] = jobData.getLogger(name);
+        }
+        finalCallback();
+        break;
+      }
+      case 'emitLoggingWarning': {
+        const {
+          data: { message: warningMessage, name },
+        } = message;
+        const { data: jobData } = this.jobs[id];
+        if (!this.logger[name]) {
+          this.logger[name] = jobData.getLogger(name);
+        }
+        this.logger[name].warn(warningMessage);
+        finalCallback();
+        break;
+      }
+      case 'emitLoggingError': {
+        const {
+          data: { message: errorMessage, name },
+        } = message;
+        const { data: jobData } = this.jobs[id];
+        if (!this.logger[name]) {
+          this.logger[name] = jobData.getLogger(name);
+        }
+        this.logger[name].error(errorMessage);
+        finalCallback();
+        break;
+      }
+      case 'emitLoggingLog': {
+        const {
+          data: { message: logMessage, name },
+        } = message;
+        const { data: jobData } = this.jobs[id];
+        if (!this.logger[name]) {
+          this.logger[name] = jobData.getLogger(name);
+        }
+        this.logger[name].info(logMessage);
+        finalCallback();
+        break;
+      }
+      case 'emitLoggingDebug': {
+        const {
+          data: { message: debugMessage, name },
+        } = message;
+        const { data: jobData } = this.jobs[id];
+        if (!this.logger[name]) {
+          this.logger[name] = jobData.getLogger(name);
+        }
+        this.logger[name].debug(debugMessage);
+        finalCallback();
+        break;
+      }
       case 'emitWarning': {
         const { data } = message;
         const { data: jobData } = this.jobs[id];

src/index.js

@@ -50,6 +50,7 @@ function pitch() {
       resourceQuery: this.resourceQuery,
       optionsContext: this.rootContext || this.options.context,
       rootContext: this.rootContext,
+      getLogger: this.getLogger,
     },
     (err, r) => {
       if (r) {

src/worker.js

@@ -130,6 +130,55 @@ const queue = asyncQueue(({ id, data }, taskCallback) => {
         context: {
           version: 2,
           fs,
+          getLogger: (name) => {
+            writeJson({
+              type: 'getLogger',
+              id,
+              data: name,
+            });
+            return {
+              warn: (warningMessage) => {
+                writeJson({
+                  type: 'emitLoggingWarning',
+                  id,
+                  data: {
+                    message: warningMessage,
+                    name,
+                  },
+                });
+              },
+              log: (logMesssage) => {
+                writeJson({
+                  type: 'emitLoggingLog',
+                  id,
+                  data: {
+                    message: logMesssage,
+                    name,
+                  },
+                });
+              },
+              debug: (debugMesssage) => {
+                writeJson({
+                  type: 'emitLoggingDebug',
+                  id,
+                  data: {
+                    message: debugMesssage,
+                    name,
+                  },
+                });
+              },
+              error: (errorMesssage) => {
+                writeJson({
+                  type: 'emitLoggingError',
+                  id,
+                  data: {
+                    message: errorMesssage,
+                    name,
+                  },
+                });
+              },
+            };
+          },
           loadModule: (request, callback) => {
             callbackMap[nextQuestionId] = (error, result) =>
               callback(error, ...result);

test/less-loader-example/assets/style.less

@@ -0,0 +1,3 @@
+body {
+    background: red;
+  }  

test/less-loader-example/index.js

@@ -0,0 +1 @@
+import './assets/style.less';

test/less-loader-example/package.json

@@ -0,0 +1 @@
+{}

test/less-loader-example/webpack.config.js

@@ -0,0 +1,44 @@
+const path = require('path');
+
+const threadLoader = require('../../src'); // eslint-disable-line import/no-extraneous-dependencies
+
+module.exports = (env) => {
+  const workerPool = {
+    workers: +env.threads,
+    poolTimeout: env.watch ? Infinity : 2000,
+  };
+  if (+env.threads > 0) {
+    threadLoader.warmup(workerPool, ['less-loader']);
+  }
+  return {
+    experiments: {
+      css: true,
+    },
+    mode: 'none',
+    context: __dirname,
+    devtool: false,
+    entry: ['./index.js'],
+    output: {
+      path: path.resolve('dist'),
+      filename: 'bundle.js',
+    },
+    module: {
+      rules: [
+        {
+          test: /\.less$/,
+          use: [
+            env.threads !== 0 && {
+              loader: path.resolve(__dirname, '../../dist/index.js'),
+              options: workerPool,
+            },
+            'less-loader',
+          ],
+          type: 'css/auto',
+        },
+      ],
+    },
+    stats: {
+      children: false,
+    },
+  };
+};

test/webpack.test.js

@@ -2,6 +2,7 @@ import webpack from 'webpack';
 
 import sassLoaderConfig from './sass-loader-example/webpack.config';
 import tsLoaderConfig from './ts-loader-example/webpack.config';
+import lessLoaderConfig from './less-loader-example/webpack.config';
 
 test("Processes sass-loader's @import correctly", (done) => {
   const config = sassLoaderConfig({});
@@ -42,3 +43,23 @@ test('Processes ts-loader correctly', (done) => {
     done();
   });
 }, 30000);
+
+test('Processes less-loader correctly', (done) => {
+  const config = lessLoaderConfig({});
+
+  webpack(config, (err, stats) => {
+    if (err) {
+      // eslint-disable-next-line no-console
+      console.error(err);
+    }
+
+    expect(err).toBe(null);
+
+    if (stats.hasErrors()) {
+      // eslint-disable-next-line no-console
+      console.error(stats.toJson().errors);
+    }
+    expect(stats.hasErrors()).toBe(false);
+    done();
+  });
+}, 30000);