Update all dependencies

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "description": "Correct Horse Battery Staple-style Password Generator",
   "scripts": {
-    "build": "rimraf dist && cross-env NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=production webpack",
+    "build": "rimraf dist && cross-env NODE_ENV=production webpack",
     "serve": "webpack-dev-server",
     "test": "mocha tests"
   },
@@ -11,7 +11,7 @@
   "author": "Quantum",
   "license": "AGPL-3.0-only",
   "devDependencies": {
-    "autoprefixer": "^9.8.0",
+    "autoprefixer": "^10.4.14",
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
     "ejs-loader": "^0.5.0",
@@ -19,16 +19,16 @@
     "html-loader": "^1.1.0",
     "html-webpack-plugin": "^5.5.3",
     "mini-css-extract-plugin": "^2.7.6",
-    "mocha": "^8.1.3",
+    "mocha": "^10.2.0",
-    "postcss-loader": "^3.0.0",
+    "postcss-loader": "^7.3.3",
-    "rimraf": "^2.7.1",
+    "rimraf": "^5.0.1",
     "sass": "^1.64.1",
     "sass-loader": "^13.3.2",
-    "style-loader": "^0.23.1",
+    "style-loader": "^3.3.3",
-    "terser-webpack-plugin": "^4.2.3",
+    "terser-webpack-plugin": "^5.3.9",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^3.11.3"
+    "webpack-dev-server": "^4.15.1"
   },
   "dependencies": {
     "bootstrap": "^4.5.0",

src/app.scss

@@ -36,7 +36,7 @@ body {
 
 .footer {
   min-height: $spacer * 4;
-  padding: ($spacer * 4 - $font-size-base) / 2 0;
+  padding: calc(($spacer * 4 - $font-size-base) / 2) 0;
 }
 
 #generated-password {

webpack.config.js

@@ -1,32 +1,32 @@
-const path = require('path')
+const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const TerserPlugin = require('terser-webpack-plugin')
+const TerserPlugin = require('terser-webpack-plugin');
 
-const mode = process.env.NODE_ENV || 'development'
+const mode = process.env.NODE_ENV || 'development';
 
 module.exports = {
   optimization: {
     minimizer: [
       new TerserPlugin({
-        cache: true,
-        extractComments: true,
         parallel: true,
-        sourceMap: true
+        terserOptions: {
+          sourceMap: true,
+        },
       }),
-      new CssMinimizerPlugin({})
+      new CssMinimizerPlugin({}),
-    ]
+    ],
   },
   entry: [
     'core-js/fn/array/from',
     'core-js/fn/array/includes',
-    './src/app.js'
+    './src/app.js',
   ],
   mode: mode,
   output: {
     filename: '[name].[contenthash].js',
-    path: path.resolve(__dirname, 'dist')
+    path: path.resolve(__dirname, 'dist'),
   },
   plugins: [
     new HtmlWebpackPlugin({
@@ -37,12 +37,12 @@ module.exports = {
         removeRedundantAttributes: true,
         removeScriptTypeAttributes: true,
         removeStyleLinkTypeAttributes: true,
-        useShortDoctype: true
+        useShortDoctype: true,
-      } : false
+      } : false,
     }),
     new MiniCssExtractPlugin({
-      filename: '[name].[contenthash].css'
+      filename: '[name].[contenthash].css',
-    })
+    }),
   ],
   module: {
     rules: [
@@ -50,33 +50,35 @@ module.exports = {
         test: /\.(scss)$/,
         use: [
           {
-            loader: mode === 'production' ? MiniCssExtractPlugin.loader : 'style-loader'
+            loader: mode === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
           },
           {
             // Interprets `@import` and `url()` like `import/require()` and will resolve them
-            loader: 'css-loader'
+            loader: 'css-loader',
           },
           {
             // Loader for webpack to process CSS with PostCSS
             loader: 'postcss-loader',
             options: {
-              plugins: function () {
+              postcssOptions: {
-                return [
+                plugins: function () {
-                  require('autoprefixer')
+                  return [
-                ]
+                    require('autoprefixer'),
-              }
+                  ];
-            }
+                },
+              },
+            },
           },
           {
             // Loads a SASS/SCSS file and compiles it to CSS
-            loader: 'sass-loader'
+            loader: 'sass-loader',
-          }
+          },
-        ]
+        ],
       },
       {
         test: /\.(png|jp(e*)g|svg)$/,
-        type: 'asset/resource'
+        type: 'asset/resource',
-      }
+      },
-    ]
+    ],
-  }
+  },
-}
+};