Fixed an issue with global styles containing pseudo selectors in at-r…

…ules not being able to be inserted (#2180)

.changeset/swift-hotels-knock.md

@@ -0,0 +1,7 @@
+---
+'@emotion/cache': patch
+'@emotion/css': patch
+'@emotion/react': patch
+---
+
+Fixed an issue with global styles containing pseudo selectors in at-rules not being able to be inserted.

packages/cache/src/stylis-plugins.js

@@ -73,6 +73,7 @@ export let compat = element => {
 
   while (parent.type !== 'rule') {
     parent = parent.parent
+    if (!parent) return
   }
 
   // short-circuit for the simplest case

packages/css/test/__snapshots__/inject-global.test.js.snap

@@ -29,6 +29,14 @@ exports[`injectGlobal nested interpolated media query 1`] = `
 }"
 `;
 
+exports[`injectGlobal pseudo in @media 1`] = `
+"@media (min-width: 300px) {
+  .header:after {
+    content: '';
+  }
+}"
+`;
+
 exports[`injectGlobal random interpolation 1`] = `
 ".css-1002tid-cls {
   display: -webkit-box;

packages/css/test/inject-global.test.js

@@ -64,4 +64,15 @@ describe('injectGlobal', () => {
     `
     expect(sheet).toMatchSnapshot()
   })
+  test('pseudo in @media', () => {
+    injectGlobal`
+      @media (min-width: 300px) {
+        .header:after {
+          content: '';
+        }
+      }
+    `
+
+    expect(sheet).toMatchSnapshot()
+  })
 })