Resolve third-party plugins with exports in their package.json (#14775)

This PR fixes an issue when trying to resolve plugins with `exports` in
their `package.json`, like `@headlessui/tailwindcss`. The missing
`conditionNames` in the enhanced resolver config would cause it to not
properly look up the name.

## Test Plan

I added a test using the `postcss` setup (the existing plugin tests are
inside the CLI setup but the CLI can only ever run in Module JS mode).

To ensure the tests are resolving to the right environment (CJS vs MJS),
I added logging of the `import.meta.url` value to the resolver code.
When run, this was the output:

![Screenshot 2024-10-24 at
15.28.10.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/0Y77ilPI2WoJfMLFiAEw/c0197934-7b61-47c4-bda5-de037b31d43a.png)

Co-authored-by: Adam Wathan <[email protected]>

Author: philipp-spiess

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Ensure individual logical property utilities are sorted later than left/right pair utilities ([#14777](https://github.com/tailwindlabs/tailwindcss/pull/14777))
 - Don't migrate important modifiers inside conditional statements in Vue and Alpine (e.g. `<div v-if="!border" />`) ([#14774](https://github.com/tailwindlabs/tailwindcss/pull/14774))
+- Ensure third-party plugins with `exports` in their `package.json` are resolved correctly ([#14775](https://github.com/tailwindlabs/tailwindcss/pull/14775))
 - _Upgrade (experimental)_: Ensure `@import` statements for relative CSS files are actually migrated to use relative path syntax ([#14769](https://github.com/tailwindlabs/tailwindcss/pull/14769))
 
 ## [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> {