From ddf08c9e95028930cb731a40288616110d857541 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 20 Oct 2022 17:33:40 +0200
Subject: [PATCH] add test that verifies an odd bug

The story goes like this:

1. add `underline` to html file
  -> css contains `underline` rule
2. add `font-bold` to html file
  -> css contains `underline` and `font-bold`
3. remove `underline` from html file
  -> css still contains `underline` and `font-bold` for performance reasons
4. Save a css file (! RED FLAG)
  -> css contains `font-bold` because we started from scratch
5. add `underline` to html file
  -> css contains `underline` and `font-bold`
6. remove `underline` from html file
  -> css only contains `font-bold`... (UH OH)

This is because the moment we did step 4, every single save in any file created a new context. Every. Single. Time.
---
 .../tailwindcss-cli/tests/integration.test.js | 100 ++++++++++++++++++
 1 file changed, 100 insertions(+)

diff --git a/integrations/tailwindcss-cli/tests/integration.test.js b/integrations/tailwindcss-cli/tests/integration.test.js
index fbfdc6f0db96..d1aeab7513d7 100644
--- a/integrations/tailwindcss-cli/tests/integration.test.js
+++ b/integrations/tailwindcss-cli/tests/integration.test.js
@@ -605,4 +605,104 @@ describe('watcher', () => {
 
     return runningProcess.stop()
   })
+
+  test('classes are generated (and kept) when the index.html file changes (and removed when css/config files are changed)', async () => {
+    let runningProcess = $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css -w')
+
+    // Start with a simple single class
+    await writeInputFile('index.html', html`<div class="font-bold"></div>`)
+    await runningProcess.onStderr(ready)
+    expect(await readOutputFile('main.css')).toIncludeCss(
+      css`
+        .font-bold {
+          font-weight: 700;
+        }
+      `
+    )
+
+    // Add another class
+    await writeInputFile('index.html', html`<div class="underline font-bold"></div>`)
+    await runningProcess.onStderr(ready)
+    expect(await readOutputFile('main.css')).toIncludeCss(
+      css`
+        .font-bold {
+          font-weight: 700;
+        }
+
+        .underline {
+          text-decoration-line: underline;
+        }
+      `
+    )
+
+    // Remove a class, because of performance reasons both classes will still be in the css file
+    await writeInputFile('index.html', html`<div class="font-bold"></div>`)
+    await runningProcess.onStderr(ready)
+    expect(await readOutputFile('main.css')).toIncludeCss(
+      css`
+        .font-bold {
+          font-weight: 700;
+        }
+
+        .underline {
+          text-decoration-line: underline;
+        }
+      `
+    )
+
+    // Save the index.css file, this should trigger a fresh context
+    await writeInputFile(
+      'index.css',
+      css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `
+    )
+    await runningProcess.onStderr(ready)
+
+    // Only 1 class should stay, because we started from scratch
+    expect(await readOutputFile('main.css')).toIncludeCss(
+      css`
+        .font-bold {
+          font-weight: 700;
+        }
+      `
+    )
+
+    // Add another class
+    await writeInputFile('index.html', html`<div class="underline font-bold"></div>`)
+    await runningProcess.onStderr(ready)
+    expect(await readOutputFile('main.css')).toIncludeCss(
+      css`
+        .font-bold {
+          font-weight: 700;
+        }
+
+        .underline {
+          text-decoration-line: underline;
+        }
+      `
+    )
+
+    // Remove a class, because of performance reasons both classes will still be in the css file
+    await writeInputFile('index.html', html`<div class="font-bold"></div>`)
+
+    // If everything goes right, then both classes should still be here (because of the performance
+    // improvement). If we didn't solve the bug where from now on every save is a fresh context
+    // then this only has 1 class. So let's hope there are 2!
+    expect(await readOutputFile('main.css')).toIncludeCss(
+      css`
+        .font-bold {
+          font-weight: 700;
+        }
+
+        .underline {
+          text-decoration-line: underline;
+        }
+      `
+    )
+
+    return runningProcess.stop()
+  })
 })