diff --git a/src/createWebpackLessPlugin.js b/src/createWebpackLessPlugin.js index 56f919f4..643d8b58 100644 --- a/src/createWebpackLessPlugin.js +++ b/src/createWebpackLessPlugin.js @@ -10,14 +10,6 @@ const stringifyLoader = require.resolve('./stringifyLoader.js'); 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$/; - // This somewhat changed in Less 3.x. Now the file name comes without the // automatically added extension whereas the extension is passed in as `options.ext`. // So, if the file name matches this regexp, we simply ignore the proposed extension. @@ -43,7 +35,11 @@ function createWebpackLessPlugin(loaderContext) { }); class WebpackFileManager extends less.FileManager { - supports() { + supports(filename) { + if (this.isPathAbsolute(filename)) { + return false; + } + // Our WebpackFileManager handles all the files return true; } @@ -58,15 +54,11 @@ function createWebpackLessPlugin(loaderContext) { } getUrl(filename, options) { - if (less.version[0] >= 3) { - if (options.ext && !isModuleName.test(filename)) { - return this.tryAppendExtension(filename, options.ext); - } - - return filename; + if (options.ext && !isModuleName.test(filename)) { + return this.tryAppendExtension(filename, options.ext); } - return filename.replace(matchMalformedModuleFilename, '$1'); + return filename; } async loadFile(filename, currentDirectory, options) { @@ -109,7 +101,7 @@ function createWebpackLessPlugin(loaderContext) { install(lessInstance, pluginManager) { pluginManager.addFileManager(new WebpackFileManager()); }, - minVersion: [2, 1, 1], + minVersion: [3, 0, 0], }; } diff --git a/test/fixtures/less/import-keyword-url.less b/test/fixtures/less/import-keyword-url.less new file mode 100644 index 00000000..e861538b --- /dev/null +++ b/test/fixtures/less/import-keyword-url.less @@ -0,0 +1,7 @@ +@import (inline) url("https://fonts.googleapis.com/css?family=Roboto:300"); +@import (less) url("https://fonts.googleapis.com/css?family=Roboto:400"); +@import (once) url("https://fonts.googleapis.com/css?family=Roboto:500"); +@import (multiple) url("https://fonts.googleapis.com/css?family=Roboto:700"); + +// This url not allowed (should be ignored) +@import (optional) url("https://fonts.googleapis.com/css?family=Roboto:600"); diff --git a/test/index.test.js b/test/index.test.js index 2c68176a..d2b0d455 100644 --- a/test/index.test.js +++ b/test/index.test.js @@ -206,6 +206,10 @@ test('should not try to resolve CSS imports with URLs', async () => { await compileAndCompare('import-url'); }); +test('should delegate resolving (LESS) imports with URLs to "less" package', async () => { + await compileAndCompare('import-keyword-url'); +}); + test('should allow to import non-less files', async () => { let inspect; const rules = moduleRules.nonLessImport((i) => {