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`

packages/next/package.json

@@ -268,7 +268,7 @@
     "webpack-sources1": "npm:[email protected]",
     "webpack-sources3": "npm:[email protected]",
     "webpack4": "npm:[email protected]",
-    "webpack5": "npm:[email protected].4",
+    "webpack5": "npm:[email protected].3",
     "ws": "8.2.3"
   },
   "resolutions": {

test/development/basic/tailwind-jit.test.ts

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

test/development/basic/tailwind-jit/pages/_app.js

@@ -0,0 +1,7 @@
+import 'tailwindcss/tailwind.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

test/development/basic/tailwind-jit/pages/index.js

@@ -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 &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/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 &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>
+  )
+}

test/development/basic/tailwind-jit/postcss.config.js

@@ -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: {},
+  },
+}

test/development/basic/tailwind-jit/tailwind.config.js

@@ -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: [],
+}

yarn.lock

@@ -19884,7 +19884,7 @@ watchpack-chokidar2@^2.0.0:
   dependencies:
     chokidar "^2.1.8"
 
-[email protected], watchpack@^2.3.0:
+[email protected]:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.3.0.tgz#a41bca3da6afaff31e92a433f4c856a0c25ea0c4"
   integrity sha512-MnN0Q1OsvB/GGHETrFeZPQaOelWh/7O+EiFlj8sM9GPjtQkis7k01aAxrg/18kTfoIVcLL+haEVFlXDaSRwKRw==
@@ -19903,6 +19903,14 @@ watchpack@^1.7.4:
     chokidar "^3.4.1"
     watchpack-chokidar2 "^2.0.0"
 
+watchpack@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.2.0.tgz#47d78f5415fe550ecd740f99fe2882323a58b1ce"
+  integrity sha512-up4YAn/XHgZHIxFBVCdlMiWDj6WaLKpwVeGQk2I5thdYxF/KmF0aaz6TfJZ/hfl1h/XlcDr7k1KH7ThDagpFaA==
+  dependencies:
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.1.2"
+
 wcwidth@^1.0.0, wcwidth@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
@@ -19981,11 +19989,16 @@ [email protected]:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-"webpack-sources3@npm:[email protected]", webpack-sources@^3.2.2:
+"webpack-sources3@npm:[email protected]":
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.2.tgz#d88e3741833efec57c4c789b6010db9977545260"
   integrity sha512-cp5qdmHnu5T8wRg2G3vZZHoJPN14aqQ89SyQ11NpGH5zEMDCclt49rzo+MaRazk7/UeILhAI+/sEtcM+7Fr0nw==
 
+webpack-sources@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.2.tgz#d88e3741833efec57c4c789b6010db9977545260"
+  integrity sha512-cp5qdmHnu5T8wRg2G3vZZHoJPN14aqQ89SyQ11NpGH5zEMDCclt49rzo+MaRazk7/UeILhAI+/sEtcM+7Fr0nw==
+
 "webpack4@npm:[email protected]":
   version "4.44.1"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.44.1.tgz#17e69fff9f321b8f117d1fda714edfc0b939cc21"
@@ -20015,10 +20028,10 @@ [email protected]:
     watchpack "^1.7.4"
     webpack-sources "^1.4.1"
 
-"webpack5@npm:[email protected].4":
-  version "5.64.4"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.64.4.tgz#e1454b6a13009f57cc2c78e08416cd674622937b"
-  integrity sha512-LWhqfKjCLoYJLKJY8wk2C3h77i8VyHowG3qYNZiIqD6D0ZS40439S/KVuc/PY48jp2yQmy0mhMknq8cys4jFMw==
+"webpack5@npm:[email protected].3":
+  version "5.64.3"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.64.3.tgz#f4792cc3f8528db2c18375fa2cd269f69e0bf69f"
+  integrity sha512-XF6/IL9Bw2PPQioiR1UYA8Bs4tX3QXJtSelezKECdLFeSFzWoe44zqTzPW5N+xI3fACaRl2/G3sNA4WYHD7Iww==
   dependencies:
     "@types/eslint-scope" "^3.7.0"
     "@types/estree" "^0.0.50"
@@ -20042,7 +20055,7 @@ [email protected]:
     schema-utils "^3.1.0"
     tapable "^2.1.1"
     terser-webpack-plugin "^5.1.3"
-    watchpack "^2.3.0"
+    watchpack "^2.2.0"
     webpack-sources "^3.2.2"
 
 "webpack@link:./node_modules/webpack5":