Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add support for Sass pkg: importers #384

Merged
merged 5 commits into from
Jun 24, 2024

Conversation

wkillerud
Copy link
Contributor

@wkillerud wkillerud commented Feb 16, 2024

Fixes #383

Hello 👋 I'm opening a PR with a suggested solution for #383

As mentioned in the issue, Sass released a new syntax for import strings, which I imagine trips up a lot of tools. I find the documentation for NodePackageImporter has the most readable explanation of the different supported scenarios. Also relevant here is the Node documentation on subpath patterns.

It's a big chunk with many different code paths, I'll admit. I've tried documenting at a reasonable level, and added tests that should cover a lot of scenarios. That said, I understand if you're hesitant to add yet more module resolution logic here.

I've tested locally with npm link in a running extension using these test fixtures, and the resolution provides correct links for me. Recording of that below.

CleanShot.2024-02-16.at.21.51.49.mp4

Considered alternatives

Sass's JavaScript API includes the aforementioned NodePackageImporter. Its implementation seems to have a function canonicalize, which looked promising as a method of looking up an import string. Unfortunately it's not part of the public API.

The result from sass.compile includes all the loaded URLs, so I'm sure you could hack something together there (pass in a string that only @uses the pkg:module import in question). It would require bundling sass though, which is also technically possible now.

Matches the RequestService passed in from the language server
extension.
@@ -284,6 +284,7 @@ export interface FileStat {
export interface FileSystemProvider {
stat(uri: DocumentUri): Promise<FileStat>;
readDirectory?(uri: DocumentUri): Promise<[string, FileType][]>;
getContent?(uri: DocumentUri, encoding?: BufferEncoding): Promise<string>;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Matches the RequestService on the language server side

// 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:', '');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can this be extracted in a method ?

try {
return await this.fileSystemProvider.getContent(uri);
} catch (err) {
console.error(err);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should not print to console

@aeschli aeschli added this to the June 2024 milestone Jun 24, 2024
@aeschli
Copy link
Contributor

aeschli commented Jun 24, 2024

Thanks @wkillerud. I made some improvements and moved the code to scssNavigation.

@aeschli aeschli marked this pull request as draft June 24, 2024 09:07
@aeschli aeschli self-assigned this Jun 24, 2024
@aeschli aeschli marked this pull request as ready for review June 24, 2024 09:08
@aeschli aeschli merged commit 18455b4 into microsoft:main Jun 24, 2024
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support Sass Node package importer
4 participants