Webpack Optimizations

docs/LICENSES.MD

@@ -506,6 +506,31 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 ```
 
+# [css-minimizer-webpack-plugin](https://github.com/webpack-contrib/css-minimizer-webpack-plugin)
+
+```
+Copyright JS Foundation and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+```
+
 # [dexie](https://github.com/dfahlander/Dexie.js)
 
 ```
@@ -927,6 +952,27 @@ APPENDIX: How to apply the Apache License to your work
         permissions and limitations under the License.
 
 
+```
+
+# [glob](github.com/isaacs/node-glob)
+
+```
+The ISC License
+
+Copyright (c) 2009-2023 Isaac Z. Schlueter and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
 ```
 
 # [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)
@@ -960,7 +1006,7 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 ```
 The MIT License (MIT)
 
-Copyright (c) 2023 i18next
+Copyright (c) 2024 i18next
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -1010,7 +1056,7 @@ SOFTWARE.
 
 ```
 
-# [jest](https://github.com/facebook/jest)
+# [jest](https://github.com/jestjs/jest)
 
 ```
 MIT License
@@ -1037,7 +1083,7 @@ SOFTWARE.
 
 ```
 
-# [jest-environment-jsdom](https://github.com/facebook/jest)
+# [jest-environment-jsdom](https://github.com/jestjs/jest)
 
 ```
 MIT License
@@ -1090,6 +1136,32 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 ```
 
+# [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin)
+
+```
+Copyright JS Foundation and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+```
+
 # [mock-local-storage](https://gitlab.com/kaictl/node/mock-local-storage)
 
 ```
@@ -1205,7 +1277,7 @@ SOFTWARE.
 ```
 The MIT License (MIT)
 
-Copyright (c) 2023 i18next
+Copyright (c) 2024 i18next
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -1332,6 +1404,33 @@ SOFTWARE.
 
 ```
 
