Remove unsafe-inline and self from style-src CSP

CSS is now statically inlined so that csp-html-webpack-plugin calculates
hashes for it; this probably doesn't lead to ideal startup performance,
but that's not currently a concern.

See slackhq/csp-html-webpack-plugin#50.

package.json

@@ -80,13 +80,15 @@
     "@types/react-dom": "^17.0.2",
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",
-    "csp-html-webpack-plugin": "^5.1.0",
+    "csp-html-webpack-plugin": "github:sersorrel/csp-html-webpack-plugin#hash-external-scripts",
     "css-loader": "^4.3.0",
     "electron": "12.0.1",
     "electron-devtools-installer": "^3.1.1",
     "eslint": "^7.22.0",
     "eslint-plugin-import": "^2.22.1",
     "fork-ts-checker-webpack-plugin": "^5.2.1",
+    "html-inline-css-webpack-plugin": "^1.10.1",
+    "mini-css-extract-plugin": "^1.3.9",
     "node-loader": "^1.0.2",
     "style-loader": "^1.3.0",
     "ts-loader": "^8.0.18",

webpack.plugins.js

@@ -1,11 +1,15 @@
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const HtmlInlineCssWebpackPlugin = require('html-inline-css-webpack-plugin').default;
 const CspHtmlWebpackPlugin = require('csp-html-webpack-plugin');
 
 module.exports = [
   new ForkTsCheckerWebpackPlugin(),
+  new MiniCssExtractPlugin(),
+  new HtmlInlineCssWebpackPlugin(),
   new CspHtmlWebpackPlugin({
     'script-src': "'self'",
-    'style-src': "'self' 'unsafe-inline'",
+    'style-src': "",
   }, {
     nonceEnabled: {
       'script-src': false,

webpack.renderer.config.js

@@ -1,9 +1,11 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
 const rules = require('./webpack.rules');
 const plugins = require('./webpack.plugins');
 
 rules.push({
   test: /\.css$/,
-  use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
+  use: [{ loader: MiniCssExtractPlugin.loader }, { loader: 'css-loader' }],
 });
 
 module.exports = {