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 <malfait.robin@gmail.com>

Author: thecrypticace

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