Test layer updates directly

thecrypticace · thecrypticace · commit db4968d6aff8 · 2022-02-25T10:36:07.000-05:00
diff --git a/tests/context-reuse.test.html b/tests/context-reuse.test.html
@@ -7,5 +7,7 @@
     <title>Title</title>
     <link rel="stylesheet" href="./tailwind.css" />
   </head>
-  <body></body>
+  <body>
+    <div class="only:custom-utility"></div>
+  </body>
 </html>
diff --git a/tests/context-reuse.test.js b/tests/context-reuse.test.js
@@ -87,6 +87,46 @@ it('re-uses the context across multiple files with the same config', async () =>
   expect(sharedState.contextSourcesMap.size).toBe(1)
 })
 
+it('updates layers when any CSS containing @tailwind directives changes', async () => {
+  let result
+
+  // Compile the initial version once
+  let input = css`
+    @tailwind utilities;
+    @layer utilities {
+      .custom-utility {
+        color: orange;
+      }
+    }
+  `
+
+  result = await run(input, configPath, `id=1`)
+
+  expect(result.css).toMatchFormattedCss(css`
+    .only\:custom-utility:only-child {
+      color: orange;
+    }
+  `)
+
+  // Save the file with a change
+  input = css`
+    @tailwind utilities;
+    @layer utilities {
+      .custom-utility {
+        color: blue;
+      }
+    }
+  `
+
+  result = await run(input, configPath, `id=1`)
+
+  expect(result.css).toMatchFormattedCss(css`
+    .only\:custom-utility:only-child {
+      color: blue;
+    }
+  `)
+})
+
 it('invalidates the context when any CSS containing @tailwind directives changes', async () => {
   sharedState.contextInvalidationCount = 0
   sharedState.sourceHashMap.clear()