+# [ts-node](github.com/TypeStrong/ts-node)
+
+```
+The MIT License (MIT)
+
+Copyright (c) 2014 Blake Embrey (hello@blakeembrey.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+```
+
 # [webpack](https://github.com/webpack/webpack)
 
 ```

package.json

@@ -5,8 +5,8 @@
   "main": "index.js",
   "scripts": {
     "test": "jest --coverage --coverageDirectory='coverage' --maxWorkers=4  --verbose",
-    "dev": "webpack --config webpack.dev.js && node builder.js ",
-    "build": "webpack --config webpack.prod.js && node builder.js "
+    "dev": "webpack --config webpack/webpack.dev.js && node builder.js ",
+    "build": "webpack --config webpack/webpack.prod.js && node builder.js "
   },
   "keywords": [],
   "author": "NoCymer",
@@ -44,11 +44,14 @@
     "babel-preset-minify": "^0.5.2",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^6.0.0",
     "fake-indexeddb": "^4.0.1",
+    "glob": "^10.3.10",
     "html-webpack-plugin": "^5.5.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.6.2",
+    "mini-css-extract-plugin": "^2.7.7",
     "mock-local-storage": "^1.1.24",
     "sass": "^1.54.3",
     "sass-loader": "^13.0.2",

src/App.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
 import { createRoot } from "react-dom/client";
-import "@Styles/main.scss";
 import { SettingsPanel } from "@Settings/SettingsPanel";
 import { useTranslation } from "react-i18next";
 import "@Public/i18n/config";

src/modules/animeSchedule/AnimeSchedule.tsx

@@ -1,4 +1,3 @@
-import "./styles/animeSchedule.scss";
 import React, { useEffect, useState } from "react";
 import { Panel, PanelTab, PanelTabSmallPane } from "@Components/advanced/Panel";
 import { useTranslation } from "react-i18next";

src/modules/bookmarks/Bookmarks.tsx

@@ -1,5 +1,4 @@
 import React, {  useRef } from "react";
-import "./styles/bookmark.scss";
 import { Module } from "@Modules/base/Module";
 import { ModulesManager } from "@Modules/base/ModulesManager";
 import moduleJSON from "./module.json";

src/modules/bookmarks/styles/bookmark.scss

@@ -16,7 +16,7 @@
         @include hidden;
         @include centerNoRepImg;
         @include noDragImg;
-        background-image: url("app-ressources/dark/close-symbol.svg");
+        background-image: url("../app-ressources/dark/close-symbol.svg");
         transition: .25s;
         position: absolute;
         width: 1rem;

src/modules/particles/Particles.jsx

@@ -1,7 +1,6 @@
 import { ModulesManager } from "@Modules/base/ModulesManager.tsx";
 import { Module } from "@Modules/base/Module.ts";
 import moduleJSON from "./module.json";
-import "./styles/particles.scss"
 import $ from "jquery";
 import "particles.js";
 

src/modules/time/Time.tsx

@@ -3,7 +3,6 @@ import { Module } from "@Modules/base/Module";
 import { ModulesManager } from "@Modules/base/ModulesManager";
 import moduleJSON from "./module.json";
 import Clock from "./clock/Clock";
-import "./styles/countdown.scss";
 import DateTimeField from "@Components/basic/DateTimeField";
 import TextField from "@Components/basic/TextField";
 import { useTranslation } from "react-i18next";
@@ -18,8 +17,6 @@ import TimeField from "@Components/basic/TimeField";
 moduleJSON["settings"]["countdown-datetime"]["defaultValue"] = 
     (new Date(Date.now())).getTime();
 
-
-
 
 /**
  * Manages the Time module 

src/modules/time/clock/Clock.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react"
 import appManager from "../../../AppManager";
 import { useSetting } from "@Hooks/useSetting";
-import "../styles/clock.scss";
 
 const dateToString = (date: Date, format: string) => {
     return date.toLocaleTimeString([], (

src/styles/components/_backgrounds.scss

@@ -31,7 +31,7 @@
         @include hidden;
         @include centerNoRepImg;
         @include noDragImg;
-        background-image: url("app-ressources/dark/close-symbol.svg");
+        background-image: url("../app-ressources/dark/close-symbol.svg");
         transition: .25s;
         position: absolute;
         width: 1rem;
@@ -126,7 +126,7 @@
             height: 2.5rem;
             left: 1rem;
             @include centerNoRepImg;
-            background-image: url("app-ressources/lens-symbol.svg");
+            background-image: url("../app-ressources/lens-symbol.svg");
         }
         &:hover {
             filter: brightness(0.8);
@@ -186,7 +186,7 @@
             @include centerNoRepImg;
             @include noDragImg;
             @include interactable;
-            background-image: url("app-ressources/dark/close-symbol.svg");
+            background-image: url("../app-ressources/dark/close-symbol.svg");
             transition: .25s;
             position: absolute;
             width: .75rem;

src/styles/components/_checkbox.scss

@@ -29,7 +29,7 @@
                 width: 1.2rem;
                 height: 1.2rem;
                 background-image: url(
-                    "app-ressources/dark/checkmark-white-symbol.svg"
+                    "../app-ressources/dark/checkmark-white-symbol.svg"
                 );
             }
         }

src/styles/components/_colorPalette.scss

@@ -63,7 +63,7 @@
                 top: -0.7rem;
                 border: .35rem solid transparent;
                 @include centerNoRepImg;
-                background-image: url("app-ressources/dark/close-symbol.svg");
+                background-image: url("../app-ressources/dark/close-symbol.svg");
                 &:hover{
                     transform: scale(1.2);
                     filter: drop-shadow(0 0 .1rem $accent-ternary-color);
@@ -105,7 +105,7 @@
             left: 50%;
             transform: translateX(-50%) translateY(-50%);
             @include centerNoRepImg;
-            background-image: url("app-ressources/dark/checkmark-symbol.svg");
+            background-image: url("../app-ressources/dark/checkmark-symbol.svg");
             opacity: 0;
         }
         &:hover{
@@ -159,7 +159,7 @@
             left: 50%;
             transform: translateX(-50%) translateY(-50%);
             @include centerNoRepImg;
-            background-image: url("app-ressources/dark/pen-symbol.svg");
+            background-image: url("../app-ressources/dark/pen-symbol.svg");
             opacity: 1;
         }
         &:hover{