Postcss: Bring back proper type exports (#14256)

Closes #14253

Since we changed the export strategy for the postcss client in #14132,
we accidentally no longer generated type exports for this package.

This PR adds a type export back. We now use a similar pattern to the
`./colors` and `./defaultTheme` exports in the tailwindcss package where
we have a separate cjs entrypoint.

The changes were validated manually in a playground project that were
installing the updated dependencies from tarballs.

Here is one example of it working as expected:
 
<img width="750" alt="Screenshot 2024-08-26 at 14 10 07"
src="https://github.com/user-attachments/assets/83de15f2-1543-4805-9231-9b8df1636c5e">

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Bring back type exports for the cjs build of `@tailwindcss/postcss`. ([#14256](https://github.com/tailwindlabs/tailwindcss/pull/14256))
 
 ## [4.0.0-alpha.20] - 2024-08-23
 

packages/@tailwindcss-postcss/src/index.cts

@@ -0,0 +1,7 @@
+import tailwindcss from './index.ts'
+
+// This is used instead of `export default` to work around a bug in
+// `postcss-load-config`
+
+// @ts-ignore
+export = tailwindcss

packages/@tailwindcss-postcss/src/index.ts

@@ -29,7 +29,7 @@ class DefaultMap<T = string, V = any> extends Map<T, V> {
   }
 }
 
-type PluginOptions = {
+export type PluginOptions = {
   // The base directory to scan for class candidates.
   base?: string
 
@@ -209,5 +209,4 @@ function optimizeCss(
   }).code.toString()
 }
 
-// This is used instead of `export default` to work around a bug in `postcss-load-config`
-module.exports = Object.assign(tailwindcss, { postcss: true }) as PluginCreator<PluginOptions>
+export default Object.assign(tailwindcss, { postcss: true }) as PluginCreator<PluginOptions>

packages/@tailwindcss-postcss/tsup.config.ts

@@ -1,11 +1,20 @@
 import { defineConfig } from 'tsup'
 
-export default defineConfig({
-  format: ['esm', 'cjs'],
-  clean: true,
-  minify: true,
-  cjsInterop: true,
-  dts: true,
-  entry: ['src/index.ts'],
-  noExternal: ['internal-postcss-fix-relative-paths'],
-})
+export default defineConfig([
+  {
+    format: ['esm'],
+    minify: true,
+    cjsInterop: true,
+    dts: true,
+    entry: ['src/index.ts'],
+    noExternal: ['internal-postcss-fix-relative-paths'],
+  },
+  {
+    format: ['cjs'],
+    minify: true,
+    cjsInterop: true,
+    dts: true,
+    entry: ['src/index.cts'],
+    noExternal: ['internal-postcss-fix-relative-paths'],
+  },
+])

packages/tailwindcss/src/compat/colors.cts

@@ -1 +1,4 @@
-module.exports = require('./colors.ts').default
+import colors from './colors.ts'
+
+// @ts-ignore
+export = colors

packages/tailwindcss/src/compat/default-theme.cts

@@ -1 +1,4 @@
-module.exports = require('./default-theme.ts').default
+import defaultTheme from './default-theme.ts'
+
+// @ts-ignore
+export = defaultTheme

packages/tailwindcss/src/plugin.cts

@@ -1,5 +1,8 @@
-// This file exists so that `plugin.ts` can be written one time but be compatible with both CJS and
-// ESM. Without it we get a `.default` export when using `require` in CJS.
+import plugin from './plugin.ts'
+
+// This file exists so that `plugin.ts` can be written one time but be
+// compatible with both CJS and ESM. Without it we get a `.default` export when
+// using `require` in CJS.
 
 // @ts-ignore
-module.exports = require('./plugin.ts').default
+export = plugin

playgrounds/nextjs/postcss.config.js

@@ -1,3 +1,5 @@
+import tailwindcss from '@tailwindcss/postcss'
+
 module.exports = {
-  plugins: ['@tailwindcss/postcss'],
+  plugins: [tailwindcss()],
 }