From 72314898cc8652b40f2cb13b3aef060b6c28a114 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 25 Oct 2024 15:36:54 -0400 Subject: [PATCH 1/2] Transpile TypeScript plugins and configs for v4 projects --- .../tailwindcss-language-server/package.json | 1 + .../src/util/v4/design-system.ts | 18 +++++++++++++++++- pnpm-lock.yaml | 9 +++++++++ 3 files changed, 27 insertions(+), 1 deletion(-) diff --git a/packages/tailwindcss-language-server/package.json b/packages/tailwindcss-language-server/package.json index a91c5287..99aecb36 100644 --- a/packages/tailwindcss-language-server/package.json +++ b/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", diff --git a/packages/tailwindcss-language-server/src/util/v4/design-system.ts b/packages/tailwindcss-language-server/src/util/v4/design-system.ts index c2e94134..1b368613 100644 --- a/packages/tailwindcss-language-server/src/util/v4/design-system.ts +++ b/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 { 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({ 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) } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 851a1c97..64c07a3b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -131,6 +131,9 @@ importers: find-up: specifier: 5.0.0 version: 5.0.0 + jiti: + specifier: ^2.3.3 + version: 2.3.3 klona: specifier: 2.0.4 version: 2.0.4 @@ -1644,6 +1647,10 @@ packages: resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==} hasBin: true + jiti@2.3.3: + resolution: {integrity: sha512-EX4oNDwcXSivPrw2qKH2LB5PoFxEvgtv2JgwW0bU858HoLQ+kutSvjLMUqBd0PeJYEinLWhoI9Ol0eYMqj/wNQ==} + hasBin: true + js-tokens@4.0.0: resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} @@ -3893,6 +3900,8 @@ snapshots: jiti@1.21.6: {} + jiti@2.3.3: {} + js-tokens@4.0.0: {} js-tokens@9.0.0: {} From 78d34c4665e0b13973f574202f9c32b3a9a79ca5 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 25 Oct 2024 15:45:28 -0400 Subject: [PATCH 2/2] Update changelog --- packages/vscode-tailwindcss/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md index 1d95ae91..29ea0dd6 100644 --- a/packages/vscode-tailwindcss/CHANGELOG.md +++ b/packages/vscode-tailwindcss/CHANGELOG.md @@ -2,7 +2,7 @@ ## Prerelease -- Nothing yet! +- Support loading TypeScript configs and plugins in v4 projects ([#1076](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1076)) ## 0.12.11