feat: add support for Sass pkg import navigation

microsoft · aeschli · Jun 24, 2024 · Feb 16, 2024 · Feb 16, 2024 · Feb 28, 2024
commit 476e97b1b6d03983e6302331ab597a1bed5f0cd2
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 lib/
 node_modules/
+!src/test/scss/linkFixture/pkgImport/node_modules/
 coverage/
 .nyc_output/
 npm-debug.log
diff --git a/src/services/cssNavigation.ts b/src/services/cssNavigation.ts
@@ -392,6 +392,92 @@ export class CSSNavigation {
 			return this.mapReference(await this.resolveModuleReference(target, documentUri, documentContext), isRawLink);
 		}
 
+		// Following the [sass package importer](https://github.com/sass/sass/blob/f6832f974c61e35c42ff08b3640ff155071a02dd/js-api-doc/importer.d.ts#L349),
+		// look for the `exports` field of the module and any `sass`, `style` or `default` that matches the import.
+		// If it's only `pkg:module`, also look for `sass` and `style` on the root of package.json.
+		if (target.startsWith('pkg:')) {
+			const bareTarget = target.replace('pkg:', '');
+			const moduleName = bareTarget.includes('/') ? getModuleNameFromPath(bareTarget) : bareTarget;
+			const rootFolderUri = documentContext.resolveReference('/', documentUri);
+			const documentFolderUri = dirname(documentUri);
+			const modulePath = await this.resolvePathToModule(moduleName, documentFolderUri, rootFolderUri);
+			if (modulePath) {
+				const packageJsonPath = `${modulePath}/package.json`;
+				if (packageJsonPath) {
+					// Since submodule exports import strings don't match the file system,
+					// we need the contents of `package.json` to look up the correct path.
+					let packageJsonContent = await this.getContent(packageJsonPath);
+					if (packageJsonContent) {
+						const packageJson: {
+							style?: string;
+							sass?: string;
+							exports: Record<string, string | Record<string, string>>
+						} = JSON.parse(packageJsonContent);
+
+						const subpath = bareTarget.substring(moduleName.length + 1);
+						if (packageJson.exports) {
+							if (!subpath) {
+								// look for the default/index export
+								// @ts-expect-error If ['.'] is a string this just produces undefined
+								const entry = packageJson.exports['.']['sass'] || packageJson.exports['.']['style'] || packageJson.exports['.']['default'];
+								// the 'default' entry can be whatever, typically .js – confirm it looks like `scss`
+								if (entry && entry.endsWith('.scss')) {
+									const entryPath = joinPath(modulePath, entry);
+									return entryPath;
+								}
+							} else {
+								// The import string may be with or without .scss.
+								// Likewise the exports entry. Look up both paths.
+								// However, they need to be relative (start with ./).
+								const lookupSubpath = subpath.endsWith('.scss') ? `./${subpath.replace('.scss', '')}` : `./${subpath}`;
+								const lookupSubpathScss = subpath.endsWith('.scss') ? `./${subpath}` : `./${subpath}.scss`;
+								const subpathObject = packageJson.exports[lookupSubpathScss] || packageJson.exports[lookupSubpath];
+								if (subpathObject) {
+									// @ts-expect-error If subpathObject is a string this just produces undefined
+									const entry = subpathObject['sass'] || subpathObject['styles'] || subpathObject['default'];
+									// the 'default' entry can be whatever, typically .js – confirm it looks like `scss`
+									if (entry && entry.endsWith('.scss')) {
+										const entryPath = joinPath(modulePath, entry);
+										return entryPath;
+									}
+								} else {
+									// We have a subpath, but found no matches on direct lookup.
+									// It may be a [subpath pattern](https://nodejs.org/api/packages.html#subpath-patterns).
+									for (const [maybePattern, subpathObject] of Object.entries(packageJson.exports)) {
+										if (!maybePattern.includes("*")) {
+											continue;
+										}
+										// Patterns may also be without `.scss` on the left side, so compare without on both sides
+										const re = new RegExp(maybePattern.replace('./', '\\.\/').replace('.scss', '').replace('*', '(.+)'));
+										const match = re.exec(lookupSubpath);
+										if (match) {
+											// @ts-expect-error If subpathObject is a string this just produces undefined
+											const entry = subpathObject['sass'] || subpathObject['styles'] || subpathObject['default'];
+											// the 'default' entry can be whatever, typically .js – confirm it looks like `scss`
+											if (entry && entry.endsWith('.scss')) {
+												// The right-hand side of a subpath pattern is also a pattern.
+												// Replace the pattern with the match from our regexp capture group above.
+												const expandedPattern = entry.replace('*', match[1]);
+												const entryPath = joinPath(modulePath, expandedPattern);
+												return entryPath;
+											}
+										}
+									}
+								}
+							}
+						} else if (!subpath && (packageJson.sass || packageJson.style)) {
+							// Fall back to a direct lookup on `sass` and `style` on package root
+							const entry = packageJson.sass || packageJson.style;
+							if (entry) {
+								const entryPath = joinPath(modulePath, entry);
+								return entryPath;
+							}
+						}
+					}
+				}
+			}
+		}
+
 		const ref = await this.mapReference(documentContext.resolveReference(target, documentUri), isRawLink);
 
 		// Following [less-loader](https://github.com/webpack-contrib/less-loader#imports)

