UI: Migrate tailwind plugin to ESM

.changeset/eight-pets-greet.md

@@ -0,0 +1,7 @@
+---
+"fumadocs-core": patch
+"fumadocs-mdx": patch
+"fumadocs-ui": patch
+---
+
+Migrate `fumadocs-ui` to fully ESM, adding support for ESM `tailwind.config` file

apps/docs/content/docs/ui/theme.mdx

@@ -20,10 +20,10 @@ import 'fumadocs-ui/style.css';
 For Tailwind CSS projects, please use the built-in Tailwind CSS plugin instead.
 
 ```js title="tailwind.config.js"
-const { createPreset } = require('fumadocs-ui/tailwind-plugin');
+import { createPreset } from 'fumadocs-ui/tailwind-plugin';
 
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
   darkMode: 'class',
   presets: [createPreset()],
   content: [
@@ -94,10 +94,10 @@ It comes with the DocsUI Tailwind CSS plugin by default, it introduces new color
 This plugin also provides several theme presets out-of-the-box, you can pick one you prefer rather than the default one.
 
 ```js
-const { createPreset } = require('fumadocs-ui/tailwind-plugin');
+import { createPreset } from 'fumadocs-ui/tailwind-plugin';
 
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
   presets: [
     createPreset({
       preset: 'ocean',

apps/docs/package.json

@@ -2,6 +2,7 @@
   "name": "docs",
   "version": "0.1.3",
   "private": true,
+  "type": "module",
   "scripts": {
     "build": "pnpm build:docs && next build && pnpm build:index",
     "build:docs": "tsx ./scripts/generate-docs.mts",

apps/docs/postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

apps/docs/tailwind.config.js

@@ -1,7 +1,7 @@
-const { createPreset, presets } = require('fumadocs-ui/tailwind-plugin');
+import { createPreset, presets } from 'fumadocs-ui/tailwind-plugin';
 
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
   content: [
     './components/**/*.{ts,tsx}',
     './app/**/*.{ts,tsx}',

packages/core/package.json

@@ -28,6 +28,10 @@
       "import": "./dist/search/client.js",
       "types": "./dist/search/client.d.ts"
     },
+    "./search/shared": {
+      "import": "./dist/search/shared.js",
+      "types": "./dist/search/shared.d.ts"
+    },
     "./search/server": {
       "import": "./dist/search/server.js",
       "types": "./dist/search/server.d.ts"
@@ -135,6 +139,7 @@
   "devDependencies": {
     "@algolia/client-search": "^4.23.3",
     "@mdx-js/mdx": "^3.0.1",
+    "@types/estree-jsx": "^1.0.5",
     "@types/flexsearch": "0.7.6",
     "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.3",

packages/core/src/mdx-plugins/transformer-icon.ts

@@ -1,5 +1,5 @@
 import { toEstree } from 'hast-util-to-estree';
-import type { JsxElement } from 'hast-util-to-estree/lib/state';
+import { type JSXElement } from 'estree-jsx';
 import { type ShikiTransformer } from 'shiki';
 
 export interface CodeBlockIcon {
@@ -190,7 +190,7 @@ export function transformerIcon(options: IconOptions = {}): ShikiTransformer {
   };
 }
 
-function createSVGElement(icon: CodeBlockIcon): JsxElement {
+function createSVGElement(icon: CodeBlockIcon): JSXElement {
   return {
     type: 'JSXElement',
     openingElement: {

packages/mdx/src/loader-mdx.ts

@@ -1,6 +1,6 @@
 import path from 'node:path';
 import { createProcessor, type ProcessorOptions } from '@mdx-js/mdx';
-import type { Processor } from '@mdx-js/mdx/lib/core';
+import { type Processor } from '@mdx-js/mdx/internal-create-format-aware-processors';
 import grayMatter from 'gray-matter';
 import { type LoaderContext } from 'webpack';
 import { getGitTimestamp } from './utils/git-timestamp';

packages/tsconfig/base.json

@@ -10,7 +10,7 @@
     "forceConsistentCasingInFileNames": true,
     "inlineSources": false,
     "isolatedModules": true,
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "noUnusedLocals": false,
     "noUnusedParameters": false,
     "resolveJsonModule": true,

packages/ui/package.json

@@ -10,42 +10,43 @@
   "repository": "github:fuma-nama/fumadocs",
   "license": "MIT",
   "author": "Fuma Nama",
+  "type": "module",
   "exports": {
     "./style.css": "./dist/style.css",
     "./twoslash.css": "./dist/twoslash.css",
     "./image-zoom.css": "./dist/image-zoom.css",
     "./tailwind-plugin": {
       "import": "./dist/tailwind-plugin.js",
-      "require": "./dist/tailwind-plugin.js",
+      "require": "./dist/tailwind-plugin.cjs",
       "types": "./dist/tailwind-plugin.d.ts"
     },
     "./components/*": {
       "import": "./dist/components/*.js",
-      "types": "./dist/components/*.d.mts"
+      "types": "./dist/components/*.d.ts"
     },
     "./twoslash/*": {
       "import": "./dist/twoslash/*.js",
-      "types": "./dist/twoslash/*.d.mts"
+      "types": "./dist/twoslash/*.d.ts"
     },
     "./i18n": {
       "import": "./dist/i18n.js",
-      "types": "./dist/i18n.d.mts"
+      "types": "./dist/i18n.d.ts"
     },
     "./layout": {
       "import": "./dist/layout.js",
-      "types": "./dist/layout.d.mts"
+      "types": "./dist/layout.d.ts"
     },
     "./page": {
       "import": "./dist/page.js",
-      "types": "./dist/page.d.mts"
+      "types": "./dist/page.d.ts"
     },
     "./provider": {
       "import": "./dist/provider.js",
-      "types": "./dist/provider.d.mts"
+      "types": "./dist/provider.d.ts"
     },
     "./mdx": {
       "import": "./dist/mdx.js",
-      "types": "./dist/mdx.d.mts"
+      "types": "./dist/mdx.d.ts"
     }
   },
   "typesVersions": {
@@ -54,25 +55,25 @@
         "./dist/tailwind-plugin.d.ts"
       ],
       "components/*": [
-        "./dist/components/*.d.mts"
+        "./dist/components/*.d.ts"
       ],
       "twoslash/*": [
-        "./dist/twoslash/*.d.mts"
+        "./dist/twoslash/*.d.ts"
       ],
       "i18n": [
-        "./dist/i18n.d.mts"
+        "./dist/i18n.d.ts"
       ],
       "layout": [
-        "./dist/layout.d.mts"
+        "./dist/layout.d.ts"
       ],
       "page": [
-        "./dist/page.d.mts"
+        "./dist/page.d.ts"
       ],
       "provider": [
-        "./dist/provider.d.mts"
+        "./dist/provider.d.ts"
       ],
       "mdx": [
-        "./dist/mdx.d.mts"
+        "./dist/mdx.d.ts"
       ]
     }
   },

packages/ui/postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     'postcss-lightningcss': {

packages/ui/tsup.config.ts

@@ -65,12 +65,12 @@ export default defineConfig([
   {
     entry: [
       `./src/components/{${exportedComponents.join(',')}}.tsx`,
-      './src/{i18n,layout,page,provider,mdx}.{ts,tsx}',
+      './src/{i18n,layout,page,provider,mdx,tailwind-plugin}.{ts,tsx}',
       './src/twoslash/popup.tsx',
       './src/*.client.tsx',
     ],
-    external: ['server-only', '../../dist/image-zoom.css'],
-    outExtension: () => ({ js: '.js' }),
+    external: ['server-only', '../../dist/image-zoom.css', 'tailwindcss'],
+    //outExtension: () => ({ js: '.js' }),
     async onSuccess() {
       const replaceImports = Object.entries(injectImports).map(
         ([src, inject]) => injectImport(src, inject),
@@ -83,10 +83,11 @@ export default defineConfig([
     target: 'es2022',
   },
   {
+    // todo: Remove support for CommonJS in next major
     entry: ['./src/tailwind-plugin.ts'],
     format: 'cjs',
     external: ['tailwindcss'],
-    dts: true,
+    dts: false,
     target: 'node18',
   },
 ]);

pnpm-lock.yaml

@@ -342,6 +342,9 @@ importers:
       '@mdx-js/mdx':
         specifier: ^3.0.1
         version: 3.0.1
+      '@types/estree-jsx':
+        specifier: ^1.0.5
+        version: 1.0.5
       '@types/flexsearch':
         specifier: 0.7.6
         version: 0.7.6
@@ -2338,7 +2341,7 @@ packages:
     resolution: {integrity: sha512-eIQ4QTrOWyL3LWEe/bu6Taqzq2HQvHcyTMaOrI95P2/LmJE7AsfPfgJGuFLPVqBUE1BC1rik3VIhU+s9u72arA==}
     dependencies:
       '@types/estree': 1.0.5
-      '@types/estree-jsx': 1.0.0
+      '@types/estree-jsx': 1.0.5
       '@types/hast': 3.0.4
       '@types/mdx': 2.0.13
       collapse-white-space: 2.1.0
@@ -3719,6 +3722,11 @@ packages:
     dependencies:
       '@types/estree': 1.0.5
 
+  /@types/[email protected]:
+    resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
+    dependencies:
+      '@types/estree': 1.0.5
+
   /@types/[email protected]:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
@@ -6039,7 +6047,7 @@ packages:
   /[email protected]:
     resolution: {integrity: sha512-8U5eiL6BTrPxp/CHbs2yMgP8ftMhR5ww1eIKoWRMlqvltHF8fZn5LRDvTKuxD3DUn+shRbLGqXemcP51oFCsGQ==}
     dependencies:
-      '@types/estree-jsx': 1.0.0
+      '@types/estree-jsx': 1.0.5
       devlop: 1.1.0
       estree-util-is-identifier-name: 3.0.0
       estree-walker: 3.0.3
@@ -6050,7 +6058,7 @@ packages:
   /[email protected]:
     resolution: {integrity: sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg==}
     dependencies:
-      '@types/estree-jsx': 1.0.0
+      '@types/estree-jsx': 1.0.5
       astring: 1.8.6
       source-map: 0.7.4