fix(turbopack): remove tailwindcss from default external packages (#6…

…6706) ### Why? Importing `tailwind/tailwind.css` is not possible right now with turbopack, and there's no reason it needs to be marked as external. ### How? Closes PACK-3013 Fixes #64837
vercel · Jun 10, 2024 · 1cb3a0b · 1cb3a0b
1 parent d7d5117
commit 1cb3a0b
Show file tree

Hide file tree

Showing 10 changed files with 128 additions and 30 deletions.
diff --git a/docs/02-app/02-api-reference/05-next-config-js/serverExternalPackages.mdx b/docs/02-app/02-api-reference/05-next-config-js/serverExternalPackages.mdx
@@ -68,7 +68,6 @@ Next.js includes a [short list of popular packages](https://github.com/vercel/ne
 - `sharp`
 - `shiki`
 - `sqlite3`
-- `tailwindcss`
 - `ts-node`
 - `typescript`
 - `vscode-oniguruma`

diff --git a/docs/03-pages/02-api-reference/03-next-config-js/serverExternalPackages.mdx b/docs/03-pages/02-api-reference/03-next-config-js/serverExternalPackages.mdx
@@ -68,7 +68,6 @@ Next.js includes a [short list of popular packages](https://github.com/vercel/ne
 - `sharp`
 - `shiki`
 - `sqlite3`
-- `tailwindcss`
 - `ts-node`
 - `typescript`
 - `vscode-oniguruma`

diff --git a/packages/next/src/lib/server-external-packages.json b/packages/next/src/lib/server-external-packages.json
@@ -49,7 +49,6 @@
   "sharp",
   "shiki",
   "sqlite3",
-  "tailwindcss",
   "ts-node",
   "typescript",
   "vscode-oniguruma",

diff --git a/test/e2e/app-dir/tailwind-css/app/layout.tsx b/test/e2e/app-dir/tailwind-css/app/layout.tsx
@@ -0,0 +1,10 @@
+import 'tailwindcss/tailwind.css'
+import { ReactNode } from 'react'
+
+export default function Root({ children }: { children: ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/tailwind-css/app/page.tsx b/test/e2e/app-dir/tailwind-css/app/page.tsx
@@ -0,0 +1,63 @@
+export default function HomePage() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen py-2">
+      <main className="flex flex-col items-center justify-center w-full flex-1 px-20 text-center">
+        <h1 className="text-blue-600 text-6xl font-bold">
+          Welcome to{' '}
+          <a className="text-blue-600" href="https://nextjs.org" id="test-link">
+            Next.js!
+          </a>
+        </h1>
+
+        <p className="mt-3 text-2xl">
+          Get started by editing{' '}
+          <code className="p-3 font-mono text-lg bg-gray-100 rounded-md">
+            pages/index.js
+          </code>
+        </p>
+
+        <div className="flex flex-wrap items-center justify-around max-w-4xl mt-6 sm:w-full">
+          <a
+            href="https://nextjs.org/docs"
+            className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600"
+          >
+            <h3 className="text-2xl font-bold">Documentation &rarr;</h3>
+            <p className="mt-4 text-xl">
+              Find in-depth information about Next.js features and API.
+            </p>
+          </a>
+
+          <a
+            href="https://nextjs.org/learn"
+            className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600"
+          >
+            <h3 className="text-2xl font-bold">Learn &rarr;</h3>
+            <p className="mt-4 text-xl">
+              Learn about Next.js in an interactive course with quizzes!
+            </p>
+          </a>
+
+          <a
+            href="https://github.com/vercel/next.js/tree/canary/examples"
+            className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600"
+          >
+            <h3 className="text-2xl font-bold">Examples &rarr;</h3>
+            <p className="mt-4 text-xl">
+              Discover and deploy boilerplate example Next.js projects.
+            </p>
+          </a>
+
+          <a
+            href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600"
+          >
+            <h3 className="text-2xl font-bold">Deploy &rarr;</h3>
+            <p className="mt-4 text-xl">
+              Instantly deploy your Next.js site to a public URL with Vercel.
+            </p>
+          </a>
+        </div>
+      </main>
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/tailwind-css/next.config.js b/test/e2e/app-dir/tailwind-css/next.config.js
@@ -0,0 +1,6 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {}
+
+module.exports = nextConfig
diff --git a/test/e2e/app-dir/tailwind-css/postcss.config.js b/test/e2e/app-dir/tailwind-css/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/test/e2e/app-dir/tailwind-css/tailwind-css.test.ts b/test/e2e/app-dir/tailwind-css/tailwind-css.test.ts
@@ -0,0 +1,26 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('tailwind-css', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+    dependencies: {
+      autoprefixer: '10.4.19',
+      postcss: '8.4.38',
+      tailwindcss: '3.4.4',
+    },
+  })
+
+  it('works when importing tailwind/tailwind.css', async () => {
+    const browser = await next.browser('/')
+    try {
+      const text = await browser.elementByCss('.text-6xl').text()
+      expect(text).toMatch(/Welcome to/)
+      const cssBlue = await browser
+        .elementByCss('#test-link')
+        .getComputedCss('color')
+      expect(cssBlue).toBe('rgb(37, 99, 235)')
+    } finally {
+      await browser.close()
+    }
+  })
+})
diff --git a/test/e2e/app-dir/tailwind-css/tailwind.config.js b/test/e2e/app-dir/tailwind-css/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./app/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/test/e2e/postcss-config-cjs/index.test.ts b/test/e2e/postcss-config-cjs/index.test.ts
@@ -1,44 +1,26 @@
-import { createNext, FileRef } from 'e2e-utils'
+import { FileRef, nextTestSetup } from 'e2e-utils'
 import { join } from 'path'
-import { NextInstance } from 'e2e-utils'
-import webdriver from 'next-webdriver'
 
 describe('postcss-config-cjs', () => {
-  let next: NextInstance
-
-  beforeAll(async () => {
-    next = await createNext({
-      files: {
-        'postcss.config.cjs': new FileRef(
-          join(__dirname, 'app/postcss.config.cjs')
-        ),
-        'tailwind.config.cjs': new FileRef(
-          join(__dirname, 'app/tailwind.config.cjs')
-        ),
-        pages: new FileRef(join(__dirname, 'app/pages')),
-      },
-      dependencies: {
-        tailwindcss: '2.2.19',
-        postcss: '8.3.5',
-      },
-    })
+  const { next } = nextTestSetup({
+    files: new FileRef(join(__dirname, 'app')),
+    dependencies: {
+      tailwindcss: '2.2.19',
+      postcss: '8.3.5',
+    },
   })
-  afterAll(() => next.destroy())
 
   it('works with postcss.config.cjs files', async () => {
-    let browser
+    let browser = await next.browser('/')
     try {
-      browser = await webdriver(next.url, '/')
       const text = await browser.elementByCss('.text-6xl').text()
       expect(text).toMatch(/Welcome to/)
       const cssBlue = await browser
         .elementByCss('#test-link')
         .getComputedCss('color')
       expect(cssBlue).toBe('rgb(37, 99, 235)')
     } finally {
-      if (browser) {
-        await browser.close()
-      }
+      await browser.close()
     }
   })
 })