diff --git a/background/background-worker.js b/background/background-worker.js
index 6403a7ac..65e82888 100644
--- a/background/background-worker.js
+++ b/background/background-worker.js
@@ -1,12 +1,169 @@
+/* global workerUtil importScripts */
+'use strict';
+
 importScripts('/js/worker-util.js');
 
 const {loadScript, createAPI} = workerUtil;
+const BUILDER = usercssBuilder();
 
 createAPI({
-  parseMozFormat(code) {
-
+  parseMozFormat(arg) {
+    /* global parseMozFormat */
+    loadScript('/vendor-overwrites/csslint/parserlib.js', '/js/moz-parser.js');
+    return parseMozFormat(arg);
   },
-  compileUsercss(style, allowErrors = false) {
-
+  compileUsercss,
+  parseUsercssMeta(text, indexOffset = 0) {
+    /* global metaParser */
+    loadScript(
+      '/vendor/usercss-meta/usercss-meta.min.js',
+      '/vendor-overwrites/colorpicker/colorconverter.js',
+      '/js/meta-parser.js'
+    );
+    return metaParser.parse(text, indexOffset);
+  },
+  nullifyInvalidVars(vars) {
+    /* global metaParser */
+    loadScript(
+      '/vendor/usercss-meta/usercss-meta.min.js',
+      '/vendor-overwrites/colorpicker/colorconverter.js',
+      '/js/meta-parser.js'
+    );
+    return metaParser.nullifyInvalidVars(vars);
   }
 });
+
+function compileUsercss(preprocessor, code, vars) {
+  loadScript('/vendor-overwrites/csslint/parserlib.js', '/js/moz-parser.js');
+  let builder;
+  if (preprocessor) {
+    if (!BUILDER[preprocessor]) {
+      throw new Error('unknwon preprocessor');
+    }
+    builder = BUILDER[preprocessor];
+  } else {
+    builder = BUILDER.default;
+  }
+  vars = simpleVars(vars);
+  return Promise.resolve(builder.preprocess ? builder.preprocess(code, vars) : code)
+    .then(code => parseMozFormat({code}))
+    .then(({sections, errors}) => {
+      if (builder.postprocess) {
+        builder.postprocess(sections, vars);
+      }
+      return {sections, errors};
+    });
+
+  function simpleVars(vars) {
+    // simplify vars by merging `va.default` to `va.value`, so BUILDER don't
+    // need to test each va's default value.
+    return Object.keys(vars).reduce((output, key) => {
+      const va = vars[key];
+      output[key] = Object.assign({}, va, {
+        value: va.value === null || va.value === undefined ?
+          getVarValue(va, 'default') : getVarValue(va, 'value')
+      });
+      return output;
+    }, {});
+  }
+
+  function getVarValue(va, prop) {
+    if (va.type === 'select' || va.type === 'dropdown' || va.type === 'image') {
+      // TODO: handle customized image
+      return va.options.find(o => o.name === va[prop]).value;
+    }
+    if ((va.type === 'number' || va.type === 'range') && va.units) {
+      return va[prop] + va.units;
+    }
+    return va[prop];
+  }
+}
+
+function usercssBuilder() {
+  /* global colorConverter styleCodeEmpty */
+  return {
+    default: {
+      postprocess(sections, vars) {
+        loadScript('/background/util.js');
+        let varDef = Object.keys(vars).map(k => `  --${k}: ${vars[k].value};\n`).join('');
+        if (!varDef) return;
+        varDef = ':root {\n' + varDef + '}\n';
+        for (const section of sections) {
+          if (!styleCodeEmpty(section.code)) {
+            section.code = varDef + section.code;
+          }
+        }
+      }
+    },
+    stylus: {
+      preprocess(source, vars) {
+        loadScript('/vendor/stylus-lang-bundle/stylus.min.js');
+        return new Promise((resolve, reject) => {
+          const varDef = Object.keys(vars).map(key => `${key} = ${vars[key].value};\n`).join('');
+          if (!Error.captureStackTrace) Error.captureStackTrace = () => {};
+          window.stylus(varDef + source).render((err, output) => {
+            if (err) {
+              reject(err);
+            } else {
+              resolve(output);
+            }
+          });
+        });
+      }
+    },
+    less: {
+      preprocess(source, vars) {
+        if (!window.less) {
+          window.less = {
+            logLevel: 0,
+            useFileCache: false,
+          };
+        }
+        loadScript('/vendor/less/less.min.js');
+        const varDefs = Object.keys(vars).map(key => `@${key}:${vars[key].value};\n`).join('');
+        return window.less.render(varDefs + source)
+          .then(({css}) => css);
+      }
+    },
+    uso: {
+      preprocess(source, vars) {
+        const pool = new Map();
+        return Promise.resolve(doReplace(source));
+
+        function getValue(name, rgb) {
+          if (!vars.hasOwnProperty(name)) {
+            if (name.endsWith('-rgb')) {
+              return getValue(name.slice(0, -4), true);
+            }
+            return null;
+          }
+          if (rgb) {
+            if (vars[name].type === 'color') {
+              const color = colorConverter.parse(vars[name].value);
+              if (!color) return null;
+              const {r, g, b} = color;
+              return `${r}, ${g}, ${b}`;
+            }
+            return null;
+          }
+          if (vars[name].type === 'dropdown' || vars[name].type === 'select') {
+            // prevent infinite recursion
+            pool.set(name, '');
+            return doReplace(vars[name].value);
+          }
+          return vars[name].value;
+        }
+
+        function doReplace(text) {
+          return text.replace(/\/\*\[\[([\w-]+)\]\]\*\//g, (match, name) => {
+            if (!pool.has(name)) {
+              const value = getValue(name);
+              pool.set(name, value === null ? match : value);
+            }
+            return pool.get(name);
+          });
+        }
+      }
+    }
+  };
+}