Merge pull request #171 from webpack-contrib/fix/resolve-alias

Fix/resolve alias

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 () => {