extension styles

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

···
     }
   }
 };
+
+export const styles = [
+  ".moonbase-settings > :first-child { margin-top: 0px; }"
+];

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

···
     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

···
 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");
 
···
             registerWebpackModule({ ...wp, ext: ext.id, id: name });
           }
         }
+      }
+
+      if (exports.styles != null) {
+        registerStyles(
+          exports.styles.map((style, i) => `/* ${ext.id}#${i} */ ${style}`)
+        );
       }
     }
   }

packages/core/src/styles.ts

···
+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

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

packages/web-preload/src/index.ts

···
 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 () => {
···
   } catch (e) {
     logger.error("Error setting up web-preload", e);
   }
+
+  window.addEventListener("DOMContentLoaded", () => {
+    installStyles();
+  });
 })();