Merge pull request #17 from redstonekasi/styles

Extension styles

packages/core-extensions/src/moonbase/index.tsx

@@ -61,3 +61,7 @@ export const webpackModules: ExtensionWebExports["webpackModules"] = {
     }
   }
 };
+
+export const styles = [
+  ".moonbase-settings > :first-child { margin-top: 0px; }"
+];

packages/core-extensions/src/moonbase/ui/extensions/settings.tsx

@@ -362,9 +362,6 @@ export default (require: typeof WebpackRequire) => {
     const { Flex } = CommonComponents;
     return (
       <Flex className="moonbase-settings" direction={Flex.Direction.VERTICAL}>
-        <style>
-          {".moonbase-settings > :nth-child(2) { margin-top: 0px; }"}
-        </style>
         {Object.entries(ext.manifest.settings!).map(([name, setting]) => (
           <Setting ext={ext} key={name} name={name} setting={setting} />
         ))}

packages/core/src/extension/loader.ts

@@ -9,6 +9,7 @@ import Logger from "../util/logger";
 import { registerPatch, registerWebpackModule } from "../patch";
 import calculateDependencies from "../util/dependency";
 import { createEventEmitter } from "../util/event";
+import { registerStyles } from "../styles";
 
 const logger = new Logger("core/extension/loader");
 
@@ -68,6 +69,12 @@ async function loadExt(ext: DetectedExtension) {
           }
         }
       }
+
+      if (exports.styles != null) {
+        registerStyles(
+          exports.styles.map((style, i) => `/* ${ext.id}#${i} */ ${style}`)
+        );
+      }
     }
   }
 

packages/core/src/styles.ts

@@ -0,0 +1,13 @@
+const styles: string[] = [];
+
+export function registerStyles(style: string[]) {
+  styles.push(...style);
+}
+
+export function installStyles() {
+  for (const style of styles) {
+    const el = document.createElement("style");
+    el.textContent = style;
+    document.documentElement.appendChild(el);
+  }
+}

packages/types/src/extension.ts

@@ -115,6 +115,7 @@ export type ExtensionWebpackModule = {
 export type ExtensionWebExports = {
   patches?: Patch[];
   webpackModules?: Record<string, ExtensionWebpackModule>;
+  styles?: string[];
 };
 
 export type IdentifiedPatch = Patch & {

packages/web-preload/src/index.ts

@@ -1,5 +1,6 @@
 import { loadProcessedExtensions } from "@moonlight-mod/core/extension/loader";
 import { installWebpackPatcher } from "@moonlight-mod/core/patch";
+import { installStyles } from "@moonlight-mod/core/styles";
 import Logger from "@moonlight-mod/core/util/logger";
 
 (async () => {
@@ -23,4 +24,8 @@ import Logger from "@moonlight-mod/core/util/logger";
   } catch (e) {
     logger.error("Error setting up web-preload", e);
   }
+
+  window.addEventListener("DOMContentLoaded", () => {
+    installStyles();
+  });
 })();