got webpack production mode running

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

app/fileReceiver.js

@@ -104,6 +104,7 @@ export default class FileReceiver extends Nanobus {
         request: 'init',
         id: this.fileInfo.id,
         filename: this.fileInfo.name,
+        type: this.fileInfo.type,
         key: this.fileInfo.secretKey,
         requiresPassword: this.fileInfo.requiresPassword,
         password: this.fileInfo.password,
@@ -128,7 +129,6 @@ export default class FileReceiver extends Nanobus {
         a.href = downloadUrl;
         document.body.appendChild(a);
         a.click();
-        URL.revokeObjectURL(downloadUrl);
       }
 
       let prog = 0;
@@ -139,7 +139,7 @@ export default class FileReceiver extends Nanobus {
         });
         prog = msg.progress;
         onprogress([prog, this.fileInfo.size]);
-        await delay();
+        await delay(1000);
       }
 
       this.downloadRequest = null;

app/serviceWorker.js

@@ -34,6 +34,7 @@ async function decryptStream(request) {
 
     const headers = {
       'Content-Disposition': 'attachment; filename=' + file.filename,
+      'Content-Type': file.type,
       'Content-Length': file.size
     };
 
@@ -61,6 +62,7 @@ self.onmessage = event => {
     const info = {
       keychain: new Keychain(event.data.key),
       filename: event.data.filename,
+      type: event.data.type,
       size: event.data.size,
       progress: 0,
       cancelled: false

package-lock.json

@@ -394,96 +394,6 @@
         "long": "3.2.0"
       }
     },
-    "@webpack-contrib/schema-utils": {
-      "version": "1.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/@webpack-contrib/schema-utils/-/schema-utils-1.0.0-beta.0.tgz",
-      "integrity": "sha512-LonryJP+FxQQHsjGBi6W786TQB1Oym+agTpY0c+Kj8alnIw+DLUJb6SI8Y1GHGhLCH1yPRrucjObUmxNICQ1pg==",
-      "dev": true,
-      "requires": {
-        "ajv": "6.5.2",
-        "ajv-keywords": "3.2.0",
-        "chalk": "2.4.1",
-        "strip-ansi": "4.0.0",
-        "text-table": "0.2.0",
-        "webpack-log": "1.2.0"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "6.5.2",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.2.tgz",
-          "integrity": "sha512-hOs7GfvI6tUI1LfZddH82ky6mOMyTuY0mk7kE2pWpmhhUSkumzaTO5vbVwij39MdwPQWCV4Zv57Eo06NtL/GVA==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "2.0.1",
-            "fast-json-stable-stringify": "2.0.0",
-            "json-schema-traverse": "0.4.1",
-            "uri-js": "4.2.2"
-          }
-        },
-        "ajv-keywords": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.2.0.tgz",
-          "integrity": "sha1-6GuBnGAs+IIa1jdBNpjx3sAhhHo=",
-          "dev": true
-        },
-        "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-          "dev": true
-        },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "1.9.2"
-          }
-        },
-        "chalk": {
-          "version": "2.4.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
-          "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "3.2.1",
-            "escape-string-regexp": "1.0.5",
-            "supports-color": "5.4.0"
-          }
-        },
-        "fast-deep-equal": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
-          "dev": true
-        },
-        "json-schema-traverse": {
-          "version": "0.4.1",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-          "dev": true
-        },
-        "strip-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "3.0.0"
-          }
-        },
-        "supports-color": {
-          "version": "5.4.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
-          "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
-          "dev": true,
-          "requires": {
-            "has-flag": "3.0.0"
-          }
-        }
-      }
-    },
     "JSONStream": {
       "version": "0.8.4",
       "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-0.8.4.tgz",
@@ -4588,6 +4498,29 @@
         "loader-utils": "1.1.0"
       }
     },
+    "extract-text-webpack-plugin": {
+      "version": "4.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/extract-text-webpack-plugin/-/extract-text-webpack-plugin-4.0.0-beta.0.tgz",
+      "integrity": "sha512-Hypkn9jUTnFr0DpekNam53X47tXn3ucY08BQumv7kdGgeVUBLq3DJHJTi6HNxv4jl9W+Skxjz9+RnK0sJyqqjA==",
+      "dev": true,
+      "requires": {
+        "async": "2.6.1",
+        "loader-utils": "1.1.0",
+        "schema-utils": "0.4.5",
+        "webpack-sources": "1.1.0"
+      },
+      "dependencies": {
+        "async": {
+          "version": "2.6.1",
+          "resolved": "https://registry.npmjs.org/async/-/async-2.6.1.tgz",
+          "integrity": "sha512-fNEiL2+AZt6AlAw/29Cr0UDe4sRAHCpEHh54WMz+Bb7QfNcFw4h3loofyJpLeQs4Yx7yuqu/2dLgM5hKOs6HlQ==",
+          "dev": true,
+          "requires": {
+            "lodash": "4.17.10"
+          }
+        }
+      }
+    },
     "extract-zip": {
       "version": "1.6.7",
       "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-1.6.7.tgz",
@@ -8007,17 +7940,6 @@
         "dom-walk": "0.1.1"
       }
     },
