frontend/package-lock.json

@@ -48,8 +48,10 @@
                 "eslint-plugin-react": "^7.24.0",
                 "eslint-plugin-react-hooks": "^4.2.0",
                 "html-webpack-plugin": "^5.3.2",
+                "mini-css-extract-plugin": "^2.2.0",
                 "postcss-loader": "^6.1.1",
                 "prettier": "^2.3.2",
+                "purgecss-webpack-plugin": "^4.0.3",
                 "sass": "^1.37.5",
                 "sass-loader": "^12.1.0",
                 "style-loader": "^3.2.1",
@@ -6108,6 +6110,43 @@
                 "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
             }
         },
+        "node_modules/mini-css-extract-plugin": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.2.0.tgz",
+            "integrity": "sha512-91HeVHbq7PUJ4TwOuMTlFWfVWrLqf3SF0PlEDPV+wtgsfxrMebN9LLzflyQqdKLp4/H3PexRB1WLKsCqpWKkxQ==",
+            "dev": true,
+            "dependencies": {
+                "schema-utils": "^3.1.0"
+            },
+            "engines": {
+                "node": ">= 12.13.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/webpack"
+            },
+            "peerDependencies": {
+                "webpack": "^5.0.0"
+            }
+        },
+        "node_modules/mini-css-extract-plugin/node_modules/schema-utils": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+            "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+            "dev": true,
+            "dependencies": {
+                "@types/json-schema": "^7.0.8",
+                "ajv": "^6.12.5",
+                "ajv-keywords": "^3.5.2"
+            },
+            "engines": {
+                "node": ">= 10.13.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/webpack"
+            }
+        },
         "node_modules/minimatch": {
             "version": "3.0.4",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -6909,6 +6948,66 @@
                 "node": ">=6"
             }
         },
+        "node_modules/purgecss": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.0.3.tgz",
+            "integrity": "sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==",
+            "dev": true,
+            "dependencies": {
+                "commander": "^6.0.0",
+                "glob": "^7.0.0",
+                "postcss": "^8.2.1",
+                "postcss-selector-parser": "^6.0.2"
+            },
+            "bin": {
+                "purgecss": "bin/purgecss.js"
+            }
+        },
+        "node_modules/purgecss-webpack-plugin": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/purgecss-webpack-plugin/-/purgecss-webpack-plugin-4.0.3.tgz",
+            "integrity": "sha512-YqmHRuKqjPhB+f/kURHYwlUR2QDcS8NSpCWrgQNICsSd8S2+tj40SDBav5b8KaSPQ8b/uXqrJxa/SnLyHK4BvQ==",
+            "dev": true,
+            "dependencies": {
+                "purgecss": "^4.0.3",
+                "webpack": "^5.4.0",
+                "webpack-sources": "^2.0.0"
+            },
+            "peerDependencies": {
+                "webpack": "*"
+            }
+        },
+        "node_modules/purgecss-webpack-plugin/node_modules/source-map": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+            "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/purgecss-webpack-plugin/node_modules/webpack-sources": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-2.3.1.tgz",
+            "integrity": "sha512-y9EI9AO42JjEcrTJFOYmVywVZdKVUfOvDUPsJea5GIr1JOEGFVqwlY2K098fFoIjOkDzHn2AjRvM8dsBZu+gCA==",
+            "dev": true,
+            "dependencies": {
+                "source-list-map": "^2.0.1",
+                "source-map": "^0.6.1"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/purgecss/node_modules/commander": {
+            "version": "6.2.1",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+            "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+            "dev": true,
+            "engines": {
+                "node": ">= 6"
+            }
+        },
         "node_modules/randombytes": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -13665,6 +13764,28 @@
                 "tiny-warning": "^1.0.3"
             }
         },
+        "mini-css-extract-plugin": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.2.0.tgz",
+            "integrity": "sha512-91HeVHbq7PUJ4TwOuMTlFWfVWrLqf3SF0PlEDPV+wtgsfxrMebN9LLzflyQqdKLp4/H3PexRB1WLKsCqpWKkxQ==",
+            "dev": true,
+            "requires": {
+                "schema-utils": "^3.1.0"
+            },
+            "dependencies": {
+                "schema-utils": {
+                    "version": "3.1.1",
+                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+                    "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+                    "dev": true,
+                    "requires": {
+                        "@types/json-schema": "^7.0.8",
+                        "ajv": "^6.12.5",
+                        "ajv-keywords": "^3.5.2"
+                    }
+                }
+            }
+        },
         "minimatch": {
             "version": "3.0.4",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -14259,6 +14380,55 @@
             "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
             "dev": true
         },
