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

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))
 
 ## [3.3.3] - 2023-07-13
 

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

@@ -2470,4 +2470,56 @@ crosscheck(({ stable, oxide }) => {
   // 3. They all use invalid selector syntax that Lightning CSS does not support
   // It may be enough for Oxide to not support it at all
   oxide.test.todo('::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;
+      }
+    `)
+  })
 })