Add support for TypeScript config paths

Author: thecrypticace

packages/tailwindcss-language-server/package.json

@@ -81,6 +81,8 @@
     "rimraf": "3.0.2",
     "stack-trace": "0.0.10",
     "tailwindcss": "3.4.4",
+    "tsconfck": "^3.1.4",
+    "tsconfig-paths": "^4.2.0",
     "typescript": "5.3.3",
     "vite-tsconfig-paths": "^4.3.1",
     "vitest": "^1.4.0",

packages/tailwindcss-language-server/src/project-locator.test.ts

@@ -18,7 +18,7 @@ function testFixture(fixture: string, details: any[]) {
   let fixturePath = `${fixtures}/${fixture}`
 
   test.concurrent(fixture, async ({ expect }) => {
-    let resolver = await createResolver({ root: fixturePath })
+    let resolver = await createResolver({ root: fixturePath, tsconfig: true })
     let locator = new ProjectLocator(fixturePath, settings, resolver)
     let projects = await locator.search()
 
@@ -205,3 +205,18 @@ testFixture('v4/missing-files', [
     content: ['{URL}/package.json'],
   },
 ])
+
+testFixture('v4/path-mappings', [
+  //
+  {
+    config: 'app.css',
+    content: [
+      '{URL}/package.json',
+      '{URL}/src/**/*.{py,tpl,js,vue,php,mjs,cts,jsx,tsx,rhtml,slim,handlebars,twig,rs,njk,svelte,liquid,pug,md,ts,heex,mts,astro,nunjucks,rb,eex,haml,cjs,html,hbs,jade,aspx,razor,erb,mustache,mdx}',
+      '{URL}/src/a/my-config.ts',
+      '{URL}/src/a/my-plugin.ts',
+      '{URL}/src/b/file.ts',
+      '{URL}/tsconfig.json',
+    ],
+  },
+])

packages/tailwindcss-language-server/src/projects.ts

@@ -226,6 +226,7 @@ export async function createProjectService(
       async readDirectory(document, directory) {
         try {
           let baseDir = path.dirname(getFileFsPath(document.uri))
+          directory = await resolver.substituteId(`${directory}/`, baseDir)
           directory = path.resolve(baseDir, directory)
 
           let dirents = await fs.promises.readdir(directory, { withFileTypes: true })
@@ -1128,6 +1129,8 @@ export async function createProjectService(
       let baseDir = path.dirname(documentPath)
 
       async function resolveTarget(linkPath: string) {
+        linkPath = (await resolver.substituteId(linkPath, baseDir)) ?? linkPath
+
         return URI.file(path.resolve(baseDir, linkPath)).toString()
       }
 

packages/tailwindcss-language-server/src/resolver/index.ts

@@ -7,6 +7,7 @@ import {
   FileSystem,
 } from 'enhanced-resolve'
 import { loadPnPApi, type PnpApi } from './pnp'
+import { loadTsConfig, type TSConfigApi } from './tsconfig'
 
 export interface ResolverOptions {
   /**
@@ -23,6 +24,15 @@ export interface ResolverOptions {
    */
   pnp?: boolean | PnpApi
 
+  /**
+   * Whether or not the resolver should load tsconfig path mappings.
+   *
+   * If `true`, the resolver will look for all `tsconfig` files in the project
+   * and use them to resolve module paths where possible. However, if an API is
+   * provided, the resolver will use that API to resolve module paths.
+   */
+  tsconfig?: boolean | TSConfigApi
+
   /**
    * A filesystem to use for resolution. If not provided, the resolver will
    * create one and use it internally for itself and any child resolvers that
@@ -61,6 +71,23 @@ export interface Resolver {
    */
   resolveCssId(id: string, base: string): Promise<string>
 
+  /**
+   * Resolves a module to a possible file or directory path.
+   *
+   * This provides reasonable results when TypeScript config files are in use.
+   * This file may not exist but is the likely path that would be used to load
+   * the module if it were to exist.
+   *
+   * @param id The module, file, or directory to resolve
+   * @param base The base directory to resolve the module from
+   */
+  substituteId(id: string, base: string): Promise<string>
+
+  /**
+   * Return a list of path resolution aliases for the given base directory
+   */
+  aliases(base: string): Promise<Record<string, string[]>>
+
   /**
    * Create a child resolver with the given options.
    *
@@ -83,6 +110,22 @@ export async function createResolver(opts: ResolverOptions): Promise<Resolver> {
     pnpApi = await loadPnPApi(opts.root)
   }
 
+  let tsconfig: TSConfigApi | null = null
+
+  // Load TSConfig path mappings
+  if (typeof opts.tsconfig === 'object') {
+    tsconfig = opts.tsconfig
+  } else if (opts.tsconfig) {
+    try {
+      tsconfig = await loadTsConfig(opts.root)
+    } catch (err) {
+      // We don't want to hard crash in case of an error handling tsconfigs
+      // It does affect what projects we can resolve or how we load files
+      // but the LSP shouldn't become unusable because of it.
+      console.error('Failed to load tsconfig', err)
+    }
+  }
+
   let esmResolver = ResolverFactory.createResolver({
     fileSystem,
     extensions: ['.mjs', '.js'],
@@ -128,6 +171,11 @@ export async function createResolver(opts: ResolverOptions): Promise<Resolver> {
       if (base.startsWith('//')) base = `\\\\${base.slice(2)}`
     }
 
+    if (tsconfig) {
+      let match = await tsconfig.resolveId(id, base)
+      if (match) id = match
+    }
+
     return new Promise((resolve, reject) => {
       resolver.resolve({}, base, id, {}, (err, res) => {
         if (err) {
@@ -151,14 +199,29 @@ export async function createResolver(opts: ResolverOptions): Promise<Resolver> {
     return (await resolveId(cssResolver, id, base)) || id
   }
 
+  // Takes a path which may or may not be complete and returns the aliased path
+  // if possible
+  async function substituteId(id: string, base: string): Promise<string> {
+    return (await tsconfig?.substituteId(id, base)) ?? id
+  }
+
   async function setupPnP() {
     pnpApi?.setup()
   }
 
+  async function aliases(base: string) {
+    if (!tsconfig) return {}
+
+    return await tsconfig.paths(base)
+  }
+
   return {
     setupPnP,
     resolveJsId,
     resolveCssId,
+    substituteId,
+
+    aliases,
 
     child(childOpts: Partial<ResolverOptions>) {
       return createResolver({
@@ -167,6 +230,7 @@ export async function createResolver(opts: ResolverOptions): Promise<Resolver> {
 
         // Inherit defaults from parent
         pnp: childOpts.pnp ?? pnpApi,
+        tsconfig: childOpts.tsconfig ?? tsconfig,
         fileSystem: childOpts.fileSystem ?? fileSystem,
       })
     },