From f4ea2cf77d77e71bb0197ec388aa7c1e7e96c084 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 1 Jul 2021 12:34:11 +0200
Subject: [PATCH] Cleanup leftover layers (#4853)

* update snapshots with correct version

* add test that verifies @layer is removed correctly

* cleanup leftover `@layer` nodes
---
 .../tailwindcss-cli/tests/cli.test.js         |  4 +-
 .../tailwindcss-cli/tests/integration.test.js | 55 +++++++++++++++++++
 src/jit/lib/expandTailwindAtRules.js          |  7 +++
 3 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/integrations/tailwindcss-cli/tests/cli.test.js b/integrations/tailwindcss-cli/tests/cli.test.js
index bf76f461baa4..822cec6b5bd0 100644
--- a/integrations/tailwindcss-cli/tests/cli.test.js
+++ b/integrations/tailwindcss-cli/tests/cli.test.js
@@ -258,7 +258,7 @@ describe('Build command', () => {
 
     expect(combined).toMatchInlineSnapshot(`
       "
-      tailwindcss v2.1.2
+      tailwindcss v2.2.4
 
       Usage:
          tailwindcss build [options]
@@ -348,7 +348,7 @@ describe('Init command', () => {
 
     expect(combined).toMatchInlineSnapshot(`
       "
-      tailwindcss v2.1.2
+      tailwindcss v2.2.4
 
       Usage:
          tailwindcss init [options]
diff --git a/integrations/tailwindcss-cli/tests/integration.test.js b/integrations/tailwindcss-cli/tests/integration.test.js
index 5a735fface7f..1ba8d0f07e8c 100644
--- a/integrations/tailwindcss-cli/tests/integration.test.js
+++ b/integrations/tailwindcss-cli/tests/integration.test.js
@@ -132,6 +132,61 @@ describe('watcher', () => {
     return runningProcess.stop()
   })
 
+  test('@layers are replaced and cleaned when the html file changes', async () => {
+    await writeInputFile('index.html', html`<div class="font-bold"></div>`)
+    await writeInputFile(
+      'index.css',
+      css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+
+        @layer base {
+          html {
+            scroll-behavior: smooth;
+          }
+        }
+      `
+    )
+
+    let runningProcess = $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css -w')
+
+    await waitForOutputFileCreation('main.css')
+
+    expect(await readOutputFile('main.css')).toIncludeCss(
+      css`
+        .font-bold {
+          font-weight: 700;
+        }
+      `
+    )
+
+    await waitForOutputFileChange('main.css', async () => {
+      await appendToInputFile('index.html', html`<div class="font-normal"></div>`)
+    })
+
+    expect(await readOutputFile('main.css')).not.toIncludeCss(css`
+      @layer base {
+        html {
+          scroll-behavior: smooth;
+        }
+      }
+    `)
+
+    expect(await readOutputFile('main.css')).toIncludeCss(
+      css`
+        .font-bold {
+          font-weight: 700;
+        }
+        .font-normal {
+          font-weight: 400;
+        }
+      `
+    )
+
+    return runningProcess.stop()
+  })
+
   test('classes are generated when the tailwind.config.js file changes', async () => {
     await writeInputFile('index.html', html`<div class="font-bold md:font-medium"></div>`)
 
diff --git a/src/jit/lib/expandTailwindAtRules.js b/src/jit/lib/expandTailwindAtRules.js
index c7db3a1e6ee5..3473866d9616 100644
--- a/src/jit/lib/expandTailwindAtRules.js
+++ b/src/jit/lib/expandTailwindAtRules.js
@@ -238,5 +238,12 @@ export default function expandTailwindAtRules(context) {
 
     // Clear the cache for the changed files
     context.changedContent = []
+
+    // Cleanup any leftover @layer atrules
+    root.walkAtRules('layer', (rule) => {
+      if (Object.keys(layerNodes).includes(rule.params)) {
+        rule.remove()
+      }
+    })
   }
 }