Fixed ignore flag not disabling the warning for rules defined inside other rules

Author: Andarist

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

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
 

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;

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()
+    })
   })
 })