fix(turbopack): remove tailwindcss from default external packages (#66706)
### 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:
parent
d7d5117777
commit
1cb3a0b73d
10 changed files with 128 additions and 30 deletions
|
@ -68,7 +68,6 @@ Next.js includes a [short list of popular packages](https://github.com/vercel/ne
|
||||||
- `sharp`
|
- `sharp`
|
||||||
- `shiki`
|
- `shiki`
|
||||||
- `sqlite3`
|
- `sqlite3`
|
||||||
- `tailwindcss`
|
|
||||||
- `ts-node`
|
- `ts-node`
|
||||||
- `typescript`
|
- `typescript`
|
||||||
- `vscode-oniguruma`
|
- `vscode-oniguruma`
|
||||||
|
|
|
@ -68,7 +68,6 @@ Next.js includes a [short list of popular packages](https://github.com/vercel/ne
|
||||||
- `sharp`
|
- `sharp`
|
||||||
- `shiki`
|
- `shiki`
|
||||||
- `sqlite3`
|
- `sqlite3`
|
||||||
- `tailwindcss`
|
|
||||||
- `ts-node`
|
- `ts-node`
|
||||||
- `typescript`
|
- `typescript`
|
||||||
- `vscode-oniguruma`
|
- `vscode-oniguruma`
|
||||||
|
|
|
@ -49,7 +49,6 @@
|
||||||
"sharp",
|
"sharp",
|
||||||
"shiki",
|
"shiki",
|
||||||
"sqlite3",
|
"sqlite3",
|
||||||
"tailwindcss",
|
|
||||||
"ts-node",
|
"ts-node",
|
||||||
"typescript",
|
"typescript",
|
||||||
"vscode-oniguruma",
|
"vscode-oniguruma",
|
||||||
|
|
10
test/e2e/app-dir/tailwind-css/app/layout.tsx
Normal file
10
test/e2e/app-dir/tailwind-css/app/layout.tsx
Normal 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
63
test/e2e/app-dir/tailwind-css/app/page.tsx
Normal 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 →</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 →</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 →</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 →</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
6
test/e2e/app-dir/tailwind-css/next.config.js
Normal 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
6
test/e2e/app-dir/tailwind-css/postcss.config.js
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
26
test/e2e/app-dir/tailwind-css/tailwind-css.test.ts
Normal file
26
test/e2e/app-dir/tailwind-css/tailwind-css.test.ts
Normal 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
8
test/e2e/app-dir/tailwind-css/tailwind.config.js
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: ['./app/**/*.{js,ts,jsx,tsx}'],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
|
@ -1,34 +1,18 @@
|
||||||
import { createNext, FileRef } from 'e2e-utils'
|
import { FileRef, nextTestSetup } from 'e2e-utils'
|
||||||
import { join } from 'path'
|
import { join } from 'path'
|
||||||
import { NextInstance } from 'e2e-utils'
|
|
||||||
import webdriver from 'next-webdriver'
|
|
||||||
|
|
||||||
describe('postcss-config-cjs', () => {
|
describe('postcss-config-cjs', () => {
|
||||||
let next: NextInstance
|
const { next } = nextTestSetup({
|
||||||
|
files: new FileRef(join(__dirname, 'app')),
|
||||||
beforeAll(async () => {
|
dependencies: {
|
||||||
next = await createNext({
|
tailwindcss: '2.2.19',
|
||||||
files: {
|
postcss: '8.3.5',
|
||||||
'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',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
afterAll(() => next.destroy())
|
|
||||||
|
|
||||||
it('works with postcss.config.cjs files', async () => {
|
it('works with postcss.config.cjs files', async () => {
|
||||||
let browser
|
let browser = await next.browser('/')
|
||||||
try {
|
try {
|
||||||
browser = await webdriver(next.url, '/')
|
|
||||||
const text = await browser.elementByCss('.text-6xl').text()
|
const text = await browser.elementByCss('.text-6xl').text()
|
||||||
expect(text).toMatch(/Welcome to/)
|
expect(text).toMatch(/Welcome to/)
|
||||||
const cssBlue = await browser
|
const cssBlue = await browser
|
||||||
|
@ -36,9 +20,7 @@ describe('postcss-config-cjs', () => {
|
||||||
.getComputedCss('color')
|
.getComputedCss('color')
|
||||||
expect(cssBlue).toBe('rgb(37, 99, 235)')
|
expect(cssBlue).toBe('rgb(37, 99, 235)')
|
||||||
} finally {
|
} finally {
|
||||||
if (browser) {
|
await browser.close()
|
||||||
await browser.close()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in a new issue