fix: default package exports

packages/tailwindcss/fix-default-cjs-exports.mjs

@@ -0,0 +1,63 @@
+import { readdir, readFile, writeFile } from 'node:fs/promises'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+// regex to find export {} in a d.ts file
+const regexp = /export\s*\{([^}]*)\}/
+// regex to find the default export in previous export {} expression
+const defaultExportRegexp = /\s*as\s+default\s*/
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+/**
+ * This function will replace `export { type X, Y, Z as default }` with:
+ * ```js
+ * export = Z;
+ * export { type X, Y }; // <== this line will be only added if there are additional named exports
+ * ```
+ * @param dtsPath {string}
+ * @returns {Promise<void>}
+ */
+async function fixDefaultCjsExport(dtsPath) {
+  const content = await readFile(dtsPath, { encoding: 'utf-8' })
+  let match = content.match(regexp)
+  if (!match) return
+  const fullExport = match[0]
+  /**@type {string | undefined}*/
+  let defaultExport = undefined
+  /**@type {string[]} */
+  const namedExports = []
+  for (const exp of match[1].split(',').map((e) => e.trim())) {
+    match = exp.match(defaultExportRegexp)
+    if (match) {
+      defaultExport = exp.replace(match[0], '').trim()
+    } else {
+      namedExports.push(exp)
+    }
+  }
+  if (!defaultExport) return
+  const newContent =
+    namedExports.length === 0
+      ? content.replace(fullExport, `export = ${defaultExport}`)
+      : content.replace(
+          fullExport,
+          `export = ${defaultExport};\nexport { ${namedExports.join(', ')} }`,
+        )
+  await writeFile(dtsPath, newContent, 'utf-8')
+}
+
+/**
+ * List all `.d.ts` files in the `dist` directory and fix the default export.
+ *
+ * @returns {Promise<void>}
+ */
+async function fixDefaultCjsExports() {
+  const files = await readdir(resolve(__dirname, 'dist')).then((f) => {
+    return f
+      .filter((file) => file.endsWith('.d.ts'))
+      .map((file) => resolve(__dirname, 'dist', file))
+  })
+  await Promise.all(files.map((file) => fixDefaultCjsExport(file)))
+}
+
+fixDefaultCjsExports()

packages/tailwindcss/package.json

@@ -1,5 +1,6 @@
 {
   "name": "tailwindcss",
+  "type": "commonjs",
   "version": "4.0.0",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
@@ -12,7 +13,7 @@
   "homepage": "https://tailwindcss.com",
   "scripts": {
     "lint": "tsc --noEmit",
-    "build": "tsup-node --env.NODE_ENV production",
+    "build": "tsup-node --env.NODE_ENV production && node fix-default-cjs-exports.mjs",
     "dev": "tsup-node --env.NODE_ENV development --watch",
     "test:ui": "playwright test"
   },
@@ -66,38 +67,95 @@
     "access": "public",
     "exports": {
       ".": {
-        "types": "./dist/lib.d.mts",
         "style": "./index.css",
-        "require": "./dist/lib.js",
-        "import": "./dist/lib.mjs"
+        "import": {
+          "types": "./dist/lib.d.mts",
+          "default": "./dist/lib.mjs"
+        },
+        "require": {
+          "types": "./dist/lib.d.ts",
+          "default": "./dist/lib.js"
+        }
       },
       "./plugin": {
-        "require": "./dist/plugin.js",
-        "import": "./dist/plugin.mjs"
+        "import": {
+          "types": "./dist/plugin.d.mts",
+          "default": "./dist/plugin.mjs"
+        },
+        "require": {
+          "types": "./dist/plugin.d.ts",
+          "default": "./dist/plugin.js"
+        }
       },
       "./plugin.js": {
-        "require": "./dist/plugin.js",
-        "import": "./dist/plugin.mjs"
+        "import": {
+          "types": "./dist/plugin.d.mts",
+          "default": "./dist/plugin.mjs"
+        },
+        "require": {
+          "types": "./dist/plugin.d.ts",
+          "default": "./dist/plugin.js"
+        }
       },
       "./defaultTheme": {
-        "require": "./dist/default-theme.js",
-        "import": "./dist/default-theme.mjs"
+        "import": {
+          "types": "./dist/default-theme.d.mts",
+          "default": "./dist/default-theme.mjs"
+        },
+        "require": {
+          "types": "./dist/default-theme.d.ts",
+          "default": "./dist/default-theme.js"
+        }
       },
       "./defaultTheme.js": {
-        "require": "./dist/default-theme.js",
-        "import": "./dist/default-theme.mjs"
+        "import": {
+          "types": "./dist/default-theme.d.mts",
+          "default": "./dist/default-theme.mjs"
+        },
+        "require": {
+          "types": "./dist/default-theme.d.ts",
+          "default": "./dist/default-theme.js"
+        }
       },
       "./colors": {
-        "require": "./dist/colors.js",
-        "import": "./dist/colors.mjs"
+        "import": {
+          "types": "./dist/colors.d.mts",
+          "default": "./dist/colors.mjs"
+        },
+        "require": {
+          "types": "./dist/colors.d.ts",
+          "default": "./dist/colors.js"
+        }
       },
       "./colors.js": {
-        "require": "./dist/colors.js",
-        "import": "./dist/colors.mjs"
+        "import": {
+          "types": "./dist/colors.d.mts",
+          "default": "./dist/colors.mjs"
+        },
+        "require": {
+          "types": "./dist/colors.d.ts",
+          "default": "./dist/colors.js"
+        }
       },
       "./lib/util/flattenColorPalette": {
-        "require": "./dist/flatten-color-palette.js",
-        "import": "./dist/flatten-color-palette.mjs"
+        "import": {
+          "types": "./dist/flatten-color-palette.d.mts",
+          "default": "./dist/flatten-color-palette.mjs"
+        },
+        "require": {
+          "types": "./dist/flatten-color-palette.d.ts",
+          "default": "./dist/flatten-color-palette.js"
+        }
+      },
+      "./lib/util/flattenColorPalette.js": {
+        "import": {
+          "types": "./dist/flatten-color-palette.d.mts",
+          "default": "./dist/flatten-color-palette.mjs"
+        },
+        "require": {
+          "types": "./dist/flatten-color-palette.d.ts",
+          "default": "./dist/flatten-color-palette.js"
+        }
       },
       "./package.json": "./package.json",
       "./index.css": "./index.css",
@@ -111,6 +169,37 @@
     }
   },
   "style": "index.css",
