search

microsoft / vscode

Visual Studio Code
https://code.visualstudio.com
MIT License
162.58k stars 28.66k forks source link

[css] Custom aliases in CSS file resolution #163967

Open Mechite opened 1 year ago

Mechite commented 1 year ago

Please read from tsconfig/jsconfig to resolve SCSS modules. My suggestion to make this reliable is to simply only allow the import aliases to work inside of an aliased directory, and in every subfolder starting from the tsconfig/jsconfig as the root, so that we can theoretically open huge projects with weird build settings and have a sane default for it. The tsconfig/jsconfig essentially define majority of these weird quirks such as these path aliases for the entire IDE, and we should just stick to allowing this to continue even if it "makes no sense" to read from these files for what is "just SCSS".

If this won't be supported, we could at least make it possible to define these aliases in the .vscode settings.json and then use those paths across the IDE as the standard. No matter what though, we need these path aliases as for large projects not being able to jump to the definition of an imported module is very annoying.

Mechite commented 1 year ago

https://github.com/microsoft/vscode/issues/131954

aeschli commented 1 year ago

See my comment in https://github.com/microsoft/vscode/issues/131954#issuecomment-910119590

I'm not opposed to put aliases in the settings. If you want to work on a PR for this, I'm happy to point to to where the changes need to be made.

VSCodeTriageBot commented 1 year ago

This feature request is now a candidate for our backlog. The community has 60 days to upvote the issue. If it receives 20 upvotes we will move it to our backlog. If not, we will close it. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!

Mechite commented 1 year ago

See my comment in #131954 (comment)

I'm not opposed to put aliases in the settings. If you want to work on a PR for this, I'm happy to point to to where the changes need to be made.

I am happy to work on a PR for it however I'm not very familiar with VSCode as I've never submitted a change before. If I figure things out in my free time, I'll submit a patch and link it here for review, otherwise expect indefinite silence from me if I don't.

This could and should apply to CSS in general, with native @import and other preprocessors like less or stylus, maybe it just works in every language and this can simply just be a long mapping of aliases for paths, relative to a directory starting from the open folder containing .vscode.

VSCodeTriageBot commented 1 year ago

This feature request has not yet received the 20 community upvotes it takes to make to our backlog. 10 days to go. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!

VSCodeTriageBot commented 1 year ago

:slightly_smiling_face: This feature request received a sufficient number of community upvotes and we moved it to our backlog. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!

Mechite commented 1 year ago

Why the name change? Imports being resolved in this way should be supported for all CSS formats, not just SCSS.

aeschli commented 1 year ago

The description says: to resolve SCSS modules

avlaguta commented 1 year ago

This is still an issue. What's the status of it?

Mechite commented 1 year ago

This is still an issue. What's the status of it?

Unresolved, though in the backlog. I don't have bandwidth to contribute so based on what I know it'll probably take a few years for them to land on the issue and make the changes

SStranks commented 11 months ago

I was looking for a solution and stumbled across this extension: https://github.com/dgeibi/alias-tool

Haven't tried it as I wasn't sure if it was safe or not, but adding it here in case it perhaps contains relevant code.

SStranks commented 11 months ago

See my comment in #131954 (comment)

I'm not opposed to put aliases in the settings. If you want to work on a PR for this, I'm happy to point to to where the changes need to be made.

Could you provide this? I would like to take look.

aeschli commented 11 months ago

https://github.com/microsoft/vscode-css-languageservice/blob/0f2dfc45a53fd0d6ec9b3d1cd54a86b2eccb5ddf/src/services/cssNavigation.ts#L379 is where import paths are resolved to an actual path. This is where settings could be read as well that could allow users to provide additional folders to look into.

SStranks commented 10 months ago

https://github.com/microsoft/vscode-css-languageservice/blob/0f2dfc45a53fd0d6ec9b3d1cd54a86b2eccb5ddf/src/services/cssNavigation.ts#L379 is where import paths are resolved to an actual path. This is where settings could be read as well that could allow users to provide additional folders to look into.

Looking at the codebase I can't see how I might access the settings.json within this function - is it available on the FileSystemProvider somehow?

aeschli commented 10 months ago

You have to add a field in the LanguageSettings: https://github.com/microsoft/vscode-css-languageservice/blob/0f2dfc45a53fd0d6ec9b3d1cd54a86b2eccb5ddf/src/cssLanguageTypes.ts#L45

It will be set by the CSS language server here: https://github.com/microsoft/vscode/blob/272653c995cc06ca6f09e6da1e285d90b746e01c/extensions/css-language-features/server/src/cssServer.ts#L171 The CSS language server gets it from the language client which will read it from the settings

SStranks commented 10 months ago

I'm not opposed to put aliases in the settings. If you want to work on a PR for this, I'm happy to point to to where the changes need to be made.

I've made two pull requests for this issue: PR #197033: This one adds settings (and tool tip descriptions) in package.json/package.nls.json, within vscode/extensions/css-language-features. PR #368: This one adds the functionality in cssNavigation, within vscode-css-languageservice.

Notes: The code makes use of documentContext (line 414; cssNavigation) to get the root folder; consequently if the project folder isn't a root folder of the workspace the reference path will fail. There was discussion about tsconfig in this thread, so one possibility could be to make a simple function to recursively go up from the css file until a package.json, or tsconfig, is found and treat that level as the root.

It will be set by the CSS language server here:

https://github.com/microsoft/vscode/blob/272653c995cc06ca6f09e6da1e285d90b746e01c/extensions/css-language-features/server/src/cssServer.ts#L171

The CSS language server gets it from the language client which will read it from the settings

Due to the code above, of settings getting bound to the respective language service, there is duplication of the alias settings with one for css and one for scss.

It's my first pull request/contribution - any feedback welcome!