Use RegEx for parsing media query

This now also allows spaces at some places, thus it fixes #7.
rugk · May 25, 2019 · 0f1f166 · 0f1f166
1 parent 04ad535
commit 0f1f166
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 14 deletions.
diff --git a/src/content_scripts/applyColorSchemeCss.js b/src/content_scripts/applyColorSchemeCss.js
@@ -5,7 +5,7 @@
 "use strict";
 
 // from commons.js
-/* globals COLOR_STATUS, MEDIA_QUERY_PREFER_COLOR, fakedColorStatus */
+/* globals COLOR_STATUS, MEDIA_QUERY_COLOR_SCHEME, MEDIA_QUERY_PREFER_COLOR, fakedColorStatus */
 
 const COMMUNICATE_INSERT_CSS = "insertCss";
 const COMMUNICATE_REMOVE_CSS = "removeCss";
@@ -55,7 +55,7 @@ function filterMediaQueryCond(queryCondition) {
  * (functional implementation)
  *
  * @private
- * @param {string} queryString
+ * @param {RegEx} queryString
  * @returns {string}
  */
 function getCssForMediaQueryFunc(queryString) {
@@ -73,8 +73,8 @@ function getCssForMediaQueryFunc(queryString) {
             if (cssRule instanceof CSSMediaRule) {
                 const conditionQuery = cssRule.conditionText;
 
-                if (conditionQuery.includes(queryString) && // to avoid fast splitting/parsing, first check whether there is even a chance
-                    filterMediaQueryCond(conditionQuery) === queryString // check, whether we can take this query
+                if (conditionQuery.includes(MEDIA_QUERY_COLOR_SCHEME) && // to avoid fast splitting/parsing, first check whether there is even a chance this has to do anything with what we want
+                    queryString.test(filterMediaQueryCond(conditionQuery)) // check, whether we can take this query
                 ) {
                     return Array.from(cssRule.cssRules).reduce((prev, subCssRule) => {
                         return prev + subCssRule.cssText;
@@ -107,7 +107,11 @@ function getCssForMediaQuery(queryString) { // eslint-disable-line no-unused-var
 
         for (const cssRule of styleSheet.cssRules) {
             if (cssRule instanceof CSSMediaRule) {
-                if (filterMediaQueryCond(cssRule.conditionText) === queryString) {
+                const conditionQuery = cssRule.conditionText;
+
+                if (conditionQuery.includes(MEDIA_QUERY_COLOR_SCHEME) && // to avoid fast splitting/parsing, first check whether there is even a chance this has to do anything with what we want
+                    queryString.test(filterMediaQueryCond(conditionQuery)) // check, whether we can take this query
+                ) {
                     for (const subCssRule of cssRule.cssRules) {
                         cssRules = cssRules + subCssRule.cssText;
                     }

diff --git a/src/content_scripts/applyColorSchemeJs.js b/src/content_scripts/applyColorSchemeJs.js
@@ -8,7 +8,7 @@ const overwroteMatchMedia = false;
 
 const ADDON_FAKED_WARNING = "matchMedia has been faked/overwritten by add-on website-dark-mode-switcher; see https://github.com/rugk/dark-mode-website-switcher/. If it causes any problems, please open an issue.";
 
-/* globals COLOR_STATUS, MEDIA_QUERY_PREFER_COLOR, fakedColorStatus, getSystemMediaStatus */
+/* globals COLOR_STATUS, MEDIA_QUERY_COLOR_SCHEME, MEDIA_QUERY_PREFER_COLOR, fakedColorStatus, getSystemMediaStatus */
 
 // eslint does not include X-Ray vision functions, see https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts
 /* globals exportFunction, cloneInto */
@@ -21,17 +21,22 @@ const ADDON_FAKED_WARNING = "matchMedia has been faked/overwritten by add-on web
  * @returns {COLOR_STATUS|null}
  */
 function getColorTypeFromMediaQuery(mediaQueryString) {
-    switch (mediaQueryString) {
-    case MEDIA_QUERY_PREFER_COLOR[COLOR_STATUS.LIGHT]:
+    // to avoid expensive RegEx, first use a simple check
+    if (!mediaQueryString.includes(MEDIA_QUERY_COLOR_SCHEME)) {
+        return null;
+    }
+
+    if (MEDIA_QUERY_PREFER_COLOR[COLOR_STATUS.LIGHT].test(mediaQueryString)) {
         return COLOR_STATUS.LIGHT;
-    case MEDIA_QUERY_PREFER_COLOR[COLOR_STATUS.DARK]:
+    } else if (MEDIA_QUERY_PREFER_COLOR[COLOR_STATUS.DARK].test(mediaQueryString)) {
         return COLOR_STATUS.DARK;
-    case MEDIA_QUERY_PREFER_COLOR[COLOR_STATUS.NO_PREFERENCE]:
+    } else if (MEDIA_QUERY_PREFER_COLOR[COLOR_STATUS.NO_PREFERENCE]) {
         return COLOR_STATUS.NO_PREFERENCE;
-    default:
+    } else {
         return null;
     }
 }
+
 /**
  * Returns a fake MediaQueryList as best as possible.
  *

diff --git a/src/content_scripts/common.js b/src/content_scripts/common.js
@@ -23,10 +23,14 @@ const COLOR_STATUS = Object.freeze({
     NO_PREFERENCE: Symbol("prefers-color-scheme: no-preference"),
     NO_OVERWRITE: Symbol("add-on must not overwrite feature"),
 });
+
+const MEDIA_QUERY_COLOR_SCHEME = "prefers-color-scheme";
+
+// https://regex101.com/r/vfhdz3/1
 const MEDIA_QUERY_PREFER_COLOR = Object.freeze({
-    [COLOR_STATUS.LIGHT]: "(prefers-color-scheme: light)",
-    [COLOR_STATUS.DARK]: "(prefers-color-scheme: dark)",
-    [COLOR_STATUS.NO_PREFERENCE]: "(prefers-color-scheme: no-preference)",
+    [COLOR_STATUS.LIGHT]: /^\s*\(prefers-color-scheme:\s*light\)\s*$/,
+    [COLOR_STATUS.DARK]: /^\s*\(prefers-color-scheme:\s*dark\)\s*$/,
+    [COLOR_STATUS.NO_PREFERENCE]: /^\s*\(prefers-color-scheme:\s*no-preference\)\s*$/,
 });
 
 /**