Merge branch 'main' into main

Author: jeremy-davis-sonarsource

packages/cache/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @emotion/cache
 
+## 11.10.7
+
+### Patch Changes
+
+- [#3019](https://github.com/emotion-js/emotion/pull/3019) [`b02be0ba`](https://github.com/emotion-js/emotion/commit/b02be0bae0048df4b3a8567436bc31059b00d213) Thanks [@Andarist](https://github.com/Andarist)! - 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.
+
 ## 11.10.5
 
 ### Patch Changes

packages/cache/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emotion/cache",
-  "version": "11.10.5",
+  "version": "11.10.7",
   "description": "emotion's cache",
   "main": "dist/emotion-cache.cjs.js",
   "module": "dist/emotion-cache.esm.js",

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