From 35cd2ff1ee38ad023219e460f5ce7d0cb66d92e1 Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Thu, 24 Oct 2024 17:34:19 +0200
Subject: [PATCH] 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 <adam.wathan@gmail.com>
---
 CHANGELOG.md                              |  1 +
 integrations/postcss/plugins.test.ts      | 79 +++++++++++++++++++++++
 packages/@tailwindcss-node/src/compile.ts |  1 +
 3 files changed, 81 insertions(+)
 create mode 100644 integrations/postcss/plugins.test.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d3fe65745..10c2a97bf 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/integrations/postcss/plugins.test.ts b/integrations/postcss/plugins.test.ts
new file mode 100644
index 000000000..3081b7bfe
--- /dev/null
+++ b/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`])
+  },
+)
diff --git a/packages/@tailwindcss-node/src/compile.ts b/packages/@tailwindcss-node/src/compile.ts
index 4804a1c8b..9f3f58fdd 100644
--- a/packages/@tailwindcss-node/src/compile.ts
+++ b/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> {