Compile legacy with webpack

5 files changed, 40 insertions, 274 deletions

diff --git a/package-lock.json b/package-lock.json
index 61c4539d..68407458 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45,7 +45,6 @@
         "@typescript-eslint/eslint-plugin": "^5.54.0",
         "autoprefixer": "^10.4.13",
         "babel-loader": "^9.1.2",
-        "concurrently": "^7.6.0",
         "copy-webpack-plugin": "^11.0.0",
         "core-js": "^3.29.0",
         "cross-env": "^7.0.3",
@@ -6060,118 +6059,6 @@
       "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
       "dev": true
     },
-    "node_modules/concurrently": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-7.6.0.tgz",
-      "integrity": "sha512-BKtRgvcJGeZ4XttiDiNcFiRlxoAeZOseqUvyYRUp/Vtd+9p1ULmeoSqGsDA+2ivdeDFpqrJvGvmI+StKfKl5hw==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^4.1.0",
-        "date-fns": "^2.29.1",
-        "lodash": "^4.17.21",
-        "rxjs": "^7.0.0",
-        "shell-quote": "^1.7.3",
-        "spawn-command": "^0.0.2-1",
-        "supports-color": "^8.1.0",
-        "tree-kill": "^1.2.2",
-        "yargs": "^17.3.1"
-      },
-      "bin": {
-        "conc": "dist/bin/concurrently.js",
-        "concurrently": "dist/bin/concurrently.js"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
-      }
-    },
-    "node_modules/concurrently/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/concurrently/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/concurrently/node_modules/chalk/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/concurrently/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/concurrently/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
-    "node_modules/concurrently/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/concurrently/node_modules/supports-color": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/supports-color?sponsor=1"
-      }
-    },
     "node_modules/config": {
       "version": "3.3.9",
       "resolved": "https://registry.npmjs.org/config/-/config-3.3.9.tgz",
@@ -6699,19 +6586,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/date-fns": {
-      "version": "2.29.2",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.2.tgz",
-      "integrity": "sha512-0VNbwmWJDS/G3ySwFSJA3ayhbURMTJLtwM2DTxf9CWondCnh6DTNlO9JgRSq6ibf4eD0lfMJNBxUdEAHHix+bA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.11"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/date-fns"
-      }
-    },
     "node_modules/dayjs": {
       "version": "1.11.7",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
@@ -15807,15 +15681,6 @@
         "queue-microtask": "^1.2.2"
       }
     },
-    "node_modules/rxjs": {
-      "version": "7.5.5",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.5.tgz",
-      "integrity": "sha512-sy+H0pQofO95VDmFLzyaw9xNJU4KTRSwQIGM6+iG3SypAtCiLDzpeG8sJrNCWn2Up9km+KhkvTdbkrdy+yzZdw==",
-      "dev": true,
-      "dependencies": {
-        "tslib": "^2.1.0"
-      }
-    },
     "node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -16144,12 +16009,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/shell-quote": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.3.tgz",
-      "integrity": "sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==",
-      "dev": true
-    },
     "node_modules/side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@@ -16282,12 +16141,6 @@
         "source-map": "^0.6.0"
       }
     },
-    "node_modules/spawn-command": {
-      "version": "0.0.2-1",
-      "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
-      "integrity": "sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A=",
-      "dev": true
-    },
     "node_modules/spdx-correct": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
@@ -17113,15 +16966,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/tree-kill": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
-      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
-      "dev": true,
-      "bin": {
-        "tree-kill": "cli.js"
-      }
-    },
     "node_modules/trim-newlines": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
@@ -22498,85 +22342,6 @@
       "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
       "dev": true
     },
-    "concurrently": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-7.6.0.tgz",
-      "integrity": "sha512-BKtRgvcJGeZ4XttiDiNcFiRlxoAeZOseqUvyYRUp/Vtd+9p1ULmeoSqGsDA+2ivdeDFpqrJvGvmI+StKfKl5hw==",
-      "dev": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "date-fns": "^2.29.1",
-        "lodash": "^4.17.21",
-        "rxjs": "^7.0.0",
-        "shell-quote": "^1.7.3",
-        "spawn-command": "^0.0.2-1",
-        "supports-color": "^8.1.0",
-        "tree-kill": "^1.2.2",
-        "yargs": "^17.3.1"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          },
-          "dependencies": {
-            "supports-color": {
-              "version": "7.2.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-              "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-              "dev": true,
-              "requires": {
-                "has-flag": "^4.0.0"
-              }
-            }
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "8.1.1",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-          "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "config": {
       "version": "3.3.9",
       "resolved": "https://registry.npmjs.org/config/-/config-3.3.9.tgz",
@@ -22938,12 +22703,6 @@
         "whatwg-url": "^11.0.0"
       }
     },