diff --git a/src/test/scss/scssNavigation.test.ts b/src/test/scss/scssNavigation.test.ts
@@ -32,7 +32,7 @@ async function assertDynamicLinks(docUri: string, input: string, expected: Docum
 	const ls = getSCSSLS();
 	if (settings) {
 		ls.configure(settings);
-	} 
+	}
 	const document = TextDocument.create(docUri, 'scss', 0, input);
 
 	const stylesheet = ls.parseStylesheet(document);
@@ -283,6 +283,51 @@ suite('SCSS - Navigation', () => {
 			);
 		});
 
+		test('SCSS node package resolving', async () => {
+			let ls = getSCSSLS();
+			let testUri = getTestResource('about.scss');
+			let workspaceFolder = getTestResource('');
+			await assertLinks(ls, `@use "pkg:bar"`,
+				[{ range: newRange(5, 14), target: getTestResource('node_modules/bar/styles/index.scss')}], 'scss', testUri, workspaceFolder
+			);
+			await assertLinks(ls, `@use "pkg:bar/colors"`,
+				[{ range: newRange(5, 21), target: getTestResource('node_modules/bar/styles/colors.scss')}], 'scss', testUri, workspaceFolder
+			);
+			await assertLinks(ls, `@use "pkg:bar/colors.scss"`,
+				[{ range: newRange(5, 26), target: getTestResource('node_modules/bar/styles/colors.scss')}], 'scss', testUri, workspaceFolder
+			);
+			await assertLinks(ls, `@use "pkg:@foo/baz"`,
+				[{ range: newRange(5, 19), target: getTestResource('node_modules/@foo/baz/styles/index.scss')}], 'scss', testUri, workspaceFolder
+			);
+			await assertLinks(ls, `@use "pkg:@foo/baz/colors"`,
+				[{ range: newRange(5, 26), target: getTestResource('node_modules/@foo/baz/styles/colors.scss')}], 'scss', testUri, workspaceFolder
+			);
+			await assertLinks(ls, `@use "pkg:@foo/baz/colors.scss"`,
+				[{ range: newRange(5, 31), target: getTestResource('node_modules/@foo/baz/styles/colors.scss')}], 'scss', testUri, workspaceFolder
+			);
+			await assertLinks(ls, `@use "pkg:@foo/baz/button"`,
+				[{ range: newRange(5, 26), target: getTestResource('node_modules/@foo/baz/styles/button.scss')}], 'scss', testUri, workspaceFolder
+			);
+			await assertLinks(ls, `@use "pkg:@foo/baz/button.scss"`,
+				[{ range: newRange(5, 31), target: getTestResource('node_modules/@foo/baz/styles/button.scss')}], 'scss', testUri, workspaceFolder
+			);
+			await assertLinks(ls, `@use "pkg:root-sass"`,
+				[{ range: newRange(5, 20), target: getTestResource('node_modules/root-sass/styles/index.scss')}], 'scss', testUri, workspaceFolder
+			);
+			await assertLinks(ls, `@use "pkg:root-style"`,
+				[{ range: newRange(5, 21), target: getTestResource('node_modules/root-style/styles/index.scss')}], 'scss', testUri, workspaceFolder
+			);
+			await assertLinks(ls, `@use "pkg:bar-pattern/anything"`,
+				[{ range: newRange(5, 31), target: getTestResource('node_modules/bar-pattern/styles/anything.scss')}], 'scss', testUri, workspaceFolder
+			);
+			await assertLinks(ls, `@use "pkg:bar-pattern/anything.scss"`,
+				[{ range: newRange(5, 36), target: getTestResource('node_modules/bar-pattern/styles/anything.scss')}], 'scss', testUri, workspaceFolder
+			);
+			await assertLinks(ls, `@use "pkg:bar-pattern/theme/dark.scss"`,
+				[{ range: newRange(5, 38), target: getTestResource('node_modules/bar-pattern/styles/theme/dark.scss')}], 'scss', testUri, workspaceFolder
+			);
+		});
+
 	});
 
 	suite('Symbols', () => {

diff --git a/src/test/testUtil/fsProvider.ts b/src/test/testUtil/fsProvider.ts
@@ -5,7 +5,7 @@
 
 import { FileSystemProvider, FileType } from "../../cssLanguageTypes";
 import { URI } from 'vscode-uri';
-import { stat as fsStat, readdir } from 'fs';
+import { stat as fsStat, readdir, readFile } from 'fs';
 
 export function getFsProvider(): FileSystemProvider {
 	return {
@@ -72,6 +72,21 @@ export function getFsProvider(): FileSystemProvider {
 					}));
 				});
 			});
+		},
+		getContent(locationString, encoding = "utf-8") {
+			return new Promise((c, e) => {
+				const location = URI.parse(locationString);
+				if (location.scheme !== 'file') {
+					e(new Error('Protocol not supported: ' + location.scheme));
+					return;
+				}
+				readFile(location.fsPath, encoding, (err, data) => {
+					if (err) {
+						return e(err);
+					}
+					c(data);
+				});
+			});
 		}
 	};
 }
diff --git a/test/linksTestFixtures/node_modules/@foo/baz/package.json b/test/linksTestFixtures/node_modules/@foo/baz/package.json
diff --git a/test/linksTestFixtures/node_modules/bar-pattern/package.json b/test/linksTestFixtures/node_modules/bar-pattern/package.json
diff --git a/test/linksTestFixtures/node_modules/bar/package.json b/test/linksTestFixtures/node_modules/bar/package.json
diff --git a/test/linksTestFixtures/node_modules/root-sass/package.json b/test/linksTestFixtures/node_modules/root-sass/package.json
diff --git a/test/linksTestFixtures/node_modules/root-style/package.json b/test/linksTestFixtures/node_modules/root-style/package.json