Support go-to-definition on tsconfig mapped paths for non-source files

Suggestion

The recent change in TypeScript 4.3 to bring go-to-definition support on non-JavaScript file paths is fantastic! I’d love to see this functionality extended to mapped paths defined in tsconfig.json.

🔍 Search Terms

• go-to-definition (and “go to definition”)
• paths
• tsconfig

✅ Viability Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

⭐ Suggestion

📃 Motivating Example

As of TypeScript 4.3,

import foo from "../styles/foo.css";

works well when using go-to-definition. This suggestion would make

import bar from "+styles/foo.css";

work just as well, opening up the underlying mapped file.

💻 Use Cases

This would be useful anywhere someone is using mapped paths in their tsconfig.json to shorten relative imports to commonly used directories (like a “styles” directory).

—

Here’s an example of how I imagine this working:

ts-gotodefs-example
├── package.json
├── src
│   ├── css.d.ts
│   └── index.ts
├── styles
│   └── foo.css
├── tsconfig.json

src/index.ts

// go-to-definition works, foo.css opens as of TS 4.3
import foo from "../styles/foo.css";
// this should also open foo.css but as of TS 4.3 it does not
import bar from "+styles/foo.css";

src/css.d.ts

declare module "*.css" {
    const classes: { [key: string]: string };
    export default classes;
}

tsconfig.json

{
    "compilerOptions": {
        "rootDir": "src",
        "outDir": "lib",
        "paths": {
            "+styles/*": ["./styles/*"]
        }
    }
}

Commencez par l’exemple dans src/index.ts et le mappage paths de son tsconfig.json, en utilisant la déclaration css.d.ts et la cible styles/foo.css pour reproduire le comportement actuel. C’est terminé lorsque go-to-definition résout +styles/foo.css vers le fichier mappé, comme il le fait pour ../styles/foo.css.