Refactor: pull out colorParser

js/color-parser.js

@@ -0,0 +1,40 @@
+'use strict';
+
+// eslint-disable-next-line no-var
+var colorParser = (() => {
+  const el = document.createElement('div');
+  // https://bugs.webkit.org/show_bug.cgi?id=14563
+  document.head.appendChild(el);
+
+  function parseRGB(color) {
+    const [r, g, b, a = 1] = color.match(/[.\d]+/g).map(Number);
+    return {r, g, b, a};
+  }
+
+  function parse(color) {
+    el.style.color = color;
+    if (el.style.color === '') {
+      throw new Error(chrome.i18n.getMessage('styleMetaErrorColor', color));
+    }
+    color = getComputedStyle(el).color;
+    el.style.color = '';
+    return parseRGB(color);
+  }
+
+  function format({r, g, b, a = 1}) {
+    if (a === 1) {
+      return `rgb(${r}, ${g}, ${b})`;
+    }
+    return `rgba(${r}, ${g}, ${b}, ${a})`;
+  }
+
+  function formatHex({r, g, b, a = null}) {
+    let hex = '#' + (0x1000000 + (r << 16) + (g << 8) + (b | 0)).toString(16).substr(1);
+    if (a !== null) {
+      hex += (0x100 + Math.floor(a * 255)).toString(16).substr(1);
+    }
+    return hex;
+  }
+
+  return {parse, format, formatHex};
+})();

js/usercss.js

@@ -1,4 +1,4 @@
-/* global loadScript mozParser semverCompare */
+/* global loadScript mozParser semverCompare colorParser */
 'use strict';
 
 // eslint-disable-next-line no-var
@@ -98,44 +98,6 @@ var usercss = (() => {
     }
   };
 
-  const colorParser = (() => {
-    const el = document.createElement('div');
-    // https://bugs.webkit.org/show_bug.cgi?id=14563
-    document.head.appendChild(el);
-
-    function parseRGB(color) {
-      const [r, g, b, a = 1] = color.match(/[.\d]+/g).map(Number);
-      return {r, g, b, a};
-    }
-
-    function parse(color) {
-      el.style.color = color;
-      if (el.style.color === '') {
-        throw new Error(chrome.i18n.getMessage('styleMetaErrorColor', color));
-      }
-      color = getComputedStyle(el).color;
-      el.style.color = '';
-      return parseRGB(color);
-    }
-
-    function format({r, g, b, a = 1}) {
-      if (a === 1) {
-        return `rgb(${r}, ${g}, ${b})`;
-      }
-      return `rgba(${r}, ${g}, ${b}, ${a})`;
-    }
-
-    function formatHex({r, g, b, a = null}) {
-      let hex = '#' + (0x1000000 + (r << 16) + (g << 8) + (b | 0)).toString(16).substr(1);
-      if (a !== null) {
-        hex += (0x100 + Math.floor(a * 255)).toString(16).substr(1);
-      }
-      return hex;
-    }
-
-    return {parse, format, formatHex};
-  })();
-
   function getMetaSource(source) {
     const commentRe = /\/\*[\s\S]*?\*\//g;
     const metaRe = /==userstyle==[\s\S]*?==\/userstyle==/i;
@@ -537,5 +499,5 @@ var usercss = (() => {
     }
   }
 
-  return {buildMeta, buildCode, colorParser, assignVars};
+  return {buildMeta, buildCode, assignVars};
 })();

manage.html

@@ -150,7 +150,7 @@
   <script src="manage/filters.js"></script>
   <script src="manage/updater-ui.js"></script>
   <script src="manage/object-diff.js"></script>
-  <script src="js/usercss.js"></script>
+  <script src="js/color-parser.js"></script>
   <script src="manage/config-dialog.js"></script>
   <script src="manage/manage.js"></script>
 </head>

manage/config-dialog.js

@@ -1,8 +1,7 @@
-/* global usercss messageBox makeLink */
+/* global colorParser messageBox makeLink */
 'use strict';
 
 function configDialog(style) {
-  const {colorParser} = usercss;
   const form = buildConfigForm();
 
   return messageBox({

manifest.json

@@ -22,6 +22,7 @@
     "scripts": [
       "js/messaging.js",
       "vendor-overwrites/lz-string/LZString-2xspeedup.js",
+      "js/color-parser.js",
       "js/usercss.js",
       "background/storage.js",
       "background/usercss-helper.js",