From 20456efae4e03a11b9210b8cf56aedab402a5542 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 4 Aug 2022 14:24:17 -0400
Subject: [PATCH] Fix `@apply` of user utilities when negative and non-negative
 versions both exist (#9027)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix application of rules with multiple matches of differing selectors

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

* Update changelog
---
 CHANGELOG.md                  |  1 +
 src/lib/expandApplyAtRules.js |  6 ++++++
 tests/apply.test.js           | 36 +++++++++++++++++++++++++++++++++++
 3 files changed, 43 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f73d1a950..0ef5bb4f6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Don’t prefix classes within reused arbitrary variants ([#8992](https://github.com/tailwindlabs/tailwindcss/pull/8992))
 - Fix usage of alpha values inside single-named colors that are functions ([#9008](https://github.com/tailwindlabs/tailwindcss/pull/9008))
+- Fix `@apply` of user utilities when negative and non-negative versions both exist ([#9027](https://github.com/tailwindlabs/tailwindcss/pull/9027))
 
 ### Changed
 
diff --git a/src/lib/expandApplyAtRules.js b/src/lib/expandApplyAtRules.js
index f5e84a318..7088337ab 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 6040aad22..b1a2ac461 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;
+    }
+  `)
+})