convert colors in uso preprocessor to match USO site (#997)

#rrggbb for /*[[color]]*/
r,g,b for /*[[color-rgb]]*/

(no alpha channel)

background/background-worker.js

@@ -31,7 +31,11 @@ createAPI({
 });
 
 function compileUsercss(preprocessor, code, vars) {
-  loadScript('/vendor-overwrites/csslint/parserlib.js', '/js/moz-parser.js');
+  loadScript(
+    '/vendor-overwrites/csslint/parserlib.js',
+    '/vendor-overwrites/colorpicker/colorconverter.js',
+    '/js/moz-parser.js'
+  );
   const builder = getUsercssCompiler(preprocessor);
   vars = simpleVars(vars);
   return Promise.resolve(builder.preprocess ? builder.preprocess(code, vars) : code)
@@ -122,28 +126,39 @@ function getUsercssCompiler(preprocessor) {
         const pool = new Map();
         return Promise.resolve(doReplace(source));
 
-        function getValue(name, rgb) {
+        function getValue(name, rgbName) {
           if (!vars.hasOwnProperty(name)) {
             if (name.endsWith('-rgb')) {
-              return getValue(name.slice(0, -4), true);
+              return getValue(name.slice(0, -4), name);
             }
             return null;
           }
-          if (rgb) {
+          const {type, value} = vars[name];
-            if (vars[name].type === 'color') {
+          switch (type) {
-              const color = colorConverter.parse(vars[name].value);
+            case 'color': {
-              if (!color) return null;
+              let color = pool.get(rgbName || name);
-              const {r, g, b} = color;
+              if (color == null) {
-              return `${r}, ${g}, ${b}`;
+                color = colorConverter.parse(value);
+                if (color) {
+                  if (color.type === 'hsl') {
+                    color = colorConverter.HSVtoRGB(colorConverter.HSLtoHSV(color));
+                  }
+                  const {r, g, b} = color;
+                  color = rgbName
+                    ? `${r}, ${g}, ${b}`
+                    : `#${(0x1000000 + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+                }
+                // the pool stores `false` for bad colors to differentiate from a yet unknown color
+                pool.set(rgbName || name, color || false);
+              }
+              return color || null;
             }
-            return null;
+            case 'dropdown':
+            case 'select': // prevent infinite recursion
+              pool.set(name, '');
+              return doReplace(value);
           }
-          if (vars[name].type === 'dropdown' || vars[name].type === 'select') {
+          return value;
-            // prevent infinite recursion
-            pool.set(name, '');
-            return doReplace(vars[name].value);
-          }
-          return vars[name].value;
         }
 
         function doReplace(text) {