fix: resolve alias

Less automatically adds a .less file extension if no extension was given. This is problematic if there is a module request like @import "~some-module"; because in this case Less will call our file manager with `~some-module.less`. Since dots in module names are highly discouraged, we can safely assume that this is an error and we need to remove the .less extension again.

This means that aliases configured in the `webpack.config.js` are now resolved correctly if the webpack resolver is used.

BREAKING CHANGE: If you've already configured your `resolve.alias` with a `.less` extension, you can now remove that wrong extension.

Author: jhnns

src/createWebpackLessPlugin.js

@@ -3,8 +3,15 @@ const loaderUtils = require('loader-utils');
 const pify = require('pify');
 
 const stringifyLoader = require.resolve('./stringifyLoader.js');
-const trailingSlash = /[\\/]$/;
+const trailingSlash = /[/\\]$/;
 const isLessCompatible = /\.(le|c)ss$/;
+// Less automatically adds a .less file extension if no extension was given.
+// This is problematic if there is a module request like @import "~some-module";
+// because in this case Less will call our file manager with `~some-module.less`.
+// Since dots in module names are highly discouraged, we can safely assume that
+// this is an error and we need to remove the .less extension again.
+// However, we must not match something like @import "~some-module/file.less";
+const matchMalformedModuleFilename = /(~[^/\\]+)\.less$/;
 
 /**
  * Creates a Less plugin that uses webpack's resolving engine that is provided by the loaderContext.
@@ -26,7 +33,8 @@ function createWebpackLessPlugin(loaderContext) {
     }
 
     loadFile(filename, currentDirectory /* , options, environment */) { // eslint-disable-line class-methods-use-this
-      const moduleRequest = loaderUtils.urlToRequest(filename);
+      const url = filename.replace(matchMalformedModuleFilename, '$1');
+      const moduleRequest = loaderUtils.urlToRequest(url);
       // Less is giving us trailing slashes, but the context should have no trailing slash
       const context = currentDirectory.replace(trailingSlash, '');
       let resolvedFilename;

test/fixtures/less/import-webpack-alias.less

@@ -0,0 +1,7 @@
+@import "~some"; // test if package.json's are correctly resolved
+
+.some-class {
+  background: hotpink;
+}
+
+@import "~aliased-some"; // should also resolve to ~some

test/fixtures/node_modules/some/package.json

@@ -4,7 +4,7 @@ const webpack = require('webpack');
 const fixturePath = path.resolve(__dirname, '..', 'fixtures');
 const outputPath = path.resolve(__dirname, '..', 'output');
 
-function compile(fixture, moduleRules) {
+function compile(fixture, moduleRules, resolveAlias = {}) {
   return new Promise((resolve, reject) => {
     const entry = path.resolve(fixturePath, 'less', `${fixture}.less`);
 
@@ -17,6 +17,9 @@ function compile(fixture, moduleRules) {
       module: {
         rules: moduleRules,
       },
+      resolve: {
+        alias: resolveAlias,
+      },
     }, (err, stats) => {
       const problem = err || stats.compilation.errors[0] || stats.compilation.warnings[0];
 

test/helpers/compile.js

@@ -15,6 +15,7 @@ const ignore = [
 ];
 const lessReplacements = [
   [/~some\//g, '../node_modules/some/'],
+  [/~(aliased-)?some"/g, '../node_modules/some/module.less"'],
 ];
 const cssReplacements = [
   [/\.\.\/node_modules\/some\//g, '~some/'],

test/helpers/createSpec.js

@@ -5,14 +5,14 @@ const { readCssFixture, readSourceMap } = require('./helpers/readFixture');
 
 const nodeModulesPath = path.resolve(__dirname, 'fixtures', 'node_modules');
 
-async function compileAndCompare(fixture, lessLoaderOptions, lessLoaderContext) {
+async function compileAndCompare(fixture, { lessLoaderOptions, lessLoaderContext, resolveAlias } = {}) {
   let inspect;
   const rules = moduleRules.basic(lessLoaderOptions, lessLoaderContext, (i) => {
     inspect = i;
   });
   const [expectedCss] = await Promise.all([
     readCssFixture(fixture),
-    compile(fixture, rules),
+    compile(fixture, rules, resolveAlias),
   ]);
   const [actualCss] = inspect.arguments;
 
@@ -31,8 +31,18 @@ test('should resolve all imports from node_modules using webpack\'s resolver', a
   await compileAndCompare('import-webpack');
 });
 
+test('should resolve aliases as configured', async () => {
+  await compileAndCompare('import-webpack-alias', {
+    resolveAlias: {
+      'aliased-some': 'some',
+    },
+  });
+});
+
 test('should resolve all imports from the given paths using Less\' resolver', async () => {
-  await compileAndCompare('import-paths', { paths: [__dirname, nodeModulesPath] });
+  await compileAndCompare('import-paths', {
+    lessLoaderOptions: { paths: [__dirname, nodeModulesPath] },
+  });
 });
 
 test('should allow to disable webpack\'s resolver by passing an empty paths array', async () => {