Support loading TypeScript configs in v4 (#342)

* Load TypeScript configs with Jiti

* Update tests

* Update changelog

* Update versions

Author: thecrypticace

CHANGELOG.md

@@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+- Support TypeScript configs and plugins when using v4 ([#342](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/342))
 
 ## [0.6.10] - 2025-01-15
 

package-lock.json

@@ -39,6 +39,7 @@
     "@prettier/plugin-pug": "^3.0",
     "@shopify/prettier-plugin-liquid": "^1.4.0",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/node": "^22.10.9",
     "@zackad/prettier-plugin-twig": "^0.14.1",
     "ast-types": "^0.14.2",
     "clear-module": "^4.1.2",
@@ -47,6 +48,7 @@
     "esbuild": "^0.19.8",
     "escalade": "^3.1.1",
     "import-sort-style-module": "^6.0.0",
+    "jiti": "^2.4.2",
     "jsesc": "^2.5.2",
     "license-checker": "^25.0.1",
     "line-column": "^1.0.2",

package.json

@@ -4,6 +4,7 @@ import * as path from 'path'
 import { pathToFileURL } from 'url'
 import clearModule from 'clear-module'
 import escalade from 'escalade/sync'
+import { createJiti, Jiti } from 'jiti'
 import postcss from 'postcss'
 // @ts-ignore
 import postcssImport from 'postcss-import'
@@ -156,10 +157,12 @@ async function loadTailwindConfig(
  */
 function createLoader<T>({
   legacy,
+  jiti,
   filepath,
   onError,
 }: {
   legacy: boolean
+  jiti: Jiti
   filepath: string
   onError: (id: string, error: unknown, resourceType: string) => T
 }) {
@@ -172,7 +175,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 jiti.import(url.href, { default: true })
     } catch (err) {
       return onError(id, err, resourceType)
     }
@@ -209,6 +212,12 @@ async function loadV4(
   // If the user doesn't define an entrypoint then we use the default theme
   entryPoint = entryPoint ?? `${pkgDir}/theme.css`
 
+  // Create a Jiti instance that can be used to load plugins and config files
+  let jiti = createJiti(import.meta.url, {
+    moduleCache: false,
+    fsCache: false,
+  })
+
   let importBasePath = path.dirname(entryPoint)
 
   // Resolve imports in the entrypoint to a flat CSS tree
@@ -242,6 +251,7 @@ async function loadV4(
     // v4.0.0-alpha.25+
     loadModule: createLoader({
       legacy: false,
+      jiti,
       filepath: entryPoint,
       onError: (id, err, resourceType) => {
         console.error(`Unable to load ${resourceType}: ${id}`, err)
@@ -266,6 +276,7 @@ async function loadV4(
     // v4.0.0-alpha.24 and below
     loadPlugin: createLoader({
       legacy: true,
+      jiti,
       filepath: entryPoint,
       onError(id, err) {
         console.error(`Unable to load plugin: ${id}`, err)
@@ -276,6 +287,7 @@ async function loadV4(
 
     loadConfig: createLoader({
       legacy: true,
+      jiti,
       filepath: entryPoint,
       onError(id, err) {
         console.error(`Unable to load config: ${id}`, err)

src/config.ts

@@ -70,7 +70,7 @@ let fixtures = [
   },
   {
     name: 'v4: configs and plugins',
-    dir: 'v4/configs',
+    dir: 'v4/css-loading-js',
     ext: 'html',
   },
 ]

tests/fixtures.test.ts

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "tailwindcss": "^4.0.0-alpha.34"
+    "tailwindcss": "^4.0.0"
   },
   "prettier": {
     "tailwindStylesheet": "./app.css"