Support loading TypeScript configs in v4

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.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",

src/config.ts

@@ -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)

tests/fixtures.test.ts

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

tests/fixtures/v4/basic/package.json

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

tests/fixtures/v4/css-loading-js/app.css

@@ -0,0 +1,21 @@
+@import 'tailwindcss';
+
+/* Load ESM versions */
+@config './esm/my-config.mjs';
+@plugin './esm/my-plugin.mjs';
+
+/* Load Common JS versions */
+@config './cjs/my-config.cjs';
+@plugin './cjs/my-plugin.cjs';
+
+/* Load TypeScript versions */
+@config './ts/my-config.ts';
+@plugin './ts/my-plugin.ts';
+
+/* Attempt to load files that do not exist */
+@config './missing-confg.mjs';
+@plugin './missing-plugin.mjs';
+
+@theme {
+  --color-tomato: tomato;
+}

tests/fixtures/v4/css-loading-js/cjs/my-config.cjs

@@ -0,0 +1,9 @@
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        'cjs-from-config': 'black',
+      },
+    },
+  },
+}

tests/fixtures/v4/css-loading-js/cjs/my-plugin.cjs

@@ -0,0 +1,24 @@
+const plugin = require('tailwindcss/plugin')
+
+module.exports = plugin(
+  ({ addUtilities }) => {
+    addUtilities({
+      '.utility-cjs-from-plugin': {
+        color: 'black'
+      },
+      '.utility-cjs-from-plugin-2': {
+        width: '100%',
+        height: '100%',
+      },
+    })
+  },
+  {
+    theme: {
+      extend: {
+        colors: {
+          'cjs-from-plugin': 'black',
+        },
+      },
+    },
+  },
+)

tests/fixtures/v4/configs/tailwind.config.mjs → tests/fixtures/v4/css-loading-js/esm/my-config.mjs

@@ -2,8 +2,8 @@ export default {
   theme: {
     extend: {
       colors: {
-        "from-config": "#3490dc",
+        'esm-from-config': 'black',
       },
     },
   },
-};
+}

tests/fixtures/v4/css-loading-js/esm/my-plugin.mjs

@@ -0,0 +1,24 @@
+import plugin from 'tailwindcss/plugin'
+
+export default plugin(
+  ({ addUtilities }) => {
+    addUtilities({
+      '.utility-esm-from-plugin': {
+        color: 'black'
+      },
+      '.utility-esm-from-plugin-2': {
+        width: '100%',
+        height: '100%',
+      },
+    })
+  },
+  {
+    theme: {
+      extend: {
+        colors: {
+          'esm-from-plugin': 'black',
+        },
+      },
+    },
+  },
+)

tests/fixtures/v4/css-loading-js/index.html

@@ -0,0 +1,3 @@
+<div
+  class="sm:bg-tomato sm:utility-cjs-from-plugin sm:utility-cjs-from-plugin-2 sm:utility-esm-from-plugin sm:utility-esm-from-plugin-2 sm:utility-ts-from-plugin sm:utility-ts-from-plugin-2 sm:bg-cjs-from-config sm:bg-cjs-from-plugin sm:bg-esm-from-config sm:bg-esm-from-plugin sm:bg-ts-from-config sm:bg-ts-from-plugin bg-red-500 utility-cjs-from-plugin utility-esm-from-plugin utility-ts-from-plugin"
+></div>

tests/fixtures/v4/css-loading-js/output.html

@@ -0,0 +1,3 @@
+<div
+  class="bg-red-500 utility-cjs-from-plugin utility-esm-from-plugin utility-ts-from-plugin sm:utility-cjs-from-plugin-2 sm:utility-esm-from-plugin-2 sm:utility-ts-from-plugin-2 sm:bg-cjs-from-config sm:bg-cjs-from-plugin sm:bg-esm-from-config sm:bg-esm-from-plugin sm:bg-tomato sm:bg-ts-from-config sm:bg-ts-from-plugin sm:utility-cjs-from-plugin sm:utility-esm-from-plugin sm:utility-ts-from-plugin"
+></div>