correctly generate types

packages/@headlessui-tailwindcss/package.json

@@ -3,15 +3,14 @@
   "version": "0.0.0",
   "description": "A complementary Tailwind CSS plugin",
   "main": "dist/index.cjs",
-  "typings": "dist/index.d.ts",
+  "types": "dist/index.d.ts",
   "license": "MIT",
   "files": [
     "README.md",
     "dist"
   ],
   "exports": {
-    "require": "./dist/index.cjs",
-    "types": "./dist/index.d.ts"
+    "require": "./dist/index.cjs"
   },
   "sideEffects": false,
   "engines": {
@@ -27,7 +26,7 @@
   },
   "scripts": {
     "prepublishOnly": "npm run build",
-    "build": "../../scripts/build.sh --external:tailwindcss",
+    "build": "../../scripts/build.sh --external:tailwindcss && node ./scripts/fix-types.js",
     "watch": "../../scripts/watch.sh --external:tailwindcss",
     "test": "../../scripts/test.sh",
     "lint": "../../scripts/lint.sh",

packages/@headlessui-tailwindcss/scripts/fix-types.js

@@ -0,0 +1,23 @@
+let fs = require('fs/promises')
+let path = require('path')
+
+/**
+ * Everything in the Headless UI codebase is written in TypeScript, however the
+ * `@headlessui/tailwindcss` plugin has to compile to a CommonJs file. This works great, however
+ * the types that were generated by tsc use `export default _default` instead of `export =
+ * _default` even if we use `module: CommonJs` in the `tsconfig.json`
+ *
+ * Don't want to spend too much time on this problem, so doing this little hack to change the
+ * exported type. This allows us to use the `@headlessui/tailwindcss` plugin and have types in a
+ * CommonJs environment.
+ **/
+
+let types = path.resolve(__dirname, '..', 'dist', 'index.d.ts')
+
+async function run() {
+  let contents = await fs.readFile(types, 'utf8')
+  contents = contents.replace('export default', 'export =')
+  await fs.writeFile(types, contents, 'utf8')
+}
+
+run()

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

@@ -1,6 +1,18 @@
 import plugin from 'tailwindcss/plugin'
 
-export default plugin.withOptions<{ prefix?: string }>(({ prefix = 'ui' } = {}) => {
+interface Options {
+  /**
+   * The prefix used for the variants. This defaults to `ui`.
+   *
+   * Usage example:
+   * ```html
+   *  <div class="ui-open:underline"></div>
+   *  ```
+   **/
+  prefix?: string
+}
+
+export default plugin.withOptions<Options>(({ prefix = 'ui' } = {}) => {
   return ({ addVariant }) => {
     for (let state of ['open', 'checked', 'selected', 'active', 'disabled']) {
       addVariant(`${prefix}-${state}`, [

packages/@headlessui-tailwindcss/tsconfig.json

@@ -1,8 +1,8 @@
 {
   "include": ["src"],
   "compilerOptions": {
-    "module": "esnext",
-    "lib": ["esnext"],
+    "module": "ESNext",
+    "lib": [],
     "importHelpers": true,
     "declaration": true,
     "sourceMap": true,
@@ -25,7 +25,7 @@
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
-    "isolatedModules": true
+    "isolatedModules": false
   },
   "exclude": ["node_modules", "**/*.test.tsx?"]
 }