-    "mini-css-extract-plugin": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.1.tgz",
-      "integrity": "sha512-XWuB3G61Rtasq/gLe7cp5cuozehE6hN+E4sxCamRR/WDiHTg+f7ZIAS024r8UJQffY+e2gGELXQZgQoFDfNDCg==",
-      "dev": true,
-      "requires": {
-        "@webpack-contrib/schema-utils": "1.0.0-beta.0",
-        "loader-utils": "1.1.0",
-        "webpack-sources": "1.1.0"
-      }
-    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",

package.json

@@ -77,6 +77,7 @@
     "eslint-plugin-security": "^1.4.0",
     "expose-loader": "^0.7.5",
     "extract-loader": "^2.0.1",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "fast-text-encoding": "^1.0.0",
     "file-loader": "^1.1.11",
     "fluent-intl-polyfill": "^0.1.0",
@@ -86,7 +87,6 @@
     "http_ece": "^1.0.5",
     "husky": "^0.14.3",
     "lint-staged": "^7.2.0",
-    "mini-css-extract-plugin": "^0.4.1",
     "mocha": "^5.2.0",
     "nanobus": "^4.3.2",
     "nanotiming": "^7.3.1",

server/layout.js

@@ -30,7 +30,7 @@ module.exports = function(state, body = '') {
 
     <title>${state.title}</title>
 
-    <link rel="stylesheet" type="text/css" href="${assets.get('style.css')}" />
+    <link rel="stylesheet" type="text/css" href="${assets.get('app.css')}" />
 
     <!-- generic favicons -->
     <link rel="icon" href="${assets.get('favicon-32.png')}" sizes="32x32">
@@ -67,7 +67,6 @@ module.exports = function(state, body = '') {
     ${firaTag}
     <script defer src="/jsconfig.js"></script>
     <!--<script defer src="${assets.get('runtime.js')}"></script>-->
-    <script defer src="${assets.get('style.js')}"></script>
     <script defer src="${assets.get('vendor.js')}"></script>
     <script defer src="${locales.get(state.locale)}"></script>
     <script defer src="${assets.get('cryptofill.js')}"></script>

webpack.config.js

@@ -3,7 +3,7 @@ const webpack = require('webpack');
 const CopyPlugin = require('copy-webpack-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const VersionPlugin = require('./build/version_plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 const webJsOptions = {
   babelrc: false,
@@ -121,16 +121,17 @@ const web = {
       {
         // creates style.css with all styles
         test: /\.css$/,
-        use: [
+        use: ExtractTextPlugin.extract({
-          MiniCssExtractPlugin.loader,
+          use: [
-          {
+            {
-            loader: 'css-loader',
+              loader: 'css-loader',
-            options: {
+              options: {
-              importLoaders: 1
+                importLoaders: 1
-            }
+              }
-          },
+            },
-          'postcss-loader'
+            'postcss-loader'
-        ]
+          ]
+        })
       },
       {
         // creates a js script for each ftl
@@ -164,17 +165,6 @@ const web = {
       }
     ]
   },
-  optimization: {
-    splitChunks: {
-      cacheGroups: {
-        style: {
-          name: 'style',
-          test: /\.css$/,
-          chunks: 'all'
-        }
-      }
-    }
-  },
   plugins: [
     new CopyPlugin([
       {
@@ -185,13 +175,14 @@ const web = {
     new webpack.IgnorePlugin(/dist/), // used in common/*.js
     new webpack.IgnorePlugin(/require-from-string/), // used in common/locales.js
     new webpack.HashedModuleIdsPlugin(),
-    new MiniCssExtractPlugin({
+    new ExtractTextPlugin({
-      filename: '[name].[contenthash:8].css'
+      filename: '[name].[hash:8].css'
     }),
     new VersionPlugin(),
     new ManifestPlugin() // used by server side to resolve hashed assets
   ],
   devServer: {
+    before: require('./server/bin/dev'),
     compress: true,
     hot: false,
     host: '0.0.0.0',
@@ -205,19 +196,16 @@ const web = {
   }
 };
 
-module.exports = () => {
+module.exports = (env, argv) => {
-  //(env, argv) => {
+  const mode = argv.mode || 'production';
-  // TODO: why are styles not output in 'production' mode?
-  const mode = 'development'; //argv.mode || 'production';
   console.error(`mode: ${mode}`);
   web.mode = serviceWorker.mode = mode;
   if (mode === 'development') {
     // istanbul instruments the source for code coverage
     webJsOptions.plugins.push('istanbul');
-    web.devServer.before = require('./server/bin/dev');
     web.entry.tests = ['./test/frontend/index.js'];
-    web.devtool = 'inline-source-map';
+    web.devtool = 'source-map';
-    serviceWorker.devtool = 'inline-source-map';
+    serviceWorker.devtool = 'source-map';
   }
-  return [serviceWorker, web];
+  return [web, serviceWorker];
 };