mdn: process css to fallback mask-image to background

Yari uses mask-image and -webkit-mask-image to make icons and colors work, but in "file:" protocol this may lead to cors issues which is impossible to resolve for "file:" protocol, making all icons fail.
This creates a new css named `main.[hash]_file.css` with all `mask-*` css properties replaced with background.
The original css is kept with its original name.

See #785

src/mdn/life-cycle.ts

@@ -23,6 +23,7 @@ import {decompressSitemap} from './decompress-sitemap';
 import {downloadAndFallback} from './download-and-fallback';
 import {processSearchJson} from './process-search-json';
 import {CustomDnsLookup} from './custom-dns-lookup';
+import {processYariMainCss} from './process-html/process-yari-main-css';
 
 const lifeCycle = defaultLifeCycle();
 lifeCycle.linkRedirect.push(skipProcess, redirectUrl);
@@ -43,7 +44,8 @@ lifeCycle.processAfterDownload.push(
   processHtml(postProcessHtml),
   processHtml(postProcessInteractiveExample),
   processYariSourceMap,
-  processSearchJson
+  processSearchJson,
+  processYariMainCss
 );
 
 const options: DownloadOptions = defaultDownloadOptions(lifeCycle);

src/mdn/process-html/process-yari-main-css.ts

@@ -0,0 +1,40 @@
+import {
+  DownloadResource,
+  SubmitResourceFunc
+} from 'website-scrap-engine/lib/life-cycle/types';
+import {ResourceType} from 'website-scrap-engine/lib/resource';
+import {toString} from 'website-scrap-engine/lib/util';
+
+function replaceAll(str: string, s: string, r: string): string {
+  return str.split(s).join(r);
+}
+
+const MAIN_CSS_REGEX = /\/main\.[0-9a-fA-F]+\.css$/;
+
+// https://github.com/website-local/mdn-local/issues/785
+
+export const processYariMainCss = (
+  res: DownloadResource,
+  submit: SubmitResourceFunc
+): DownloadResource => {
+  if (res.type !== ResourceType.Css ||
+    !MAIN_CSS_REGEX.test(res.downloadLink) ||
+    res.savePath.endsWith('_file.css')) {
+    return res;
+  }
+  let cssText = toString(res.body, res.encoding);
+  const newRes = Object.assign({}, res);
+  newRes.meta = Object.assign({}, res.meta);
+  cssText = replaceAll(cssText, '-webkit-mask-', '-webkit-background-');
+  cssText = replaceAll(cssText, '-webkit-mask:', '-webkit-background:');
+  cssText = replaceAll(cssText, 'mask-', 'background-');
+  cssText = replaceAll(cssText, 'mask:', 'background:');
+  newRes.body = cssText;
+  newRes.savePath = res.savePath.replace(/\.css$/, '_file.css');
+  // to bypass duplication check
+  // this should be never downloaded from since body exists
+  newRes.url = res.url.replace(/\.css$/, '_file.css');
+  newRes.uri = undefined;
+  submit(newRes);
+  return res;
+};