From b05731c1dd09e584b7916051eaf75927a40cbdc2 Mon Sep 17 00:00:00 2001
From: Tomify <tprats108@gmail.com>
Date: Wed, 20 Dec 2023 18:27:06 -0500
Subject: [PATCH] Allow :global selector around @tailwind

---
 src/lib/detectNesting.js     | 11 ++++++++++-
 tests/detect-nesting.test.js | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/lib/detectNesting.js b/src/lib/detectNesting.js
index 03252e2006bb..c701774ce6c0 100644
--- a/src/lib/detectNesting.js
+++ b/src/lib/detectNesting.js
@@ -6,6 +6,12 @@ function isAtLayer(node) {
   return node.type === 'atrule' && node.name === 'layer'
 }
 
+function isGlobalRoot(node) {
+  if (node.selector !== ':global') return false
+
+  return node.parent && isRoot(node.parent)
+}
+
 export default function (_context) {
   return (root, result) => {
     let found = false
@@ -13,7 +19,10 @@ export default function (_context) {
     root.walkAtRules('tailwind', (node) => {
       if (found) return false
 
-      if (node.parent && !(isRoot(node.parent) || isAtLayer(node.parent))) {
+      if (
+        node.parent &&
+        !(isRoot(node.parent) || isAtLayer(node.parent) || isGlobalRoot(node.parent))
+      ) {
         found = true
         node.warn(
           result,
diff --git a/tests/detect-nesting.test.js b/tests/detect-nesting.test.js
index 08eeacf98464..bc8bbc071595 100644
--- a/tests/detect-nesting.test.js
+++ b/tests/detect-nesting.test.js
@@ -54,6 +54,41 @@ it('should not warn when we detect nested css inside css @layer rules', () => {
   })
 })
 
+it('should not warn when we detect global @layer rules', () => {
+  let config = {
+    content: [{ raw: html`<div class="underline"></div>` }],
+  }
+
+  let input = css`
+    :global {
+      @layer tw-base, tw-components, tw-utilities;
+      @layer tw-utilities {
+        @tailwind utilities;
+      }
+    }
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.messages).toHaveLength(0)
+  })
+})
+
+it('should not warn when we detect global @tailwind at rules', () => {
+  let config = {
+    content: [{ raw: html`<div class="text-center"></div>` }],
+  }
+
+  let input = css`
+    :global {
+      @tailwind utilities;
+    }
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.messages).toHaveLength(0)
+  })
+})
+
 it('should warn when we detect namespaced @tailwind at rules', () => {
   let config = {
     content: [{ raw: html`<div class="text-center"></div>` }],