print stylus-lang's p() to editor console, fixes #894

background/usercss-manager.js

@@ -40,13 +40,15 @@ const usercssMan = {
     const style = await usercssMan.buildMeta({sourceCode});
     const dup = (checkDup || assignVars) &&
       await usercssMan.find(styleId ? {id: styleId} : style);
+    let log;
     if (!metaOnly) {
       if (vars || assignVars) {
         await usercssMan.assignVars(style, vars ? {usercssData: {vars}} : dup);
       }
       await usercssMan.buildCode(style);
+      log = style.log; // extracting the non-enumerable prop, otherwise it won't survive messaging
     }
-    return {style, dup};
+    return {style, dup, log};
   },
 
   async buildCode(style) {
@@ -55,12 +57,14 @@ const usercssMan = {
     const i = match.index;
     const j = i + match[0].length;
     const codeNoMeta = code.slice(0, i) + blankOut(code, i, j) + code.slice(j);
-    const {sections, errors} = await API.worker.compileUsercss(preprocessor, codeNoMeta, vars);
+    const {sections, errors, log} = await API.worker.compileUsercss(preprocessor, codeNoMeta, vars);
     const recoverable = errors.every(e => e.recoverable);
     if (!sections.length || !recoverable) {
       throw !recoverable ? errors : 'Style does not contain any actual CSS to apply.';
     }
     style.sections = sections;
+    // adding a non-enumerable prop so it won't be written to storage
+    if (log) Object.defineProperty(style, 'log', {value: log});
     return style;
   },
 
@@ -111,7 +115,11 @@ const usercssMan = {
   },
 
   async editSave(style) {
-    return API.styles.editSave(await usercssMan.parse(style));
+    style = await usercssMan.parse(style);
+    return {
+      log: style.log, // extracting the non-enumerable prop, otherwise it won't survive messaging
+      style: await API.styles.editSave(style),
+    };
   },
 
   async find(styleOrData) {

edit/source-editor.js

@@ -63,13 +63,14 @@ function SourceEditor() {
       const sourceCode = cm.getValue();
       try {
         const {customName, enabled, id} = style;
-        if (!id &&
+        let res = !id && await API.usercss.build({sourceCode, checkDup: true, metaOnly: true});
-          (await API.usercss.build({sourceCode, checkDup: true, metaOnly: true})).dup) {
+        if (res && res.dup) {
           messageBoxProxy.alert(t('usercssAvoidOverwriting'), 'danger', t('genericError'));
         } else {
-          await replaceStyle(
+          res = await API.usercss.editSave({customName, enabled, id, sourceCode});
-            await API.usercss.editSave({customName, enabled, id, sourceCode}));
+          await replaceStyle(res.style);
         }
+        showLog(res);
       } catch (err) {
         const i = err.index;
         const isNameEmpty = i > 0 &&
@@ -111,13 +112,20 @@ function SourceEditor() {
   }
 
   async function preprocess(style) {
-    const {style: newStyle} = await API.usercss.build({
+    const res = await API.usercss.build({
       styleId: style.id,
       sourceCode: style.sourceCode,
       assignVars: true,
     });
-    delete newStyle.enabled;
+    showLog(res);
-    return Object.assign(style, newStyle);
+    delete res.style.enabled;
+    return Object.assign(style, res.style);
+  }
+
+  /** Shows the console.log output from the background worker stored in `log` property */
+  function showLog(data) {
+    if (data.log) data.log.forEach(args => console.log(...args));
+    return data;
   }
 
   function updateLivePreview() {

js/usercss-compiler.js

@@ -1,5 +1,7 @@
 'use strict';
 
+let builderChain = Promise.resolve();
+
 const BUILDERS = Object.assign(Object.create(null), {
 
   default: {
@@ -114,14 +116,25 @@ async function compileUsercss(preprocessor, code, vars) {
   } else {
     vars = {};
   }
+  const log = [];
   if (builder.pre) {
-    code = await builder.pre(code, vars);
+    // another compileUsercss may(?) become active while this one is awaited so let's chain
+    builderChain = builderChain.catch(() => {}).then(async () => {
+      const logFn = console.log;
+      console.log = (...args) => log.push(args);
+      code = await builder.pre(code, vars);
+      console.log = logFn;
+    });
+    await builderChain;
   }
   require(['/js/moz-parser']); /* global extractSections */
   const res = extractSections({code});
   if (builder.post) {
     builder.post(res.sections, vars);
   }
+  if (log.length) {
+    res.log = log;
+  }
   return res;
 }