feat: support condition names from package.json (#369)

package.json

@@ -47,24 +47,24 @@
     "schema-utils": "^2.7.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.10.3",
-    "@babel/core": "^7.10.3",
-    "@babel/preset-env": "^7.10.3",
+    "@babel/cli": "^7.10.4",
+    "@babel/core": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
     "@commitlint/cli": "^9.0.1",
     "@commitlint/config-conventional": "^9.0.1",
     "@webpack-contrib/defaults": "^6.3.0",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
-    "babel-jest": "^26.0.1",
+    "babel-jest": "^26.1.0",
     "cross-env": "^7.0.2",
     "del": "^5.1.0",
     "del-cli": "^3.0.1",
-    "eslint": "^7.3.0",
+    "eslint": "^7.3.1",
     "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.21.2",
+    "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-prettier": "^3.1.4",
     "husky": "^4.2.5",
     "inspect-loader": "^1.0.0",
-    "jest": "^26.0.1",
+    "jest": "^26.1.0",
     "lint-staged": "^10.2.11",
     "memfs": "^3.2.0",
     "npm-run-all": "^4.1.5",

src/utils.js

@@ -11,7 +11,7 @@ const trailingSlash = /[/\\]$/;
 // 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.
-const isModuleName = /^~([^/]+|[^/]+\/|@[^/]+[/][^/]+|@[^/]+\/?|@[^/]+[/][^/]+\/)$/;
+const isModuleImport = /^~([^/]+|[^/]+\/|@[^/]+[/][^/]+|@[^/]+\/?|@[^/]+[/][^/]+\/)$/;
 
 // `[drive_letter]:\` + `\\[server]\[sharename]\`
 const isNativeWin32Path = /^[a-zA-Z]:[/\\]|^\\\\/i;
@@ -24,6 +24,7 @@ const isNativeWin32Path = /^[a-zA-Z]:[/\\]|^\\\\/i;
  */
 function createWebpackLessPlugin(loaderContext) {
   const resolve = loaderContext.getResolve({
+    conditionNames: ['less', 'style'],
     mainFields: ['less', 'style', 'main', '...'],
     mainFiles: ['index', '...'],
     extensions: ['.less', '.css'],
@@ -51,26 +52,17 @@ function createWebpackLessPlugin(loaderContext) {
       return false;
     }
 
-    getUrl(filename, options) {
-      if (options.ext && !isModuleName.test(filename)) {
-        return this.tryAppendExtension(filename, options.ext);
-      }
-
-      return filename;
-    }
-
-    async resolveFilename(filename, currentDirectory, options) {
-      const url = this.getUrl(filename, options);
+    async resolveFilename(filename, currentDirectory) {
+      // Less is giving us trailing slashes, but the context should have no trailing slash
+      const context = currentDirectory.replace(trailingSlash, '');
 
       const request = urlToRequest(
-        url,
-        url.charAt(0) === '/' ? loaderContext.rootContext : null
+        filename,
+        // eslint-disable-next-line no-undefined
+        filename.charAt(0) === '/' ? loaderContext.rootContext : undefined
       );
 
-      // Less is giving us trailing slashes, but the context should have no trailing slash
-      const context = currentDirectory.replace(trailingSlash, '');
-
-      return this.resolveRequests(context, [request, url]);
+      return this.resolveRequests(context, [...new Set([request, filename])]);
     }
 
     resolveRequests(context, possibleRequests) {
@@ -97,7 +89,7 @@ function createWebpackLessPlugin(loaderContext) {
       let result;
 
       try {
-        if (isModuleName.test(filename)) {
+        if (isModuleImport.test(filename)) {
           const error = new Error();
 
           error.type = 'Next';

test/__snapshots__/loader.test.js.snap

@@ -246,6 +246,60 @@ Array [
 
 exports[`loader should provide a useful error message if there was a syntax error: warnings 1`] = `Array []`;
 
+exports[`loader should resolve "@import" with "css" extension: css 1`] = `
+"@import \\"css.css\\";
+"
+`;
+
+exports[`loader should resolve "@import" with "css" extension: errors 1`] = `Array []`;
+
+exports[`loader should resolve "@import" with "css" extension: warnings 1`] = `Array []`;
+
+exports[`loader should resolve "@import" with "less" extension: css 1`] = `
+".box {
+  color: #fe33ac;
+  border-color: #fdcdea;
+  background: url(box.png);
+}
+.box div {
+  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+}
+"
+`;
+
+exports[`loader should resolve "@import" with "less" extension: errors 1`] = `Array []`;
+
+exports[`loader should resolve "@import" with "less" extension: warnings 1`] = `Array []`;
+
+exports[`loader should resolve "@import" with "php" extension: css 1`] = `
+"a {
+  color: red;
+}
+"
+`;
+
+exports[`loader should resolve "@import" with "php" extension: errors 1`] = `Array []`;
+
+exports[`loader should resolve "@import" with "php" extension: warnings 1`] = `Array []`;
+
+exports[`loader should resolve "@import" without "less" extension: css 1`] = `
+".box {
+  color: #fe33ac;
+  border-color: #fdcdea;
+  background: url(box.png);
+}
+.box div {
+  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+}
+"
+`;
+
+exports[`loader should resolve "@import" without "less" extension: errors 1`] = `Array []`;
+
+exports[`loader should resolve "@import" without "less" extension: warnings 1`] = `Array []`;
+
 exports[`loader should resolve absolute path with alias: css 1`] = `
 ".box {
   color: #fe33ac;
@@ -408,6 +462,17 @@ exports[`loader should resolve non-less import with alias: errors 1`] = `Array [
 
 exports[`loader should resolve non-less import with alias: warnings 1`] = `Array []`;
 
+exports[`loader should resolve the "less" field from the "exports" field from "package.json": css 1`] = `
+".load-me {
+  color: red;
+}
+"
+`;
+
+exports[`loader should resolve the "less" field from the "exports" field from "package.json": errors 1`] = `Array []`;
+
+exports[`loader should resolve the "less" field from the "exports" field from "package.json": warnings 1`] = `Array []`;
+
 exports[`loader should resolve unresolved url with alias: css 1`] = `
 ".box {
   color: #fe33ac;

test/fixtures/foo.php

@@ -0,0 +1,3 @@
+a {
+  color: red;
+}

test/fixtures/import-package-with-exports.less

@@ -0,0 +1 @@
+@import 'package-with-exports';

test/fixtures/import-with-css-extension.less

@@ -0,0 +1 @@
+@import "css.css";

test/fixtures/import-with-extension.less

@@ -0,0 +1 @@
+@import "basic.less";

test/fixtures/import-with-php-extension.less

@@ -0,0 +1 @@
+@import "foo.php";

test/fixtures/import-without-extension.less

@@ -0,0 +1 @@
+@import "basic";

test/helpers/getCodeFromLess.js

@@ -78,6 +78,14 @@ const pathMap = {
     'folder',
     'some.file'
   ),
+  'package-with-exports': path.resolve(
+    __dirname,
+    '..',
+    'fixtures',
+    'node_modules',
+    'package-with-exports',
+    'style.less'
+  ),
 };
 
 class ResolvePlugin extends less.FileManager {

test/loader.test.js

@@ -675,4 +675,69 @@ describe('loader', () => {
     expect(getWarnings(stats)).toMatchSnapshot('warnings');
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
+
+  it('should resolve the "less" field from the "exports" field from "package.json"', async () => {
+    const testId = './import-package-with-exports.less';
+    const compiler = getCompiler(testId);
+    const stats = await compile(compiler);
+    const codeFromBundle = getCodeFromBundle(stats, compiler);
+    const codeFromLess = await getCodeFromLess(testId);
+
+    expect(codeFromBundle.css).toBe(codeFromLess.css);
+    expect(codeFromBundle.css).toMatchSnapshot('css');
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
+
+  it('should resolve "@import" without "less" extension', async () => {
+    const testId = './import-without-extension.less';
+    const compiler = getCompiler(testId);
+    const stats = await compile(compiler);
+    const codeFromBundle = getCodeFromBundle(stats, compiler);
+    const codeFromLess = await getCodeFromLess(testId);
+
+    expect(codeFromBundle.css).toBe(codeFromLess.css);
+    expect(codeFromBundle.css).toMatchSnapshot('css');
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
+
+  it('should resolve "@import" with "less" extension', async () => {
+    const testId = './import-without-extension.less';
+    const compiler = getCompiler(testId);
+    const stats = await compile(compiler);
+    const codeFromBundle = getCodeFromBundle(stats, compiler);
+    const codeFromLess = await getCodeFromLess(testId);
+
+    expect(codeFromBundle.css).toBe(codeFromLess.css);
+    expect(codeFromBundle.css).toMatchSnapshot('css');
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
+
+  it('should resolve "@import" with "css" extension', async () => {
+    const testId = './import-with-css-extension.less';
+    const compiler = getCompiler(testId);
+    const stats = await compile(compiler);
+    const codeFromBundle = getCodeFromBundle(stats, compiler);
+    const codeFromLess = await getCodeFromLess(testId);
+
+    expect(codeFromBundle.css).toBe(codeFromLess.css);
+    expect(codeFromBundle.css).toMatchSnapshot('css');
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
+
+  it('should resolve "@import" with "php" extension', async () => {
+    const testId = './import-with-php-extension.less';
+    const compiler = getCompiler(testId);
+    const stats = await compile(compiler);
+    const codeFromBundle = getCodeFromBundle(stats, compiler);
+    const codeFromLess = await getCodeFromLess(testId);
+
+    expect(codeFromBundle.css).toBe(codeFromLess.css);
+    expect(codeFromBundle.css).toMatchSnapshot('css');
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
 });