From b02be0bae0048df4b3a8567436bc31059b00d213 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Wed, 5 Apr 2023 09:48:59 +0200
Subject: [PATCH] Fixed ignore flag not disabling the warning for rules defined
 inside other rules (#3019)

---
 .changeset/rare-maps-juggle.md                |  5 +++
 packages/cache/src/stylis-plugins.js          |  6 +--
 .../__tests__/__snapshots__/warnings.js.snap  | 20 +++++++++
 packages/react/__tests__/warnings.js          | 44 +++++++++++++++++++
 4 files changed, 72 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/rare-maps-juggle.md

diff --git a/.changeset/rare-maps-juggle.md b/.changeset/rare-maps-juggle.md
new file mode 100644
index 000000000..1bc1825e0
--- /dev/null
+++ b/.changeset/rare-maps-juggle.md
@@ -0,0 +1,5 @@
+---
+'@emotion/cache': patch
+---
+
+Fixed `/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */` not disabling the warning for rules defined inside other rules.
diff --git a/packages/cache/src/stylis-plugins.js b/packages/cache/src/stylis-plugins.js
index e0fc8f243..1c1bbb821 100644
--- a/packages/cache/src/stylis-plugins.js
+++ b/packages/cache/src/stylis-plugins.js
@@ -165,8 +165,8 @@ export let createUnsafeSelectorsAlarm = cache => (element, index, children) => {
   )
 
   if (unsafePseudoClasses) {
-    const isNested = element.parent === children[0]
-    // in nested rules comments become children of the "auto-inserted" rule
+    const isNested = !!element.parent
+    // in nested rules comments become children of the "auto-inserted" rule and that's always the `element.parent`
     //
     // considering this input:
     // .a {
@@ -182,7 +182,7 @@ export let createUnsafeSelectorsAlarm = cache => (element, index, children) => {
     //   .b {}
     // }
     const commentContainer = isNested
-      ? children[0].children
+      ? element.parent.children
       : // global rule at the root level
         children
 
diff --git a/packages/react/__tests__/__snapshots__/warnings.js.snap b/packages/react/__tests__/__snapshots__/warnings.js.snap
index 3a8debc49..eca2e7bdc 100644
--- a/packages/react/__tests__/__snapshots__/warnings.js.snap
+++ b/packages/react/__tests__/__snapshots__/warnings.js.snap
@@ -35,6 +35,16 @@ exports[`global with css prop 1`] = `null`;
 
 exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ does not warn when using the flag on a global rule 1`] = `null`;
 
+exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ does not warn when using the flag on a rule that is defined in another one 1`] = `
+.emotion-0 div span:first-child {
+  border-bottom-left-radius: 0;
+}
+
+<div
+  className="emotion-0"
+/>
+`;
+
 exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ does not warn when using the flag on the rule that follows a declaration 1`] = `
 .emotion-0 {
   color: hotpink;
@@ -93,6 +103,16 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 
 exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ does warn when not using the flag on a global rule 1`] = `null`;
 
+exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ does warn when not using the flag on a rule that is defined in another one 1`] = `
+.emotion-0 div span:first-child {
+  border-bottom-left-radius: 0;
+}
+
+<div
+  className="emotion-0"
+/>
+`;
+
 exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ does warn when not using the flag on the rule that follows a declaration 1`] = `
 .emotion-0 {
   color: hotpink;
diff --git a/packages/react/__tests__/warnings.js b/packages/react/__tests__/warnings.js
index 782c6257a..5af566acc 100644
--- a/packages/react/__tests__/warnings.js
+++ b/packages/react/__tests__/warnings.js
@@ -343,6 +343,50 @@ describe('unsafe pseudo classes', () => {
       ).toMatchSnapshot()
       expect(console.error).not.toBeCalled()
     })
+
+    test('does warn when not using the flag on a rule that is defined in another one', () => {
+      expect(
+        renderer
+          .create(
+            <div
+              css={css`
+                div {
+                  span:first-child {
+                    border-bottom-left-radius: 0;
+                  }
+                }
+              `}
+            />
+          )
+          .toJSON()
+      ).toMatchSnapshot()
+      expect((console.error: any).mock.calls).toMatchInlineSnapshot(`
+        [
+          [
+            "The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type".",
+          ],
+        ]
+      `)
+    })
+
+    test('does not warn when using the flag on a rule that is defined in another one', () => {
+      expect(
+        renderer
+          .create(
+            <div
+              css={css`
+                div {
+                  span:first-child${ignoreSsrFlag} {
+                    border-bottom-left-radius: 0;
+                  }
+                }
+              `}
+            />
+          )
+          .toJSON()
+      ).toMatchSnapshot()
+      expect(console.error).not.toBeCalled()
+    })
   })
 })