allow recoverable css errors + async'ify usercss.js

edit/sections-editor.js

@@ -385,9 +385,8 @@ function SectionsEditor() {
               t('importPreprocessorTitle'))
         ) {
           const {sections, errors} = await API.worker.parseMozFormat({code});
-          // shouldn't happen but just in case
-          if (!sections.length || errors.length) {
-            throw errors;
+          if (!sections.length || errors.some(e => !e.recoverable)) {
+            await Promise.reject(errors);
           }
           await initSections(sections, {
             replace: replaceOldStyle,
@@ -420,7 +419,9 @@ function SectionsEditor() {
       messageBox({
         className: 'center danger',
         title: t('styleFromMozillaFormatError'),
-        contents: $create('pre', Array.isArray(errors) ? errors.join('\n') : errors),
+        contents: $create('pre',
+          (Array.isArray(errors) ? errors : [errors])
+            .map(e => e.message || e).join('\n')),
         buttons: [t('confirmClose')],
       });
     }

js/moz-parser.js

@@ -78,7 +78,7 @@ function parseMozFormat({code, styleId}) {
   });
 
   parser.addListener('error', e => {
-    errors.push(`${e.line}:${e.col} ${e.message.replace(/ at line \d.+$/, '')}`);
+    errors.push(e);
   });
 
   try {
@@ -86,7 +86,13 @@ function parseMozFormat({code, styleId}) {
       reuseCache: !parseMozFormat.styleId || styleId === parseMozFormat.styleId,
     });
   } catch (e) {
-    errors.push(e.message);
+    errors.push(e);
+  }
+  for (const err of errors) {
+    for (const [k, v] of Object.entries(err)) {
+      if (typeof v === 'object') delete err[k];
+    }
+    err.message = `${err.line}:${err.col} ${err.message}`;
   }
   parseMozFormat.styleId = styleId;
   return {sections, errors};

js/usercss.js

@@ -12,39 +12,52 @@ const usercss = (() => {
   };
   const RX_META = /\/\*!?\s*==userstyle==[\s\S]*?==\/userstyle==\s*\*\//i;
   const ERR_ARGS_IS_LIST = new Set(['missingMandatory', 'missingChar']);
+
   return {
+
     RX_META,
-    buildMeta,
-    buildCode,
-    assignVars,
-  };
 
-  function buildMeta(sourceCode) {
-    sourceCode = sourceCode.replace(/\r\n?/g, '\n');
+    // Methods are sorted alphabetically
 
-    const style = {
-      enabled: true,
-      sourceCode,
-      sections: [],
-    };
-
-    const match = sourceCode.match(RX_META);
-    if (!match) {
-      throw new Error('can not find metadata');
-    }
-
-    return API.worker.parseUsercssMeta(match[0], match.index)
-      .catch(err => {
-        if (err.code) {
-          const args = ERR_ARGS_IS_LIST.has(err.code) ? drawList(err.args) : err.args;
-          const message = chrome.i18n.getMessage(`meta_${err.code}`, args);
-          if (message) {
-            err.message = message;
-          }
+    async assignVars(style, oldStyle) {
+      const vars = style.usercssData.vars;
+      const oldVars = oldStyle.usercssData.vars;
+      if (vars && oldVars) {
+        // The type of var might be changed during the update. Set value to null if the value is invalid.
+        for (const [key, v] of Object.entries(vars)) {
+          const old = oldVars[key] && oldVars[key].value;
+          if (old) v.value = old;
         }
-        throw err;
-      })
-      .then(({metadata}) => {
+        style.usercssData.vars = await API.worker.nullifyInvalidVars(vars);
+      }
+    },
+
+    async buildCode(style) {
+      const {sourceCode: code, usercssData: {vars, preprocessor}} = style;
+      const match = code.match(RX_META);
+      const codeNoMeta = code.slice(0, match.index) + code.slice(match.index + match[0].length);
+      const {sections, errors} = 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;
+      return style;
+    },
+
+    async buildMeta(sourceCode) {
+      sourceCode = sourceCode.replace(/\r\n?/g, '\n');
+      const style = {
+        enabled: true,
+        sections: [],
+        sourceCode,
+      };
+      const match = sourceCode.match(RX_META);
+      if (!match) {
+        return Promise.reject(new Error('Could not find metadata.'));
+      }
+      try {
+        const {metadata} = await API.worker.parseUsercssMeta(match[0], match.index);
         style.usercssData = metadata;
         // https://github.com/openstyles/stylus/issues/560#issuecomment-440561196
         for (const [key, value] of Object.entries(GLOBAL_METAS)) {
@@ -53,51 +66,16 @@ const usercss = (() => {
           }
         }
         return style;
-      });
-  }
-
-  function drawList(items) {
-    return items.map(i => i.length === 1 ? JSON.stringify(i) : i).join(', ');
-  }
-
-  /**
-   * @param {Object} style
-   * @param {Boolean} [allowErrors=false]
-   * @returns {(Style | {style: Style, errors: (false|String[])})} - style object
-   *      when allowErrors is falsy or {style, errors} object when allowErrors is truthy
-   */
-  function buildCode(style, allowErrors) {
-    const match = style.sourceCode.match(RX_META);
-    return API.worker.compileUsercss(
-      style.usercssData.preprocessor,
-      style.sourceCode.slice(0, match.index) + style.sourceCode.slice(match.index + match[0].length),
-      style.usercssData.vars
-    )
-      .then(({sections, errors}) => {
-        if (!errors.length) errors = false;
-        if (!sections.length || errors && !allowErrors) {
-          throw errors || 'Style does not contain any actual CSS to apply.';
+      } catch (err) {
+        if (err.code) {
+          const args = ERR_ARGS_IS_LIST.has(err.code)
+            ? err.args.map(e => e.length === 1 ? JSON.stringify(e) : e).join(', ')
+            : err.args;
+          const msg = chrome.i18n.getMessage(`meta_${err.code}`, args);
+          if (msg) err.message = msg;
         }
-        style.sections = sections;
-        return allowErrors ? {style, errors} : style;
-      });
-  }
-
-  function assignVars(style, oldStyle) {
-    const {usercssData: {vars}} = style;
-    const {usercssData: {vars: oldVars}} = oldStyle;
-    if (!vars || !oldVars) {
-      return Promise.resolve();
-    }
-    // The type of var might be changed during the update. Set value to null if the value is invalid.
-    for (const key of Object.keys(vars)) {
-      if (oldVars[key] && oldVars[key].value) {
-        vars[key].value = oldVars[key].value;
+        return Promise.reject(err);
       }
-    }
-    return API.worker.nullifyInvalidVars(vars)
-      .then(vars => {
-        style.usercssData.vars = vars;
-      });
-  }
+    },
+  };
 })();