archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
### 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
This commit is contained in:
hrmny 2024-06-10 16:23:03 +02:00 committed by GitHub
parent d7d5117777
commit 1cb3a0b73d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 128 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
docs/02-app/02-api-reference/05-next-config-js/serverExternalPackages.mdx
View file

@ -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`

1
docs/03-pages/02-api-reference/03-next-config-js/serverExternalPackages.mdx
View file

@ -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`

1
packages/next/src/lib/server-external-packages.json
View file

@ -49,7 +49,6 @@
"sharp",
"shiki",
"sqlite3",
"tailwindcss",
"ts-node",
"typescript",
"vscode-oniguruma",

10
test/e2e/app-dir/tailwind-css/app/layout.tsx Normal file
View file

@ -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>
)
}

63
test/e2e/app-dir/tailwind-css/app/page.tsx Normal file
View file

@ -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>
)
}

6
test/e2e/app-dir/tailwind-css/next.config.js Normal file
View file

@ -0,0 +1,6 @@
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {}
module.exports = nextConfig

6
test/e2e/app-dir/tailwind-css/postcss.config.js Normal file
View file

@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

26
test/e2e/app-dir/tailwind-css/tailwind-css.test.ts Normal file
View file

@ -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()
}
})
})

8
test/e2e/app-dir/tailwind-css/tailwind.config.js Normal file
View file

@ -0,0 +1,8 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./app/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
}

26
test/e2e/postcss-config-cjs/index.test.ts
View file

@ -1,34 +1,18 @@
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')),
},
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
@ -36,9 +20,7 @@ describe('postcss-config-cjs', () => {
.getComputedCss('color')
expect(cssBlue).toBe('rgb(37, 99, 235)')
} finally {
if (browser) {
await browser.close()
}
}
})
})