Fix relative less file resolved as npm package in production

preactjs · Aug 30, 2021 · cbc98be · cbc98be
1 parent 19b3e7b
commit cbc98be
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 4 deletions.
diff --git a/.changeset/wicked-flies-report.md b/.changeset/wicked-flies-report.md
@@ -0,0 +1,5 @@
+---
+'wmr': patch
+---
+
+Fix nested relative `.less` file resolved as npm package in production
diff --git a/packages/wmr/src/plugins/less-plugin.js b/packages/wmr/src/plugins/less-plugin.js
@@ -1,6 +1,7 @@
 import path from 'path';
 import { createCodeFrame } from 'simple-code-frame';
 import { resolveAlias } from '../lib/aliasing.js';
+import { isFile } from '../lib/fs-utils.js';
 
 /** @type {import('less') | undefined} */
 let less;
@@ -17,11 +18,17 @@ const lessFileLoader = (resolve, root) =>
 						currentDirectory = path.join(root, currentDirectory);
 					}
 
-					// Supply fake importer for relative resolution
-					const importer = path.join(currentDirectory, 'fake.less');
-					const resolved = await resolve(file, importer, { skipSelf: true });
+					let resolvedId;
+					const maybeRelative = path.join(currentDirectory, file);
+					if (await isFile(maybeRelative)) {
+						resolvedId = maybeRelative;
+					} else {
+						// Supply fake importer for relative resolution
+						const importer = path.join(currentDirectory, 'fake.less');
+						const resolved = await resolve(file, importer, { skipSelf: true });
 
-					let resolvedId = resolved ? resolved.id : file;
+						resolvedId = resolved ? resolved.id : file;
+					}
 
 					// Support bare imports: `@import "bar"`
 					if (!path.isAbsolute(resolvedId)) {

diff --git a/packages/wmr/test/fixtures/css-less-nested-relative/foo.less b/packages/wmr/test/fixtures/css-less-nested-relative/foo.less
@@ -0,0 +1 @@
+@color: red;
diff --git a/packages/wmr/test/fixtures/css-less-nested-relative/index.html b/packages/wmr/test/fixtures/css-less-nested-relative/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title>Less</title>
+		<link rel="stylesheet" href="style.less" />
+	</head>
+	<body>
+		<h1>Less</h1>
+		<script type="module" src="index.js"></script>
+	</body>
+</html>
diff --git a/packages/wmr/test/fixtures/css-less-nested-relative/index.js b/packages/wmr/test/fixtures/css-less-nested-relative/index.js
diff --git a/packages/wmr/test/fixtures/css-less-nested-relative/style.less b/packages/wmr/test/fixtures/css-less-nested-relative/style.less
@@ -0,0 +1,5 @@
+@import 'foo';
+
+h1 {
+	color: @color;
+}
diff --git a/packages/wmr/test/less.test.js b/packages/wmr/test/less.test.js
@@ -224,5 +224,24 @@ describe('Less', () => {
 
 			expect(hash === newHash).toBeFalsy();
 		});
+
+		it('should correctly resolve nested relative files', async () => {
+			await loadFixture('css-less-nested-relative', env);
+			instance = await runWmr(env.tmp.path, 'build');
+
+			await withLog(instance.output, async () => {
+				const code = await instance.done;
+				expect(code).toEqual(0);
+
+				const dir = await fs.readdir(path.join(env.tmp.path, 'dist', 'assets'));
+				expect(dir.some(x => x.endsWith('.css'))).toBeTruthy();
+				const { address, stop } = serveStatic(path.join(env.tmp.path, 'dist'));
+				cleanup.push(stop);
+				await env.page.goto(address, {
+					waitUntil: ['networkidle0', 'load']
+				});
+				expect(await env.page.$eval('h1', el => getComputedStyle(el).color)).toBe('rgb(255, 0, 0)');
+			});
+		});
 	});
 });