Mostly fix production bundling

.babelrc

@@ -5,6 +5,13 @@
       {
         "jsxPragma": "h"
       }
+    ],
+    [
+      "@parcel/babel-preset-env",
+      {
+        "loose": true,
+        "bugfixes": true
+      }
     ]
   ],
   "plugins": [

package.json

@@ -4,8 +4,8 @@
   "version": "1.11.4",
   "license": "apache-2.0",
   "scripts": {
-    "start": "parcel serve src/index.html --host 0.0.0.0 --dist-dir build",
+    "start": "parcel serve src/index.html --no-autoinstall --host 0.0.0.0 --dist-dir build",
-    "build": "parcel build src/index.html --dist-dir build",
+    "build": "parcel build src/index.html --no-autoinstall --dist-dir build",
     "lint": "tslint -c tslint.json  -p tsconfig.json -t verbose",
     "lintfix": "tslint -c tslint.json -p tsconfig.json -t verbose --fix 'src/**/*.{ts,tsx,js,jsx}'",
     "sizereport": "sizereport --config"
@@ -15,7 +15,7 @@
       "pre-commit": "npm run lint"
     }
   },
-  "browserslist": ">0.25%, not IE 11, not op_mini all",
+  "browserslist": ">0.5%, not IE 11, not op_mini all",
   "postcss": {
     "modules": true,
     "plugins": {
@@ -34,6 +34,7 @@
     "@babel/plugin-proposal-decorators": "^7.10.5",
     "@babel/plugin-transform-react-jsx": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
+    "@parcel/babel-preset-env": "^2.0.0-alpha.3",
     "@parcel/types": "^2.0.0-alpha.3",
     "@types/node": "10.14.15",
     "@types/pretty-bytes": "5.1.0",

src/components/App/style.module.scss

@@ -24,7 +24,7 @@
       right: 10px;
       bottom: 10px;
       border: 2px dashed #fff;
-      background-color:rgba(88, 116, 88, 0.2);
+      background-color: rgba(88, 116, 88, 0.2);
       border-color: rgba(65, 129, 65, 0.5);
       border-radius: 10px;
       opacity: 0;

src/index.ts

@@ -3,7 +3,11 @@ declare module '@webcomponents/custom-elements';
 // Patch Worker to ignore `importScripts("x.css")` generated by Parcel:
 const W = self.Worker;
 self.Worker = function (url: string | URL, options?: WorkerOptions) {
-  const code = `importScripts = (function(){return this.apply(self,[].slice.call(arguments).filter(function(x){return !/\\.css$/i.test(x)}))}).bind(importScripts)\nimportScripts(${JSON.stringify(url)})`;
+  const code = `
+    importScripts=(function(){
+      return this.apply(self,[].slice.call(arguments).map(function(x){return !/\\.css$/i.test(x) && new URL(x,self.url).href}).filter(Boolean))
+    }).bind(importScripts);importScripts(self.url=${JSON.stringify(url)})
+  `.trim();
   return new W(URL.createObjectURL(new Blob([code], { type: 'text/javascript' })), options);
 } as any as (typeof Worker);
 

src/lib/sw-bridge.ts

@@ -62,12 +62,12 @@ export async function offliner(showSnack: SnackBarElement['showSnackbar']) {
   // This needs to be a typeof because Webpack.
   if (process.env.PRERENDER) return;
 
+  if (!navigator.serviceWorker) return;
+
   if (process.env.NODE_ENV === 'production') {
     navigator.serviceWorker.register('../sw');
   }
 
-  if (!navigator.serviceWorker) return;
-
   const hasController = !!navigator.serviceWorker.controller;
 
   // Look for changes in the controller

src/missing-types.d.ts

@@ -2,6 +2,13 @@ interface CanvasRenderingContext2D {
   filter: string;
 }
 
+declare module '*.module.scss' {
+  const classNameMapping: Record<string, string> & {
+    default: Record<string, string>
+  };
+  export = classNameMapping;
+}
+
 // Handling file-loader imports:
 declare module '*.png' {
   const content: string;
@@ -28,7 +35,12 @@ declare module '*.wasm' {
   export default content;
 }
 
-declare module 'url-loader!*' {
+declare module 'url:*' {
+  const value: string;
+  export default value;
+}
+
+declare module 'data-url:*' {
   const value: string;
   export default value;
 }
@@ -41,5 +53,5 @@ declare var ga: {
 };
 
 interface Navigator {
-	readonly standalone: boolean;
+  readonly standalone: boolean;
 }