Cleanup leftover layers (tailwindlabs#4853)

* update snapshots with correct version

* add test that verifies @layer is removed correctly

* cleanup leftover `@layer` nodes

Author: RobinMalfait

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]

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>`)
 

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