Fix v3 config loading with Jiti re-exports

Author: Dunqing

src/versions/v3.ts

@@ -1,11 +1,12 @@
 // @ts-check
 import * as path from 'node:path'
+import { pathToFileURL } from 'node:url'
 import clearModule from 'clear-module'
+import { createJiti } from 'jiti'
 // @ts-ignore
 import { generateRules as generateRulesFallback } from 'tailwindcss-v3/lib/lib/generateRules'
 // @ts-ignore
 import { createContext as createContextFallback } from 'tailwindcss-v3/lib/lib/setupContextUtils'
-import loadConfigFallback from 'tailwindcss-v3/loadConfig'
 import resolveConfigFallback from 'tailwindcss-v3/resolveConfig'
 import type { RequiredConfig } from 'tailwindcss-v3/types/config.js'
 import type { UnifiedApi } from '../types'
@@ -36,24 +37,26 @@ export async function loadV3(pkgDir: string | null, jsConfig: string | null): Pr
   let createContext = createContextFallback
   let generateRules: GenerateRules = generateRulesFallback
   let resolveConfig = resolveConfigFallback
-  let loadConfig = loadConfigFallback
   let tailwindConfig: RequiredConfig = { content: [] }
 
   try {
     if (pkgDir) {
       resolveConfig = require(path.join(pkgDir, 'resolveConfig'))
       createContext = require(path.join(pkgDir, 'lib/lib/setupContextUtils')).createContext
       generateRules = require(path.join(pkgDir, 'lib/lib/generateRules')).generateRules
-      // Prior to `tailwindcss@3.3.0` this won't exist so we load it last
-      loadConfig = require(path.join(pkgDir, 'loadConfig'))
     }
   } catch {}
 
   try {
     if (jsConfig) {
       clearModule(jsConfig)
-      let loadedConfig = loadConfig(jsConfig)
-      tailwindConfig = loadedConfig.default ?? loadedConfig
+      let jiti = createJiti(import.meta.url, {
+        moduleCache: false,
+        fsCache: false,
+        interopDefault: true,
+      })
+      let url = pathToFileURL(jsConfig)
+      tailwindConfig = await jiti.import<RequiredConfig>(url.href, { default: true })
     }
   } catch (err) {
     console.error(`Unable to load your Tailwind CSS v3 config: ${jsConfig}`)

tests/fixtures.test.ts

@@ -61,6 +61,11 @@ let fixtures = [
     dir: 'v3-2',
     ext: 'html',
   },
+  {
+    name: 'v3: re-exported config with jiti',
+    dir: 'v3-jiti-reexport',
+    ext: 'html',
+  },
   {
     name: 'plugins',
     dir: 'plugins',

tests/fixtures/v3-jiti-reexport/index.html

@@ -0,0 +1 @@
+<div class="sm:p-0 p-0"></div>

tests/fixtures/v3-jiti-reexport/output.html

@@ -0,0 +1 @@
+<div class="p-0 sm:p-0"></div>

tests/fixtures/v3-jiti-reexport/package-lock.json

@@ -0,0 +1,6 @@
+{
+  "private": true,
+  "dependencies": {
+    "@repo/tailwind-config": "file:./packages/tailwind-config"
+  }
+}

tests/fixtures/v3-jiti-reexport/package.json

@@ -0,0 +1,11 @@
+import { createJiti } from 'jiti'
+
+const jiti = createJiti(import.meta.url, {
+  interopDefault: true,
+})
+
+const _module = await jiti.import(new URL('../src/index.ts', import.meta.url).href, {
+  default: true,
+})
+
+export default _module?.default ?? _module

tests/fixtures/v3-jiti-reexport/packages/tailwind-config/dist/index.mjs

@@ -0,0 +1,17 @@
+{
+  "name": "@repo/tailwind-config",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "dependencies": {
+    "jiti": "^2.6.1"
+  }
+}

tests/fixtures/v3-jiti-reexport/packages/tailwind-config/package.json

@@ -0,0 +1,3 @@
+export default {
+  content: ['./index.html'],
+}

tests/fixtures/v3-jiti-reexport/packages/tailwind-config/src/index.ts

@@ -0,0 +1 @@
+export { default } from '@repo/tailwind-config'