Prevent flush from raising error on detached tag (#2447)

* Prevent flush from raising error on detached tag

It prevents `flush()` from raising the following error: `TypeError: tag.parentNode is null`. Such error happens when the `tag` that is being flushed had already been detached from its parent node by a third paryy library, which may be application code or a library that handles the page routing—I'm experiencing this issue with [Turbolinks](https://github.com/turbolinks/turbolinks).

* add test and changeseet

Co-authored-by: Mateusz Burzyński <[email protected]>

Author: mdesantis

.changeset/nasty-gorillas-notice.md

@@ -0,0 +1,5 @@
+---
+'@emotion/sheet': patch
+---
+
+Fixed an issue with `sheet.flush()` crashing if its style elements were already detached by something else.

packages/sheet/__tests__/index.js

@@ -181,4 +181,16 @@ describe('StyleSheet', () => {
     sheet.flush()
     head.removeChild(otherStyle)
   })
+
+  it('should not crash when flushing when styles are already detached', () => {
+    const head = safeQuerySelector('head')
+
+    const sheet = new StyleSheet(defaultOptions)
+
+    sheet.insert(rule)
+
+    head.innerHTML = ''
+
+    expect(() => sheet.flush()).not.toThrowError()
+  })
 })

packages/sheet/src/index.js

@@ -155,7 +155,7 @@ export class StyleSheet {
 
   flush() {
     // $FlowFixMe
-    this.tags.forEach(tag => tag.parentNode.removeChild(tag))
+    this.tags.forEach(tag => tag.parentNode && tag.parentNode.removeChild(tag))
     this.tags = []
     this.ctr = 0
     if (process.env.NODE_ENV !== 'production') {