Don’t crash when important and parent selectors are equal in @apply (#12112)

* Don’t crash when important and parent selectors are equal in `@apply`

* Update changelog

Author: thecrypticace

CHANGELOG.md

@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Batch reading content files to prevent `too many open files` error ([#12079](https://github.com/tailwindlabs/tailwindcss/pull/12079))
 - Skip over classes inside `:not(…)` when nested in an at-rule ([#12105](https://github.com/tailwindlabs/tailwindcss/pull/12105))
 - Update types to work with `Node16` module resolution ([#12097](https://github.com/tailwindlabs/tailwindcss/pull/12097))
+- Don’t crash when important and parent selectors are equal in `@apply` ([#12112](https://github.com/tailwindlabs/tailwindcss/pull/12112))
 
 ### Added
 

src/lib/expandApplyAtRules.js

@@ -553,6 +553,13 @@ function processApply(root, context, localCache) {
                 ? parent.selector.slice(importantSelector.length)
                 : parent.selector
 
+            // If the selector becomes empty after replacing the important selector
+            // This means that it's the same as the parent selector and we don't want to replace it
+            // Otherwise we'll crash
+            if (parentSelector === '') {
+              parentSelector = parent.selector
+            }
+
             rule.selector = replaceSelector(parentSelector, rule.selector, applyCandidate)
 
             // And then re-add it if it was removed

tests/apply.test.js

@@ -2081,3 +2081,55 @@ test('::ng-deep, ::deep, ::v-deep pseudo elements are left alone', () => {
     `)
   })
 })
+
+test('should not break replacing important selector when the same as the parent selector (pseudo)', async () => {
+  let config = {
+    important: ':root',
+    content: [],
+  }
+
+  let input = css`
+    @tailwind components;
+    @layer components {
+      :root {
+        @apply flex;
+      }
+    }
+  `
+
+  let result = await run(input, config)
+
+  expect(result.css).toMatchFormattedCss(css`
+    :root {
+      display: flex;
+    }
+  `)
+})
+
+test('should not break replacing important selector when the same as the parent selector (class)', async () => {
+  let config = {
+    important: '.foo',
+    content: [
+      {
+        raw: html` <div class="foo"></div> `,
+      },
+    ],
+  }
+
+  let input = css`
+    @tailwind components;
+    @layer components {
+      .foo {
+        @apply flex;
+      }
+    }
+  `
+
+  let result = await run(input, config)
+
+  expect(result.css).toMatchFormattedCss(css`
+    .foo {
+      display: flex;
+    }
+  `)
+})