Support loading TypeScript configs and plugins in v4 projects (#1076)

Fixes #1072

We already have tests to cover this case but vitest hooks into module
loading which lets us load TypeScript during tests. I tested it by
running the tests against the server running as a separate node process
rather than importing the sources and running the server in-process.

The test harness is already set up for this so the only change needed to
test this manually was this:
<img width="416" alt="Screenshot 2024-10-25 at 15 43 28"
src="https://github.com/user-attachments/assets/6dfc4d1e-e60e-4450-a34b-c231515922ed">

---------

Co-authored-by: Robin Malfait <[email protected]>

packages/tailwindcss-language-server/package.json

@@ -66,6 +66,7 @@
     "esbuild": "^0.20.2",
     "fast-glob": "3.2.4",
     "find-up": "5.0.0",
+    "jiti": "^2.3.3",
     "klona": "2.0.4",
     "license-checker": "25.0.1",
     "minimist": "^1.2.8",

packages/tailwindcss-language-server/src/util/v4/design-system.ts

@@ -1,11 +1,13 @@
 import type { DesignSystem } from '@tailwindcss/language-service/src/util/v4'
 
 import postcss from 'postcss'
+import { createJiti } from 'jiti'
 import * as fs from 'node:fs/promises'
 import * as path from 'node:path'
 import { resolveCssFrom, resolveCssImports } from '../../css'
 import { resolveFrom } from '../resolveFrom'
 import { pathToFileURL } from 'tailwindcss-language-server/src/utils'
+import type { Jiti } from 'jiti/lib/types'
 
 const HAS_V4_IMPORT = /@import\s*(?:'tailwindcss'|"tailwindcss")/
 const HAS_V4_THEME = /@theme\s*\{/
@@ -22,6 +24,20 @@ export async function isMaybeV4(css: string): Promise<boolean> {
   return HAS_V4_THEME.test(css) || HAS_V4_IMPORT.test(css)
 }
 
+let jiti: Jiti | undefined
+
+async function importFile(id: string) {
+  try {
+    // Load ESM/CJS files through Node/Bun/whatever runtime is being used
+    return await import(id)
+  } catch {
+    jiti ??= createJiti(__filename, { moduleCache: false, fsCache: false })
+
+    // Transpile using Jiti if we can't load the file directly
+    return await jiti.import(id)
+  }
+}
+
 /**
  * Create a loader function that can load plugins and config files relative to
  * the CSS file that uses them. However, we don't want missing files to prevent
@@ -45,7 +61,7 @@ function createLoader<T>({
       let url = pathToFileURL(resolved)
       url.searchParams.append('t', cacheKey)
 
-      return await import(url.href).then((m) => m.default ?? m)
+      return await importFile(url.href).then((m) => m.default ?? m)
     } catch (err) {
       return onError(id, err, resourceType)
     }

packages/vscode-tailwindcss/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Fix display of color swatches using new v4 oklch color palette ([#1073](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1073))
 - Properly validate `theme(…)` function paths in v4 ([#1074](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1074))
+- Support loading TypeScript configs and plugins in v4 projects ([#1076](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1076))
 
 ## 0.12.12