Add ignore flag for ssr unreliable selectors warning

- Update warning message to communicate the ability to ignore

Co-Authored-By: Brent Ertz <[email protected]>

packages/cache/src/index.js

@@ -201,21 +201,29 @@ let createCache = (options?: Options): EmotionCache => {
 
     stylis.use((context, content, selectors) => {
       switch (context) {
-        case 2: {
-          for (let i = 0, len = selectors.length; len > i; i++) {
-            // :last-child isn't included here since it's safe
-            // because a style element will never be the last element
-            let match = selectors[i].match(/:(first|nth|nth-last)-child/)
-            if (match !== null) {
-              console.error(
-                `The pseudo class "${
-                  match[0]
-                }" is potentially unsafe when doing server-side rendering. Try changing it to "${
-                  match[1]
-                }-of-type"`
+        case -1: {
+          const flag = 'emotion-dangerously-disable-ssr-unsafe-selector-warning'
+          const unsafePseudoClasses = content.match(
+            /(:first|:nth|:nth-last)-child/g
+          )
+
+          if (unsafePseudoClasses) {
+            unsafePseudoClasses.forEach(unsafePseudoClass => {
+              const ignoreRegExp = new RegExp(
+                `${unsafePseudoClass}(\\(\\d\\))? \\/\\* ${flag} \\*\\/`
               )
-            }
+              const ignore = ignoreRegExp.test(content)
+
+              if (unsafePseudoClass && !ignore) {
+                console.error(
+                  `The pseudo class "${unsafePseudoClass}" is potentially unsafe when doing server-side rendering. Try changing it to "${
+                    unsafePseudoClass.split('-child')[0]
+                  }-of-type". To ignore this warning, append a comment to the pseudo class, e.g. "${unsafePseudoClass} /* ${flag} */".`
+                )
+              }
+            })
           }
+
           break
         }
       }