Fix styled-jsx types when package is not hoisted (#37902)

This ensures we expose the `styled-jsx` types correctly even when the package is not hoisted from next's `node_modules` e.g. when using `pnpm`. We had an existing test that covered this although it installed `styled-jsx` at the top-level as a workaround so the test has been updated to remove this workaround. 

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

Fixes: #37828 (comment)

examples/with-react-intl/package.json

@@ -20,7 +20,6 @@
     "@formatjs/cli": "4.2.31",
     "@types/node": "16.6.2",
     "@types/react": "17.0.19",
-    "@types/styled-jsx": "3.4.4",
     "babel-plugin-formatjs": "10.3.5",
     "eslint-plugin-formatjs": "2.17.4",
     "typescript": "4.3.5"

packages/next/lib/typescript/writeAppTypeDeclarations.ts

@@ -30,6 +30,8 @@ export async function writeAppTypeDeclarations(
   const content =
     '/// <reference types="next" />' +
     eol +
+    '/// <reference types="next/dist/styled-jsx-types/global" />' +
+    eol +
     (imageImportsEnabled
       ? '/// <reference types="next/image-types/global" />' + eol
       : '') +

packages/next/taskfile.js

@@ -40,6 +40,38 @@ export async function copy_regenerator_runtime(task, opts) {
     .target('compiled/regenerator-runtime')
 }
 
+// eslint-disable-next-line camelcase
+export async function copy_styled_jsx_types(task, opts) {
+  // we copy the styled-jsx types so that we can reference them
+  // in the next-env.d.ts file so it doesn't matter if the styled-jsx
+  // package is hoisted out of Next.js' node_modules or not
+  const styledJsxPath = dirname(require.resolve('styled-jsx/package.json'))
+  const typeFiles = glob.sync('*.d.ts', { cwd: styledJsxPath })
+  const outputDir = join(__dirname, 'dist/styled-jsx-types')
+  let typeReferences = ``
+
+  await fs.ensureDir(outputDir)
+
+  for (const file of typeFiles) {
+    const fileNoExt = file.replace(/\.d\.ts/, '')
+    const content = await fs.readFile(join(styledJsxPath, file), 'utf8')
+    const exportsIndex = content.indexOf('export')
+
+    await fs.writeFile(
+      join(outputDir, file),
+      `${content.substring(0, exportsIndex)}\n` +
+        `declare module 'styled-jsx${
+          file === 'index.d.ts' ? '' : '/' + fileNoExt
+        }' {
+        ${content.substring(exportsIndex)}
+      }`
+    )
+    typeReferences += `/// <reference types="./${fileNoExt}" />\n`
+  }
+
+  await fs.writeFile(join(outputDir, 'global.d.ts'), typeReferences)
+}
+
 const externals = {
   // don't bundle caniuse-lite data so users can
   // update it manually
@@ -1803,6 +1835,7 @@ export async function compile(task, opts) {
       // we compile this each time so that fresh runtime data is pulled
       // before each publish
       'ncc_amp_optimizer',
+      'copy_styled_jsx_types',
     ],
     opts
   )

packages/next/types/index.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="node" />
 /// <reference types="react" />
 /// <reference types="react-dom" />
-/// <reference types="styled-jsx" />
 
 import React from 'react'
 import { ParsedUrlQuery } from 'querystring'

test/production/typescript-basic/index.test.ts

@@ -28,7 +28,6 @@ describe('TypeScript basic', () => {
         '@types/node': 'latest',
         '@types/react': 'latest',
         '@types/react-dom': 'latest',
-        'styled-jsx': 'latest',
       },
     })
   })

test/unit/write-app-declarations.test.ts

@@ -16,6 +16,8 @@ describe('find config', () => {
     const content =
       '/// <reference types="next" />' +
       eol +
+      '/// <reference types="next/dist/styled-jsx-types/global" />' +
+      eol +
       (imageImportsEnabled
         ? '/// <reference types="next/image-types/global" />' + eol
         : '') +
@@ -37,6 +39,8 @@ describe('find config', () => {
     const content =
       '/// <reference types="next" />' +
       eol +
+      '/// <reference types="next/dist/styled-jsx-types/global" />' +
+      eol +
       (imageImportsEnabled
         ? '/// <reference types="next/image-types/global" />' + eol
         : '') +
@@ -58,6 +62,8 @@ describe('find config', () => {
     const content =
       '/// <reference types="next" />' +
       eol +
+      '/// <reference types="next/dist/styled-jsx-types/global" />' +
+      eol +
       (imageImportsEnabled
         ? '/// <reference types="next/image-types/global" />' + eol
         : '') +