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"