Switch to bundling css

FlameUser706 · Mar 1, 2021 · 59f2025 · 59f2025
1 parent 3240c6c
commit 59f2025
Show file tree

Hide file tree

Showing 4 changed files with 215 additions and 53 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,8 +15,7 @@
         "lint": "npm run lint-js && npm run lint-css",
         "test": "mocha --require @babel/register --recursive \"./tests/*.js\"",
         "lint-prod": "npm run lint-js -- --quiet && npm run lint-css -- --quiet",
-        "test-prod": "npm run test -- --reporter min",
-        "deploy": "npm run build-prod && npm run build-prod-css"
+        "test-prod": "npm run test -- --reporter min"
     },
     "repository": {
         "type": "git",
@@ -35,13 +34,15 @@
         "babel-loader": "^8.1.0",
         "babel-plugin-module-resolver": "^4.0.0",
         "circular-dependency-plugin": "^5.2.0",
+        "css-loader": "^5.1.0",
         "eslint": "^7.12.0",
         "eslint-plugin-react": "^7.21.5",
         "mocha": "^8.2.0",
         "postcss": "^8.1.4",
         "postcss-cli": "^8.1.0",
         "postcss-csso": "^4.0.0",
         "postcss-easy-import": "^3.0.0",
+        "postcss-loader": "^5.0.0",
         "stylelint": "^13.7.2",
         "stylelint-config-standard": "^20.0.0",
         "webpack": "^4.43.0",

diff --git a/src/modules/core.js b/src/modules/core.js
@@ -17,7 +17,7 @@ import DiscordModules from "./discordmodules";
 import ComponentPatcher from "./componentpatcher";
 import Strings from "./strings";
 import LoadingIcon from "../loadingicon";
-import Utilities from "./utilities";
+import Styles from "../styles/index.css";
 
 const {ipcRenderer} = require("electron");
 const GuildClasses = DiscordModules.GuildClasses;
@@ -38,18 +38,6 @@ export default new class Core {
         });
     }
 
-    get dependencies() {
-        return [
-            {
-                name: "bd-stylesheet",
-                type: "style",
-                url: "//cdn.staticaly.com/gh/rauenzi/BetterDiscordApp/{{hash}}/dist/style.css",
-                backup: "https://rauenzi.github.io/BetterDiscordApp/dist/style.css",
-                localPath: "style.css"
-            }
-        ];
-    }
-
     setConfig(config) {
         if (this.hasStarted) return;
         Object.assign(Config, config);
@@ -59,9 +47,8 @@ export default new class Core {
         if (this.hasStarted) return;
         this.hasStarted = true;
 
-        // Load dependencies asynchronously if they don't exist
-        let dependencyPromise = new Promise(r => r());
-        if (!window.$ || !window.jQuery) dependencyPromise = this.loadDependencies();
+        // Load css early
+        DOMManager.injectStyle("bd-stylesheet", Styles.toString());
 
         DataStore.initialize();
         await LocaleManager.initialize();
@@ -80,7 +67,6 @@ export default new class Core {
         ComponentPatcher.initialize();
         for (const module in Builtins) Builtins[module].initialize();
 
-        await dependencyPromise;
         Logger.log("Startup", "Loading Plugins");
         // const pluginErrors = [];
         const pluginErrors = PluginManager.initialize();
@@ -120,40 +106,6 @@ export default new class Core {
         });
     }
 
-    async loadDependencies() {
-        for (const data of this.dependencies) {
-            if (Config.local && Config.localPath && data.localPath && data.type == "style") {
-                const stylepath = path.resolve(Config.localPath, data.localPath);
-                if (fs.existsSync(stylepath)) {
-                    Logger.log("Startup", `Loading local stylesheet from (${stylepath})`);
-                    const css = fs.readFileSync(stylepath).toString();
-                    DOMManager.injectStyle(data.name, css);
-                    continue;
-                } 
-                else {
-                    Logger.warn("Startup", "Local stylesheet was not found, loading remote...");
-                }
-            }
-            const url = Utilities.formatString(data.url, {hash: Config.hash});
-            Logger.log(`Startup`, `Loading Resource (${url})`);
-            const injector = (data.type == "script" ? DOMManager.injectScript : DOMManager.linkStyle).bind(DOMManager);
-            try {
-                await injector(data.name, url);
-            }
-            catch (err) {
-                const backup = Utilities.formatString(data.backup);
-                Logger.stacktrace(`Startup`, `Could not load ${url}. Using backup ${backup}`, err);
-                try {
-                    await injector(data.name, backup);
-                }
-                catch (e) {
-                    Logger.stacktrace(`Startup`, `Could not load ${url}. Using backup ${backup}`, err);
-                    if (data.name === "jquery") Modals.alert(Strings.Startup.jqueryFailed, Strings.Startup.jqueryFailedDetails);
-                }
-            }
-        }
-    }
-
     async checkInjectorUpdate() {
         const request = require("request");
         const latestVersion = await new Promise(resolve => {

diff --git a/webpack.config.js b/webpack.config.js
@@ -43,6 +43,10 @@ module.exports = {
               }
           }], "@babel/react"]
         }
+      },
+      {
+        test: /\.css$/i,
+        use: ["css-loader", "postcss-loader"],
       }
     ]
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -43,6 +43,10 @@ module.exports = { @@
                   }
               }], "@babel/react"]
             }
+          },
+          {
+            test: /\.css$/i,
+            use: ["css-loader", "postcss-loader"],
           }
         ]
       },
@@ Expand Down @@