wip tsconfig support

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/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,15 @@ export interface Resolver {
    */
   resolveCssId(id: string, base: string): Promise<string>
 
+  /**
+   * Return a list of path resolution aliases for the given base directory
+   *
+   * This isn't a direct mapping of the `paths` property in a `tsconfig.json`
+   * because tsconfig paths support more than one pathspec per alias whereas
+   * this function returns a single pathspec per alias.
+   */
+  aliases(base: string): Promise<Record<string, string>>
+
   /**
    * Create a child resolver with the given options.
    *
@@ -83,6 +102,15 @@ 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) {
+    tsconfig = await loadTsConfig(opts.root)
+  }
+
   let esmResolver = ResolverFactory.createResolver({
     fileSystem,
     extensions: ['.mjs', '.js'],
@@ -128,6 +156,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) {
@@ -155,18 +188,34 @@ export async function createResolver(opts: ResolverOptions): Promise<Resolver> {
     pnpApi?.setup()
   }
 
+  async function aliases(base: string) {
+    if (!tsconfig) return {}
+
+    let paths = await tsconfig.paths(base)
+    let aliases = {}
+
+    for (let [key, value] of Object.entries(paths)) {
+      aliases[key] = value[0]
+    }
+
+    return aliases
+  }
+
   return {
     setupPnP,
     resolveJsId,
     resolveCssId,
 
+    aliases,
+
     child(childOpts: Partial<ResolverOptions>) {
       return createResolver({
         ...opts,
         ...childOpts,
 
         // Inherit defaults from parent
         pnp: childOpts.pnp ?? pnpApi,
+        tsconfig: childOpts.tsconfig ?? tsconfig,
         fileSystem: childOpts.fileSystem ?? fileSystem,
       })
     },

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

@@ -0,0 +1,155 @@
+import * as path from 'node:path'
+import * as tsconfig from 'tsconfig-paths'
+import * as tsconfck from 'tsconfck'
+import { normalizePath } from '../utils'
+import { DefaultMap } from '../util/default-map'
+
+export interface TSConfigApi {
+  /**
+   * Get the tsconfig paths used in the given directory
+   *
+   * @param base
+   */
+  paths(base: string): Promise<Record<string, string[]>>
+
+  /**
+   * Resolve a module to a file path based on the tsconfig paths
+   *
+   * @param base
+   */
+  resolveId(id: string, base: string): Promise<string | undefined>
+}
+
+export async function loadTsConfig(root: string): Promise<TSConfigApi> {
+  // 1. Find all tsconfig files in the project
+  let files = await tsconfck.findAll(root, {
+    configNames: ['tsconfig.json', 'jsconfig.json'],
+    skip(dir) {
+      if (dir === 'node_modules') return true
+      if (dir === '.git') return true
+
+      return false
+    },
+  })
+
+  // 2. Load them all
+  let options: tsconfck.TSConfckParseOptions = {
+    root,
+    cache: new tsconfck.TSConfckCache(),
+  }
+
+  let parsed = new Set<tsconfck.TSConfckParseResult>()
+
+  for (let file of files) {
+    try {
+      let result = await tsconfck.parse(file, options)
+      parsed.add(result)
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  // 3. Extract referenced projects
+  for (let result of parsed) {
+    if (!result.referenced) continue
+
+    // Mach against referenced projects rather than the project itself
+    for (let ref of result.referenced) {
+      parsed.add(ref)
+    }
+
+    // And use the project itself as a fallback since project references can
+    // be used to override the parent project.
+    parsed.delete(result)
+    parsed.add(result)
+
+    result.referenced = undefined
+  }
+
+  // 4. Create matchers for each project
+  interface Matcher {
+    (id: string): Promise<string | undefined>
+  }
+
+  let resolvers = new DefaultMap<string, Matcher[]>(() => [])
+  let pathMap = new Map<string, Record<string, string[]>>()
+
+  for (let result of parsed) {
+    let parent = normalizePath(path.dirname(result.tsconfigFile))
+
+    let opts = result.tsconfig.compilerOptions ?? {}
+    let baseUrl = opts.baseUrl
+    let absoluteBaseUrl = path.resolve(parent, baseUrl || '')
+
+    let match!: tsconfig.MatchPathAsync
+
+    function resolve(id: string) {
+      match ??= tsconfig.createMatchPathAsync(
+        absoluteBaseUrl,
+        opts.paths ?? {},
+        undefined,
+        baseUrl !== undefined,
+      )
+
+      return new Promise<string | undefined>((resolve, reject) => {
+        match(id, undefined, undefined, undefined, (err, path) => {
+          if (err) {
+            reject(err)
+          } else {
+            resolve(path)
+          }
+        })
+      })
+    }
+
+    resolvers.get(parent).push(resolve)
+    pathMap.set(parent, opts.paths ?? {})
+  }
+
+  function* walkPaths(base: string) {
+    let projectDir = normalizePath(base)
+
+    let prevProjectDir: string | undefined
+    while (projectDir !== prevProjectDir) {
+      yield projectDir
+
+      prevProjectDir = projectDir
+      projectDir = path.dirname(projectDir)
+    }
+
+    return null
+  }
+
+  // 5. Create matchers for each project
+  async function resolveId(id: string, base: string) {
+    for (let projectDir of walkPaths(base)) {
+      for (let resolve of resolvers.get(projectDir)) {
+        try {
+          return await resolve(id)
+        } catch (err) {
+          // If we got here we found a valid resolver for this path but it
+          // failed to resolve the path then we should stop looking. If we
+          // didn't we might end up using a resolver that would give us a
+          // valid path but not the one we want.
+          return null
+        }
+      }
+    }
+
+    return null
+  }
+
+  async function paths(base: string) {
+    for (let projectDir of walkPaths(base)) {
+      let paths = pathMap.get(projectDir)
+      if (paths) return paths
+    }
+
+    return {}
+  }
+
+  return {
+    resolveId,
+    paths,
+  }
+}

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

@@ -247,6 +247,7 @@ export class TW {
     let resolver = await createResolver({
       root: base,
       pnp: true,
+      tsconfig: true,
     })
 
     let locator = new ProjectLocator(base, globalSettings, resolver)

packages/tailwindcss-language-server/src/util/default-map.ts

@@ -0,0 +1,20 @@
+/**
+ * A Map that can generate default values for keys that don't exist.
+ * Generated default values are added to the map to avoid recomputation.
+ */
+export class DefaultMap<T = string, V = any> extends Map<T, V> {
+  constructor(private factory: (key: T, self: DefaultMap<T, V>) => V) {
+    super()
+  }
+
+  get(key: T): V {
+    let value = super.get(key)
+
+    if (value === undefined) {
+      value = this.factory(key, this)
+      this.set(key, value)
+    }
+
+    return value
+  }
+}

packages/tailwindcss-language-server/tests/fixtures/v4/path-mappings/app.css

@@ -0,0 +1,5 @@
+@import 'tailwindcss';
+
+@import '#a/file.css';
+@config '#a/my-config.ts';
+@plugin '#a/my-plugin.ts';

packages/tailwindcss-language-server/tests/fixtures/v4/path-mappings/package-lock.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "tailwindcss": "^4.0.0-beta.6"
+  }
+}

packages/tailwindcss-language-server/tests/fixtures/v4/path-mappings/package.json

@@ -0,0 +1,3 @@
+@theme {
+  --color-map-a-css: black;
+}