Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add test for TailwindCSS JIT mode reloading (#32130)
Test for tailwindlabs/tailwindcss#6265 Issue started with #31798 ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `yarn lint`
- Loading branch information
1 parent
56c68db
commit c1a1aa4
Showing
8 changed files
with
8,076 additions
and
8,069 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { join } from 'path' | ||
| import webdriver from 'next-webdriver' | ||
| import { createNext, FileRef } from 'e2e-utils' | ||
| import { NextInstance } from 'test/lib/next-modes/base' | ||
| import { check } from 'next-test-utils' | ||
|
|
||
| describe('TailwindCSS JIT', () => { | ||
| let next: NextInstance | ||
|
|
||
| beforeAll(async () => { | ||
| next = await createNext({ | ||
| files: { | ||
| 'postcss.config.js': new FileRef( | ||
| join(__dirname, 'tailwind-jit/postcss.config.js') | ||
| ), | ||
| 'tailwind.config.js': new FileRef( | ||
| join(__dirname, 'tailwind-jit/tailwind.config.js') | ||
| ), | ||
| pages: new FileRef(join(__dirname, 'tailwind-jit/pages')), | ||
| }, | ||
| dependencies: { | ||
| tailwindcss: '2.2.19', | ||
| postcss: '8.3.5', | ||
| }, | ||
| }) | ||
| }) | ||
| afterAll(() => next.destroy()) | ||
|
|
||
| it('works with JIT enabled', async () => { | ||
| let browser | ||
| try { | ||
| browser = await webdriver(next.appPort, '/') | ||
| 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)') | ||
|
|
||
| const aboutPagePath = join('pages', 'index.js') | ||
|
|
||
| const originalContent = await next.readFile(aboutPagePath) | ||
| const editedContent = originalContent.replace( | ||
| '<a className="text-blue-600" href="https://nextjs.org" id="test-link">', | ||
| '<a className="text-red-600" href="https://nextjs.org" id="test-link">' | ||
| ) | ||
|
|
||
| // change the content | ||
| try { | ||
| await next.patchFile(aboutPagePath, editedContent) | ||
| await check( | ||
| () => browser.elementByCss('#test-link').getComputedCss('color'), | ||
| /rgb\(220, 38, 38\)/ | ||
| ) | ||
| } finally { | ||
| // add the original content | ||
| await next.patchFile(aboutPagePath, originalContent) | ||
| } | ||
| } finally { | ||
| if (browser) { | ||
| await browser.close() | ||
| } | ||
| } | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import 'tailwindcss/tailwind.css' | ||
|
|
||
| function MyApp({ Component, pageProps }) { | ||
| return <Component {...pageProps} /> | ||
| } | ||
|
|
||
| export default MyApp |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| export default function Home() { | ||
| 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-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/master/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> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| // If you want to use other PostCSS plugins, see the following: | ||
| // https://tailwindcss.com/docs/using-with-preprocessors | ||
| module.exports = { | ||
| plugins: { | ||
| tailwindcss: {}, | ||
| }, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| module.exports = { | ||
| mode: 'jit', | ||
| purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], | ||
| darkMode: false, // or 'media' or 'class' | ||
| theme: { | ||
| extend: {}, | ||
| }, | ||
| variants: { | ||
| extend: {}, | ||
| }, | ||
| plugins: [], | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters