From 8b989f0bb51de81e36e587c05a3a13d193f9928d Mon Sep 17 00:00:00 2001
From: mg901 <mgreen097@gmail.com>
Date: Tue, 12 Jan 2021 09:45:53 +0300
Subject: [PATCH] fix: add exception for MediaQueryList event listener for
 Safari < 14

---
 .all-contributorsrc    |  9 +++++++++
 README.md              |  1 +
 react-emotion/index.js | 12 ++++++++++++
 3 files changed, 22 insertions(+)

diff --git a/.all-contributorsrc b/.all-contributorsrc
index 62a2d7fc..9aadba8a 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -127,6 +127,15 @@
         "example",
         "ideas"
       ]
+    },
+    {
+      "login": "mckelveygreg",
+      "name": "Greg McKelvey",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/16110122?v=4",
+      "profile": "https://mckelveygreg.github.io/",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"
diff --git a/README.md b/README.md
index 43eda7dd..7c848cd4 100644
--- a/README.md
+++ b/README.md
@@ -314,6 +314,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/all-contri
     <td align="center"><a href="https://github.com/Ontopic"><img src="https://avatars0.githubusercontent.com/u/1599991?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ontopic</b></sub></a><br /><a href="#ideas-Ontopic" title="Ideas, Planning, & Feedback">🤔</a></td>
     <td align="center"><a href="https://iryanbell.com/"><img src="https://avatars0.githubusercontent.com/u/25379378?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ryan Bell</b></sub></a><br /><a href="#ideas-iRyanBell" title="Ideas, Planning, & Feedback">🤔</a></td>
     <td align="center"><a href="https://bartnagel.ca/"><img src="https://avatars1.githubusercontent.com/u/199635?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Bart Nagel</b></sub></a><br /><a href="https://github.com/mg901/styled-breakpoints/issues?q=author%3Atremby" title="Bug reports">🐛</a> <a href="https://github.com/mg901/styled-breakpoints/commits?author=tremby" title="Code">💻</a> <a href="#example-tremby" title="Examples">💡</a> <a href="#ideas-tremby" title="Ideas, Planning, & Feedback">🤔</a></td>
+    <td align="center"><a href="https://mckelveygreg.github.io/"><img src="https://avatars2.githubusercontent.com/u/16110122?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Greg McKelvey</b></sub></a><br /><a href="https://github.com/mg901/styled-breakpoints/commits?author=mckelveygreg" title="Code">💻</a></td>
   </tr>
 </table>
 
diff --git a/react-emotion/index.js b/react-emotion/index.js
index 53e14106..53a20239 100644
--- a/react-emotion/index.js
+++ b/react-emotion/index.js
@@ -22,6 +22,18 @@ const useBreakpoint = (breakpoint) => {
     // Ensure the correct value is set in state as soon as possible
     setIsBreak(mq.matches);
 
+    // Safari < 14 can't use addEventListener on a MediaQueryList
+    // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
+    if (!mq.addEventListener) {
+      // Update the state whenever the media query match state changes
+      mq.addListener(handleChange);
+
+      // Clean up on unmount and if the query changes
+      return function cleanup() {
+        mq.removeListener(handleChange);
+      };
+    }
+
     // Update the state whenever the media query match state changes
     mq.addEventListener('change', handleChange);