Use resolveJsId when resolving tailwindcss/package.json (#15041)

This PR uses the `enhanced-resolve` instead of
`createRequire(…).resolve` which improves the usability when running the
upgrade tool locally using Bun.

While testing, we also noticed that it is not possible to use a
`cjs`-only plugin inside of an `esm` project. It was also not possible
to use an `esm`-only plugin inside of a `cjs` project.

# Test plan

We added integration tests in both the CLI (the CLI is an mjs project)
and in the PostCSS (where we can configure a `cjs` and `esm` PostCSS
config) integration tests where we created an `esm` and `cjs` based
project with 4 plugins (`cjs`-only, `esm`-only, and TypeScript based
plugins: `cts`-only and `mts`-only).

integrations/postcss/index.test.ts

@@ -1,7 +1,7 @@
 import dedent from 'dedent'
 import path from 'node:path'
 import { expect } from 'vitest'
-import { candidate, css, html, js, json, test, yaml } from '../utils'
+import { candidate, css, html, js, json, test, ts, yaml } from '../utils'
 
 test(
   'production build (string)',
@@ -315,6 +315,177 @@ test(
   },
 )
 
+test(
+  'module resolution using CJS, ESM, CTS, and MTS',
+  {
+    fs: {
+      'package.json': json`{}`,
+      'pnpm-workspace.yaml': yaml`
+        #
+        packages:
+          - project-cjs
+          - project-esm
+          - plugin-cjs
+          - plugin-esm
+          - plugin-cts
+          - plugin-mts
+      `,
+      'project-cjs/package.json': json`
+        {
+          "type": "commonjs",
+          "dependencies": {
+            "@tailwindcss/postcss": "workspace:^",
+            "plugin-cjs": "workspace:*",
+            "plugin-cts": "workspace:*",
+            "plugin-esm": "workspace:*",
+            "plugin-mts": "workspace:*",
+            "postcss": "^8",
+            "postcss-cli": "^10",
+            "tailwindcss": "workspace:^"
+          }
+        }
+      `,
+      'project-cjs/postcss.config.cjs': js`
+        let tailwindcss = require('@tailwindcss/postcss')
+        module.exports = {
+          plugins: [tailwindcss()],
+        }
+      `,
+      'project-cjs/index.html': html`
+        <div class="cjs esm cts mts"></div>
+      `,
+      'project-cjs/src/index.css': css`
+        @import 'tailwindcss/utilities';
+        @plugin 'plugin-cjs';
+        @plugin 'plugin-esm';
+        @plugin 'plugin-cts';
+        @plugin 'plugin-mts';
+      `,
+
+      'project-esm/package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "@tailwindcss/postcss": "workspace:^",
+            "plugin-cjs": "workspace:*",
+            "plugin-cts": "workspace:*",
+            "plugin-esm": "workspace:*",
+            "plugin-mts": "workspace:*",
+            "postcss": "^8",
+            "postcss-cli": "^10",
+            "tailwindcss": "workspace:^"
+          }
+        }
+      `,
+      'project-esm/postcss.config.mjs': js`
+        import tailwindcss from '@tailwindcss/postcss'
+        export default {
+          plugins: [tailwindcss()],
+        }
+      `,
+      'project-esm/index.html': html`
+        <div class="cjs esm cts mts"></div>
+      `,
+      'project-esm/src/index.css': css`
+        @import 'tailwindcss/utilities';
+        @plugin 'plugin-cjs';
+        @plugin 'plugin-esm';
+        @plugin 'plugin-cts';
+        @plugin 'plugin-mts';
+      `,
+
+      'plugin-cjs/package.json': json`
+        {
+          "name": "plugin-cjs",
+          "type": "commonjs",
+          "exports": {
+            ".": {
+              "require": "./index.cjs"
+            }
+          }
+        }
+      `,
+      'plugin-cjs/index.cjs': js`
+        module.exports = function ({ addUtilities }) {
+          addUtilities({ '.cjs': { content: '"cjs"' } })
+        }
+      `,
+
+      'plugin-esm/package.json': json`
+        {
+          "name": "plugin-esm",
+          "type": "module",
+          "exports": {
+            ".": {
+              "import": "./index.mjs"
+            }
+          }
+        }
+      `,
+      'plugin-esm/index.mjs': js`
+        export default function ({ addUtilities }) {
+          addUtilities({ '.esm': { content: '"esm"' } })
+        }
+      `,
+
+      'plugin-cts/package.json': json`
+        {
+          "name": "plugin-cts",
+          "type": "commonjs",
+          "exports": {
+            ".": {
+              "require": "./index.cts"
+            }
+          }
+        }
+      `,
+      'plugin-cts/index.cts': ts`
+        export default function ({ addUtilities }) {
+          addUtilities({ '.cts': { content: '"cts"' as const } })
+        }
+      `,
+
+      'plugin-mts/package.json': json`
+        {
+          "name": "plugin-mts",
+          "type": "module",
+          "exports": {
+            ".": {
+              "import": "./index.mts"
+            }
+          }
+        }
+      `,
+      'plugin-mts/index.mts': ts`
+        export default function ({ addUtilities }) {
+          addUtilities({ '.mts': { content: '"mts"' as const } })
+        }
+      `,
+    },
+  },
+  async ({ root, fs, exec }) => {
+    await exec(`pnpm postcss src/index.css --output dist/out.css`, {
+      cwd: path.join(root, 'project-cjs'),
+    })
+    await exec(`pnpm postcss src/index.css --output dist/out.css`, {
+      cwd: path.join(root, 'project-esm'),
+    })
+
+    await fs.expectFileToContain('./project-cjs/dist/out.css', [
+      candidate`cjs`,
+      candidate`esm`,
+      candidate`cts`,
+      candidate`mts`,
+    ])
+    await fs.expectFileToContain('./project-esm/dist/out.css', [
+      candidate`cjs`,
+      candidate`esm`,
+      candidate`cts`,
+      candidate`mts`,
+    ])
+  },
+)
+
 test(
   'watch mode',
   {