From 82e0acebe03588e973734cb4e6a2ac76d2c5fe30 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Mon, 2 Oct 2023 16:58:54 +0200
Subject: [PATCH] move failing test to dedicated failing test

---
 tests/arbitrary-values.test.css  | 10 ----------
 tests/arbitrary-values.test.html |  4 ----
 tests/arbitrary-values.test.js   | 29 +++++++++++++++++++++++++++++
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css
index ca434ed13..e7da7b718 100644
--- a/tests/arbitrary-values.test.css
+++ b/tests/arbitrary-values.test.css
@@ -175,16 +175,6 @@
 .w-\[var\(--width\,calc\(100\%\+1rem\)\)\] {
   width: var(--width, calc(100% + 1rem));
 }
-.w-\[\{\{\}\}\] {
-  width: {
-     {
-    }
-  }
-}
-.w-\[\{\}\] {
-  width: {
-  }
-}
 .min-w-\[3\.23rem\] {
   min-width: 3.23rem;
 }
diff --git a/tests/arbitrary-values.test.html b/tests/arbitrary-values.test.html
index 5dd6fab84..440a98d26 100644
--- a/tests/arbitrary-values.test.html
+++ b/tests/arbitrary-values.test.html
@@ -368,10 +368,6 @@
 <!-- INVALID -->
 <div class="grid-cols-[[linename],1fr,auto]"></div>
 <!-- VALID -->
-<div class="w-[{}]"></div>
-<!-- VALID -->
-<div class="w-[{{}}]"></div>
-<!-- VALID -->
 <div class="w-[[]]"></div>
 <!-- VALID -->
 <div class="w-[[[]]]"></div>
diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js
index 8fd0fc7df..668931f0b 100644
--- a/tests/arbitrary-values.test.js
+++ b/tests/arbitrary-values.test.js
@@ -14,6 +14,35 @@ test('arbitrary values', () => {
   })
 })
 
+// TODO: Currently Lightning CSS will throw an error when trying to print the invalid CSS, whereas
+// before it generated invalid CSS without throwing an error.
+//
+// In  perfect world, we would not generate anything, and potentially show a warning.
+test.skip('arbitrary values that result in invalid CSS should not be generated', () => {
+  let config = {
+    content: [
+      {
+        raw: html`<div class="w-[{}] w-[{{}}]"></div>`,
+      },
+    ],
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css`
+      .w-\[\{\{\}\}\] {
+        width: {
+           {
+          }
+        }
+      }
+      .w-\[\{\}\] {
+        width: {
+        }
+      }
+    `)
+  })
+})
+
 test('should only detect classes with arbitrary values that are properly terminated after the arbitrary value', () => {
   let config = {
     content: [