search

microsoft / vscode-css-languageservice

CSS, LESS & SCSS language service extracted from VSCode to be reused, e.g in the Monaco editor.
MIT License
312 stars 176 forks source link

feat: add support for Sass `pkg:` importers #384

Closed wkillerud closed 2 months ago

wkillerud commented 6 months ago

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.

https://github.com/microsoft/vscode-css-languageservice/assets/1223410/37020935-38a8-4706-9c36-b07a34e7f166

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.

aeschli commented 2 months ago

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