+        "purgecss": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.0.3.tgz",
+            "integrity": "sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==",
+            "dev": true,
+            "requires": {
+                "commander": "^6.0.0",
+                "glob": "^7.0.0",
+                "postcss": "^8.2.1",
+                "postcss-selector-parser": "^6.0.2"
+            },
+            "dependencies": {
+                "commander": {
+                    "version": "6.2.1",
+                    "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+                    "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+                    "dev": true
+                }
+            }
+        },
+        "purgecss-webpack-plugin": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/purgecss-webpack-plugin/-/purgecss-webpack-plugin-4.0.3.tgz",
+            "integrity": "sha512-YqmHRuKqjPhB+f/kURHYwlUR2QDcS8NSpCWrgQNICsSd8S2+tj40SDBav5b8KaSPQ8b/uXqrJxa/SnLyHK4BvQ==",
+            "dev": true,
+            "requires": {
+                "purgecss": "^4.0.3",
+                "webpack": "^5.4.0",
+                "webpack-sources": "^2.0.0"
+            },
+            "dependencies": {
+                "source-map": {
+                    "version": "0.6.1",
+                    "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+                    "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+                    "dev": true
+                },
+                "webpack-sources": {
+                    "version": "2.3.1",
+                    "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-2.3.1.tgz",
+                    "integrity": "sha512-y9EI9AO42JjEcrTJFOYmVywVZdKVUfOvDUPsJea5GIr1JOEGFVqwlY2K098fFoIjOkDzHn2AjRvM8dsBZu+gCA==",
+                    "dev": true,
+                    "requires": {
+                        "source-list-map": "^2.0.1",
+                        "source-map": "^0.6.1"
+                    }
+                }
+            }
+        },
         "randombytes": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",

frontend/package.json

@@ -48,8 +48,10 @@
         "eslint-plugin-react": "^7.24.0",
         "eslint-plugin-react-hooks": "^4.2.0",
         "html-webpack-plugin": "^5.3.2",
+        "mini-css-extract-plugin": "^2.2.0",
         "postcss-loader": "^6.1.1",
         "prettier": "^2.3.2",
+        "purgecss-webpack-plugin": "^4.0.3",
         "sass": "^1.37.5",
         "sass-loader": "^12.1.0",
         "style-loader": "^3.2.1",

frontend/webpack.config.js

@@ -1,9 +1,12 @@
 var webpack = require("webpack");
 var path = require("path");
+const glob = require("glob");
 var WebpackPwaManifest = require("webpack-pwa-manifest");
 var HtmlWebpackPlugin = require("html-webpack-plugin");
 var { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const WorkboxPlugin = require("workbox-webpack-plugin");
+const PurgeCSSPlugin = require("purgecss-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 var mode = "development";
 var BUILD_DIR = path.resolve(__dirname, "../build/public/");
@@ -21,7 +24,7 @@ const config = {
   output: {
     path: BUILD_DIR,
     filename: "[contenthash]-app.js",
-    assetModuleFilename: "[hash]-[name][ext][query]",
+    assetModuleFilename: "[contenthash]-[name][ext][query]",
   },
   optimization: {},
   module: {
@@ -36,9 +39,18 @@ const config = {
           },
         },
       },
+      {
+        test: /\.css$/i,
+        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
+      },
       {
         test: /\.scss$/,
-        use: ["style-loader", "css-loader", "sass-loader", "postcss-loader"],
+        use: [
+          MiniCssExtractPlugin.loader,
+          "css-loader",
+          "sass-loader",
+          "postcss-loader",
+        ],
       },
       {
         test: /\.(png|jpg|svg|ico)$/,
@@ -97,6 +109,9 @@ const config = {
         },
       ],
     }),
+    new MiniCssExtractPlugin({
+      filename: "[contenthash].css",
+    }),
     new WorkboxPlugin.GenerateSW(),
   ],
   resolve: {
@@ -105,4 +120,12 @@ const config = {
   devtool: mode === "production" ? false : "source-map",
 };
 
+if (mode === "production") {
+  config.plugins.push(
+    new PurgeCSSPlugin({
+      paths: () => glob.sync(`${SRC_DIR}/**/*`, { nodir: true }),
+    })
+  );
+}
+
 module.exports = config;