+  "main": "dist/lib.js",
+  "module": "dist/lib.mjs",
+  "types": "dist/lib.d.ts",
+  "typesVersions": {
+    "*": {
+      "plugin": [
+        "./dist/plugin.d.ts"
+      ],
+      "plugin.js": [
+        "./dist/plugin.d.ts"
+      ],
+      "colors": [
+        "./dist/colors.d.ts"
+      ],
+      "colors.js": [
+        "./dist/colors.d.ts"
+      ],
+      "defaultTheme": [
+        "./dist/default-theme.d.ts"
+      ],
+      "defaultTheme.js": [
+        "./dist/default-theme.d.ts"
+      ],
+      "lib/util/flattenColorPalette": [
+        "./dist/flatten-color-palette.d.ts"
+      ],
+      "lib/util/flattenColorPalette.js": [
+        "./dist/flatten-color-palette.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist",
     "index.css",

packages/tailwindcss/src/plugin.ts

@@ -1,5 +1,7 @@
 import type { Config, PluginFn, PluginWithConfig, PluginWithOptions } from './compat/plugin-api'
 
+export type { Config, PluginFn, PluginWithConfig, PluginWithOptions }
+
 function createPlugin(handler: PluginFn, config?: Partial<Config>): PluginWithConfig {
   return {
     handler,

packages/tailwindcss/tsup.config.ts

@@ -1,28 +1,15 @@
 import { defineConfig } from 'tsup'
 
-export default defineConfig([
-  {
-    format: ['esm'],
-    minify: true,
-    dts: true,
-    entry: {
-      lib: 'src/index.ts',
-      plugin: 'src/plugin.ts',
-      colors: 'src/compat/colors.ts',
-      'default-theme': 'src/compat/default-theme.ts',
-      'flatten-color-palette': 'src/compat/flatten-color-palette.ts',
-    },
+export default defineConfig({
+  format: ['cjs', 'esm'],
+  clean: true,
+  minify: true,
+  dts: true,
+  entry: {
+    plugin: 'src/plugin.ts',
+    lib: 'src/index.ts',
+    colors: 'src/compat/colors.ts',
+    'default-theme': 'src/compat/default-theme.ts',
+    'flatten-color-palette': 'src/compat/flatten-color-palette.ts',
   },
-  {
-    format: ['cjs'],
-    minify: true,
-    dts: true,
-    entry: {
-      plugin: 'src/plugin.cts',
-      lib: 'src/index.cts',
-      colors: 'src/compat/colors.cts',
-      'default-theme': 'src/compat/default-theme.cts',
-      'flatten-color-palette': 'src/compat/flatten-color-palette.cts',
-    },
-  },
-])
+})