From 57720aa895f61e7f1c7496b43d3ae0e4c92b705d Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 4 Aug 2022 14:16:58 -0400
Subject: [PATCH] Fix application of rules with multiple matches of differing
 selectors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`-foo-1` and `foo-1` are both matches for the class `-foo-1` but `@apply` only wants the first one. It would remove the second one and cause an error because it’s an entirely separate match that had it’s only rule removed.
---
 src/lib/expandApplyAtRules.js |  6 ++++++
 tests/apply.test.js           | 36 +++++++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+)

diff --git a/src/lib/expandApplyAtRules.js b/src/lib/expandApplyAtRules.js
index f5e84a318147..7088337abbeb 100644
--- a/src/lib/expandApplyAtRules.js
+++ b/src/lib/expandApplyAtRules.js
@@ -499,6 +499,12 @@ function processApply(root, context, localCache) {
           })
         }
 
+        // It could be that the node we were inserted was removed because the class didn't match
+        // If that was the *only* rule in the parent, then we have nothing add so we skip it
+        if (!root.nodes[0]) {
+          continue
+        }
+
         // Insert it
         siblings.push([
           // Ensure that when we are sorting, that we take the layer order into account
diff --git a/tests/apply.test.js b/tests/apply.test.js
index 6040aad22c38..b1a2ac461d2f 100644
--- a/tests/apply.test.js
+++ b/tests/apply.test.js
@@ -1548,3 +1548,39 @@ it('apply + user CSS + selector variants (like group) + important selector (2)',
     }
   `)
 })
+
+it('can apply user utilities that start with a dash', async () => {
+  let config = {
+    content: [{ raw: html`<div class="foo-1 -foo-1 new-class"></div>` }],
+    plugins: [],
+  }
+
+  let input = css`
+    @tailwind utilities;
+    @layer utilities {
+      .foo-1 {
+        margin: 10px;
+      }
+      .-foo-1 {
+        margin: -15px;
+      }
+      .new-class {
+        @apply -foo-1;
+      }
+    }
+  `
+
+  let result = await run(input, config)
+
+  expect(result.css).toMatchFormattedCss(css`
+    .foo-1 {
+      margin: 10px;
+    }
+    .-foo-1 {
+      margin: -15px;
+    }
+    .new-class {
+      margin: -15px;
+    }
+  `)
+})