Fix @apply of user utilities when negative and non-negative version…

…s both exist (#9027)

* 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

@@ -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
 

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

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;
+    }
+  `)
+})