Resolve third-party plugins with exports in their package.json

Author: philipp-spiess

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Ensure third-party plugins with `exports` in their `package.json` are resolved correctly ([#14775](https://github.com/tailwindlabs/tailwindcss/pull/14775))
 
 ## [4.0.0-alpha.29] - 2024-10-23
 

integrations/postcss/plugins.test.ts

@@ -0,0 +1,79 @@
+import { candidate, css, html, js, json, test } from '../utils'
+
+test(
+  'builds the `@headlessui/tailwindcss` plugin utilities (CJS)',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "commonjs",
+          "dependencies": {
+            "postcss": "^8",
+            "postcss-cli": "^10",
+            "tailwindcss": "workspace:^",
+            "@tailwindcss/postcss": "workspace:^",
+            "@headlessui/tailwindcss": "^0.2.1"
+          }
+        }
+      `,
+      'postcss.config.cjs': js`
+        let tailwindcss = require('@tailwindcss/postcss')
+        module.exports = {
+          plugins: [tailwindcss()],
+        }
+      `,
+      'index.html': html`
+        <div className="ui-open:flex"></div>
+      `,
+      'src/index.css': css`
+        @import 'tailwindcss/theme' theme(reference);
+        @import 'tailwindcss/utilities';
+        @plugin '@headlessui/tailwindcss';
+      `,
+    },
+  },
+  async ({ fs, exec }) => {
+    await exec('pnpm postcss src/index.css --output dist/out.css')
+
+    await fs.expectFileToContain('dist/out.css', [candidate`ui-open:flex`])
+  },
+)
+
+test(
+  'builds the `@headlessui/tailwindcss` plugin utilities (ESM)',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "postcss": "^8",
+            "postcss-cli": "^10",
+            "tailwindcss": "workspace:^",
+            "@tailwindcss/postcss": "workspace:^",
+            "@headlessui/tailwindcss": "^0.2.1"
+          }
+        }
+      `,
+      'postcss.config.mjs': js`
+        import tailwindcss from '@tailwindcss/postcss'
+        export default {
+          plugins: [tailwindcss()],
+        }
+      `,
+      'index.html': html`
+        <div className="ui-open:flex"></div>
+      `,
+      'src/index.css': css`
+        @import 'tailwindcss/theme' theme(reference);
+        @import 'tailwindcss/utilities';
+        @plugin '@headlessui/tailwindcss';
+      `,
+    },
+  },
+  async ({ fs, exec }) => {
+    await exec('pnpm postcss src/index.css --output dist/out.css')
+
+    await fs.expectFileToContain('dist/out.css', [candidate`ui-open:flex`])
+  },
+)

packages/@tailwindcss-node/src/compile.ts

@@ -127,6 +127,7 @@ const jsResolver = EnhancedResolve.ResolverFactory.createResolver({
   fileSystem: new EnhancedResolve.CachedInputFileSystem(fs, 4000),
   useSyncFileSystemCalls: true,
   extensions: ['.js', '.json', '.node', '.ts'],
+  conditionNames: import.meta.url ? ['node', 'import'] : ['node', 'require'],
 })
 
 function resolveJsId(id: string, base: string): Promise<string | false | undefined> {