wip tsconfig support

Author: thecrypticace

packages/tailwindcss-language-server/package.json

@@ -81,6 +81,7 @@
     "rimraf": "3.0.2",
     "stack-trace": "0.0.10",
     "tailwindcss": "3.4.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.ts

@@ -454,6 +454,7 @@ export class ProjectLocator {
     this.resolver ??= await createResolver({
       root: process.cwd(),
       pnp: true,
+      tsconfig: true,
     })
 
     return this.resolver

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

@@ -263,9 +263,11 @@ export async function createProjectService(
   let resolver!: Resolver
 
   async function getResolver() {
+    console.log({ getResolver })
     resolver ??= await createResolver({
       root: projectConfig.folder,
       pnp: true,
+      tsconfig: true,
     })
 
     return resolver

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

@@ -2,6 +2,7 @@ import * as fs from 'node:fs'
 import * as path from 'node:path'
 import { CachedInputFileSystem, ResolverFactory, Resolver as BaseResolver } from 'enhanced-resolve'
 import { loadPnPApi } from './pnp'
+import { loadTsConfig } from './tsconfig'
 
 export interface ResolverOptions {
   /**
@@ -13,6 +14,11 @@ export interface ResolverOptions {
    * Whether or not the resolver should attempt to use PnP resolution
    */
   pnp?: boolean
+
+  /**
+   * Whether or not the resolver should load tsconfig path mappings
+   */
+  tsconfig?: boolean
 }
 
 export interface Resolver {
@@ -52,6 +58,9 @@ export async function createResolver(opts: ResolverOptions) {
   // Load PnP API if requested
   let pnpApi = opts.pnp ? await loadPnPApi(opts.root) : null
 
+  // Load TSConfig path mappings
+  let tsconfig = opts.tsconfig ? await loadTsConfig(opts.root) : null
+
   let esmResolver = ResolverFactory.createResolver({
     fileSystem,
     extensions: ['.mjs', '.js'],
@@ -93,6 +102,11 @@ export async function createResolver(opts: ResolverOptions) {
       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) {

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

@@ -0,0 +1,35 @@
+import * as tsconfig from 'tsconfig-paths'
+
+export async function loadTsConfig(root: string) {
+  // A cached list of tsconfig matchers based on directory
+  let matchers: Record<string, tsconfig.MatchPath | null> = {}
+
+  async function load(base: string) {
+    if (matchers[base]) return matchers[base]
+
+    let config = tsconfig.loadConfig(base)
+
+    if (config.resultType === 'failed') {
+      matchers[base] = null
+    } else {
+      matchers[base] = tsconfig.createMatchPath(
+        config.absoluteBaseUrl,
+        config.paths,
+        config.mainFields,
+        config.addMatchAll,
+      )
+    }
+
+    return matchers[base]
+  }
+
+  async function resolveId(id: string, base: string) {
+    let match = await load(base)
+
+    return match?.(id)
+  }
+
+  return {
+    resolveId,
+  }
+}

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

@@ -0,0 +1,10 @@
+@import 'tailwindcss';
+
+@import '#a/file.css';
+@import '#b/file.css';
+
+@config '#a/my-config.ts';
+@plugin '#a/my-plugin.ts';
+
+@config '#b/my-config.ts';
+@plugin '#b/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;
+}

packages/tailwindcss-language-server/tests/fixtures/v4/path-mappings/src/a/file.css

@@ -0,0 +1,11 @@
+import type { Config } from 'tailwindcss'
+
+export default {
+  theme: {
+    extend: {
+      colors: {
+        'map-a-config': 'black',
+      },
+    },
+  },
+} satisfies Config

packages/tailwindcss-language-server/tests/fixtures/v4/path-mappings/src/a/my-config.ts

@@ -0,0 +1,17 @@
+import type { PluginAPI } from 'tailwindcss'
+import plugin from 'tailwindcss/plugin'
+
+export default plugin(
+  (api: PluginAPI) => {
+    //
+  },
+  {
+    theme: {
+      extend: {
+        colors: {
+          'map-a-plugin': 'black',
+        },
+      },
+    },
+  },
+)

packages/tailwindcss-language-server/tests/fixtures/v4/path-mappings/src/a/my-plugin.ts

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

packages/tailwindcss-language-server/tests/fixtures/v4/path-mappings/src/b/file.css

@@ -0,0 +1,11 @@
+import type { Config } from 'tailwindcss'
+
+export default {
+  theme: {
+    extend: {
+      colors: {
+        'map-b-config': 'black',
+      },
+    },
+  },
+} satisfies Config

packages/tailwindcss-language-server/tests/fixtures/v4/path-mappings/src/b/my-config.ts

@@ -0,0 +1,17 @@
+import type { PluginAPI } from 'tailwindcss'
+import plugin from 'tailwindcss/plugin'
+
+export default plugin(
+  (api: PluginAPI) => {
+    //
+  },
+  {
+    theme: {
+      extend: {
+        colors: {
+          'map-b-plugin': 'black',
+        },
+      },
+    },
+  },
+)

packages/tailwindcss-language-server/tests/fixtures/v4/path-mappings/src/b/my-plugin.ts

@@ -0,0 +1,11 @@
+import type { Config } from 'tailwindcss'
+
+export default {
+  theme: {
+    extend: {
+      colors: {
+        'ts-from-config': 'black',
+      },
+    },
+  },
+} satisfies Config

packages/tailwindcss-language-server/tests/fixtures/v4/path-mappings/ts/my-config.ts

@@ -0,0 +1,17 @@
+import type { PluginAPI } from 'tailwindcss'
+import plugin from 'tailwindcss/plugin'
+
+export default plugin(
+  (api: PluginAPI) => {
+    //
+  },
+  {
+    theme: {
+      extend: {
+        colors: {
+          'ts-from-plugin': 'black',
+        },
+      },
+    },
+  },
+)

packages/tailwindcss-language-server/tests/fixtures/v4/path-mappings/ts/my-plugin.ts

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "#a/*": ["./src/a"],
+      "#b/*": ["./src/b"]
+    }
+  }
+}

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

@@ -357,3 +357,57 @@ withFixture('v4/css-loading-js', (c) => {
     },
   })
 })
+
+withFixture('v4/path-mappings', (c) => {
+  async function testHover(name, { text, lang, position, expected, expectedRange, settings }) {
+    test.concurrent.only(name, async ({ expect }) => {
+      let textDocument = await c.openDocument({ text, lang, settings })
+      let res = await c.sendRequest('textDocument/hover', {
+        textDocument,
+        position,
+      })
+
+      expect(res).toEqual(
+        expected
+          ? {
+              contents: {
+                language: 'css',
+                value: expected,
+              },
+              range: expectedRange,
+            }
+          : expected,
+      )
+    })
+  }
+
+  testHover('Mapping: CSS Imports', {
+    text: '<div class="bg-map-a-css">',
+    position: { line: 0, character: 13 },
+    expected: '.bg-map-a-css {\n  background-color: black;\n}',
+    expectedRange: {
+      start: { line: 0, character: 12 },
+      end: { line: 0, character: 30 },
+    },
+  })
+
+  testHover('Mapping: Configs', {
+    text: '<div class="bg-map-a-config">',
+    position: { line: 0, character: 13 },
+    expected: '.bg-map-a-config {\n  background-color: black;\n}',
+    expectedRange: {
+      start: { line: 0, character: 12 },
+      end: { line: 0, character: 30 },
+    },
+  })
+
+  testHover('Mapping: Plugins', {
+    text: '<div class="bg-map-a-plugin">',
+    position: { line: 0, character: 13 },
+    expected: '.bg-map-a-plugin {\n  background-color: black;\n}',
+    expectedRange: {
+      start: { line: 0, character: 12 },
+      end: { line: 0, character: 30 },
+    },
+  })
+})