-    "date-fns": {
-      "version": "2.29.2",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.2.tgz",
-      "integrity": "sha512-0VNbwmWJDS/G3ySwFSJA3ayhbURMTJLtwM2DTxf9CWondCnh6DTNlO9JgRSq6ibf4eD0lfMJNBxUdEAHHix+bA==",
-      "dev": true
-    },
     "dayjs": {
       "version": "1.11.7",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
@@ -29492,15 +29251,6 @@
         "queue-microtask": "^1.2.2"
       }
     },
-    "rxjs": {
-      "version": "7.5.5",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.5.tgz",
-      "integrity": "sha512-sy+H0pQofO95VDmFLzyaw9xNJU4KTRSwQIGM6+iG3SypAtCiLDzpeG8sJrNCWn2Up9km+KhkvTdbkrdy+yzZdw==",
-      "dev": true,
-      "requires": {
-        "tslib": "^2.1.0"
-      }
-    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -29778,12 +29528,6 @@
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
       "dev": true
     },
-    "shell-quote": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.3.tgz",
-      "integrity": "sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==",
-      "dev": true
-    },
     "side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@@ -29890,12 +29634,6 @@
         "source-map": "^0.6.0"
       }
     },
-    "spawn-command": {
-      "version": "0.0.2-1",
-      "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
-      "integrity": "sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A=",
-      "dev": true
-    },
     "spdx-correct": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
@@ -30525,12 +30263,6 @@
         "punycode": "^2.1.1"
       }
     },
-    "tree-kill": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
-      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
-      "dev": true
-    },
     "trim-newlines": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
diff --git a/package.json b/package.json
index 61a37771..f15bf561 100644
--- a/package.json
+++ b/package.json
@@ -3,9 +3,7 @@
   "private": true,
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "compile:css": "postcss --verbose --map style.css.map src/main/assets/style.css -d src/main/resources/static/",
-    "compile:js": "webpack",
-    "compile": "cross-env NODE_ENV=production concurrently \"npm run compile:css\" \"npm run compile:js\"",
+    "compile": "cross-env NODE_ENV=production webpack",
     "lint": "eslint .",
     "vnext:test": "jest",
     "vnext:build": "webpack -c vnext/webpack.config.js",
@@ -51,7 +49,6 @@
     "@typescript-eslint/eslint-plugin": "^5.54.0",
     "autoprefixer": "^10.4.13",
     "babel-loader": "^9.1.2",
-    "concurrently": "^7.6.0",
     "copy-webpack-plugin": "^11.0.0",
     "core-js": "^3.29.0",
     "cross-env": "^7.0.3",
diff --git a/src/main/resources/static/logo@2x.png b/src/main/assets/logo@2x.png
index 6febeaf9..6febeaf9 100644
--- a/src/main/resources/static/logo@2x.png
+++ b/src/main/assets/logo@2x.png
diff --git a/src/main/assets/style.css b/src/main/assets/style.css
index 4f16fd66..b214e92c 100644
--- a/src/main/assets/style.css
+++ b/src/main/assets/style.css
@@ -190,7 +190,7 @@ pre::selection {
 }
 
 #logo a {
-    background: url("logo@2x.png") no-repeat !important;
+    background: url("./logo@2x.png") no-repeat !important;
     background-size: cover !important;
     border: 0;
     display: block;
diff --git a/webpack.config.js b/webpack.config.js
index 0cf69606..c94ca661 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -2,6 +2,7 @@
 
 const ESLintPlugin = require('eslint-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = (env, argv) => {
@@ -12,7 +13,8 @@ module.exports = (env, argv) => {
         devtool: dev ? 'source-map' : false,
         entry: {
             'scripts': [
-                __dirname + '/src/main/assets/scripts.js'
+                __dirname + '/src/main/assets/scripts.js',
+                __dirname + '/src/main/assets/style.css'
             ]
         },
         output: {
@@ -28,6 +30,39 @@ module.exports = (env, argv) => {
                     /\bwebpack\/buildin\b/
                 ],
                 loader: 'babel-loader'
+            }, {
+                test: /\.(css)$/,
+                use: [
+                    {
+                        loader: dev ? 'style-loader' : MiniCssExtractPlugin.loader,
+                    },
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            sourceMap: true,
+                        },
+                    },
+                    {
+                        loader: 'postcss-loader',
+                        options: {
+                            postcssOptions: {
+                                plugins: [
+                                    [
+                                        'postcss-preset-env',
+                                        {
+                                            'stage': 0
+                                        },
+                                        'stylelint',
+                                        'autoprefixer',
+                                        {
+                                            'grid': true
+                                        }
+                                    ],
+                                ],
+                            },
+                        },
+                    },
+                ],
             }]
         },
         plugins: [
@@ -52,6 +87,8 @@ module.exports = (env, argv) => {
                 failOnError: true,
                 fix: false
             }));
+    } else {
+        config.plugins.push(new MiniCssExtractPlugin());
     }
     config.optimization = {
         minimize: !dev,