microsoft / microsoft/vscode-css-languageservice

scss: ctrl+click on import from node_modules not working on nested folders

Open
#316 4 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
384
Forks
217
Avg merge
3d 16h
Merged PRs (30d)
14

Description

Ctrl/cmd+Click links to node_modules on imports/use only works in .scss files located at the same level as the node_modules folder, but it doesn't work if the scss is inside a nested folder. Consider this scenario:

project
├── node_modules
│   └── @scope
│       └── lib
│           └── index.scss
│  
│  
├── here-it-works.scss   <---- at project root, when node_modules is located in the same folder
│                              as the file, Ctrl+click will work 
│              
└── folder
    └── here-it-doesnt.scss  <-- one level deeper into the folder structure, it doesn't work anymore :(
// /here-it-works.scss

@use "@scope/lib"; // Ctrl+Click here will redirect you to node_modules/@scope/lib/index.scss
// /folder/here-it-doesnt-work.scss

@use "@scope/lib"; // Ctrl+Click will try to locate a file called
                   // "lib" in /folder/@scope/lib instead of 
                   // looking into root-level node_modules

A screenrecored gif to further explain what I'm talking about (this was recorded on a clean vscode instance, without any extensions installed, by runing it with the --profile-temp flag):

vscode-scss-issue

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue with a root-level node_modules directory, a working root SCSS file, and an equivalent file one folder deeper. Start by tracing SCSS import resolution for @use and Ctrl/Cmd+Click navigation, then check the existing language-service tests if available. Done means the nested file resolves @scope/lib to node_modules/@scope/lib/index.scss.

Written by the indexing model from the issue text.

Assessment

Tech stack
scss, vscode
Domain
frontend, tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
65/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.