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.

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