From 467eb85209389558cbcbe925692f5560f458f494 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Tue, 23 Jul 2019 20:33:40 -0700
Subject: [PATCH] fix: simplify window.matchMedia (#1359)

There is really no reason to call window.matchMedia instead of just matchMedia.
---
 package.json                                   | 3 ++-
 src/routes/_store/observers/resizeObservers.js | 6 +++---
 src/routes/_store/store.js                     | 2 +-
 src/routes/_utils/getMainTopMargin.js          | 4 ++--
 src/routes/_utils/themeEngine.js               | 2 +-
 5 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 9623803c..57cee731 100644
--- a/package.json
+++ b/package.json
@@ -149,7 +149,8 @@
       "DOMParser",
       "CSS",
       "customElements",
-      "AbortController"
+      "AbortController",
+      "matchMedia"
     ],
     "ignore": [
       "dist",
diff --git a/src/routes/_store/observers/resizeObservers.js b/src/routes/_store/observers/resizeObservers.js
index c5266bc9..0d6970f0 100644
--- a/src/routes/_store/observers/resizeObservers.js
+++ b/src/routes/_store/observers/resizeObservers.js
@@ -7,9 +7,9 @@ export function resizeObservers (store) {
 
   const recalculateIsMobileSize = () => {
     store.set({
-      isMobileSize: window.matchMedia('(max-width: 767px)').matches, //  e.g. iPhone Plus
-      isSmallMobileSize: window.matchMedia('(max-width: 479px)').matches, // e.g. Galaxy S5
-      isTinyMobileSize: window.matchMedia('(max-width: 320px)').matches // e.g. iPhone 4
+      isMobileSize: matchMedia('(max-width: 767px)').matches, //  e.g. iPhone Plus
+      isSmallMobileSize: matchMedia('(max-width: 479px)').matches, // e.g. Galaxy S5
+      isTinyMobileSize: matchMedia('(max-width: 320px)').matches // e.g. iPhone 4
     })
   }
 
diff --git a/src/routes/_store/store.js b/src/routes/_store/store.js
index 865732d5..47f282f2 100644
--- a/src/routes/_store/store.js
+++ b/src/routes/_store/store.js
@@ -35,7 +35,7 @@ const persistedState = {
   pushSubscriptions: {},
   reduceMotion:
     !process.browser ||
-    window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+    matchMedia('(prefers-reduced-motion: reduce)').matches,
   underlineLinks: false
 }
 
diff --git a/src/routes/_utils/getMainTopMargin.js b/src/routes/_utils/getMainTopMargin.js
index 4748fd86..87bf742f 100644
--- a/src/routes/_utils/getMainTopMargin.js
+++ b/src/routes/_utils/getMainTopMargin.js
@@ -1,8 +1,8 @@
 // should be kept in sync with global.scss
 export function getMainTopMargin () {
-  if (window.matchMedia('(max-width: 767px)').matches) {
+  if (matchMedia('(max-width: 767px)').matches) {
     return 62
-  } else if (window.matchMedia('(max-width: 991px').matches) {
+  } else if (matchMedia('(max-width: 991px').matches) {
     return 52
   } else {
     return 42
diff --git a/src/routes/_utils/themeEngine.js b/src/routes/_utils/themeEngine.js
index cf69458b..3bfe9e73 100644
--- a/src/routes/_utils/themeEngine.js
+++ b/src/routes/_utils/themeEngine.js
@@ -1,4 +1,4 @@
-const prefersDarkTheme = process.browser && window.matchMedia('(prefers-color-scheme: dark)').matches
+const prefersDarkTheme = process.browser && matchMedia('(prefers-color-scheme: dark)').matches
 const meta = process.browser && document.getElementById('theThemeColor')
 
 export const INLINE_THEME = 'default' // theme that does not require external CSS