From bc0f59e5bbe6ebbf2000c5e6454f8f709f83cfdb Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 22 Sep 2022 20:51:42 +0200
Subject: [PATCH] add tests to verify fallback plugins

---
 tests/arbitrary-values.test.css |  6 ++++
 tests/arbitrary-values.test.js  | 55 ++++++++++++++++++++++++++++++---
 2 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css
index df4e216c9d5e..9fff5698b0cf 100644
--- a/tests/arbitrary-values.test.css
+++ b/tests/arbitrary-values.test.css
@@ -652,9 +652,15 @@
 .bg-\[\#0f0_var\(--value\)\] {
   background-color: #0f0 var(--value);
 }
+.bg-\[var\(--value1\)_var\(--value2\)\] {
+  background-color: var(--value1) var(--value2);
+}
 .bg-\[color\:var\(--value1\)_var\(--value2\)\] {
   background-color: var(--value1) var(--value2);
 }
+.bg-\[var\(--value\)\2c var\(--value\)\] {
+  background-color: var(--value), var(--value);
+}
 .bg-opacity-\[0\.11\] {
   --tw-bg-opacity: 0.11;
 }
diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js
index baea4ddef9c5..a4dbf6fe990a 100644
--- a/tests/arbitrary-values.test.js
+++ b/tests/arbitrary-values.test.js
@@ -262,11 +262,58 @@ it('should not convert escaped underscores with spaces', () => {
   })
 })
 
-it('should warn and not generate if arbitrary values are ambiguous', () => {
-  // If we don't protect against this, then `bg-[200px_100px]` would both
-  // generate the background-size as well as the background-position utilities.
+it('should pick the fallback plugin when arbitrary values collide', () => {
   let config = {
-    content: [{ raw: html`<div class="bg-[200px_100px]"></div>` }],
+    content: [
+      {
+        raw: html`
+          <div>
+            <!-- Background color -->
+            <div class="bg-[var(--unknown)]"></div>
+            <!-- Background size -->
+            <div class="bg-[200px_100px]"></div>
+          </div>
+        `,
+      },
+    ],
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css`
+      .bg-\[var\(--unknown\)\] {
+        background-color: var(--unknown);
+      }
+
+      .bg-\[200px_100px\] {
+        background-size: 200px 100px;
+      }
+    `)
+  })
+})
+
+it('should pick the fallback plugin when arbitrary values collide and can not be inferred', () => {
+  let config = {
+    content: [{ raw: html`<div class="bg-[var(--tw-unknown)]"></div>` }],
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css`
+      .bg-\[var\(--tw-unknown\)\] {
+        background-color: var(--tw-unknown);
+      }
+    `)
+  })
+})
+
+it('should warn and not generate if arbitrary values are ambiguous (without fallback)', () => {
+  let config = {
+    content: [{ raw: html`<div class="foo-[200px_100px]"></div>` }],
+    plugins: [
+      function ({ matchUtilities }) {
+        matchUtilities({ foo: (value) => ({ value }) }, { type: ['position'] })
+        matchUtilities({ foo: (value) => ({ value }) }, { type: ['length'] })
+      },
+    ],
   }
 
   return run('@tailwind utilities', config).then((result) => {