Load style.css if it exists

build.mjs

···
   }
 }
 
-async function buildExt(ext, side, copyManifest, fileExt) {
+async function buildExt(ext, side, fileExt) {
   const outdir = path.join("./dist", "core-extensions", ext);
   if (!fs.existsSync(outdir)) {
     fs.mkdirSync(outdir, { recursive: true });
···
     }
   };
 
+  const styleInput = `packages/core-extensions/src/${ext}/style.css`;
+  const styleOutput = `dist/core-extensions/${ext}/style.css`;
+
   const esbuildConfig = {
     entryPoints,
     outdir,
···
     },
     logLevel: "silent",
     plugins: [
-      ...(copyManifest
+      copyStaticFiles({
+        src: `./packages/core-extensions/src/${ext}/manifest.json`,
+        dest: `./dist/core-extensions/${ext}/manifest.json`
+      }),
+      ...(fs.existsSync(styleInput)
         ? [
             copyStaticFiles({
-              src: `./packages/core-extensions/src/${ext}/manifest.json`,
-              dest: `./dist/core-extensions/${ext}/manifest.json`
+              src: styleInput,
+              dest: styleOutput
             })
           ]
         : []),
···
 
   const coreExtensions = fs.readdirSync("./packages/core-extensions/src");
   for (const ext of coreExtensions) {
-    let copiedManifest = false;
-
     for (const fileExt of ["ts", "tsx"]) {
       for (const type of ["index", "node", "host"]) {
         if (fs.existsSync(`./packages/core-extensions/src/${ext}/${type}.${fileExt}`)) {
-          promises.push(buildExt(ext, type, !copiedManifest, fileExt));
-          copiedManifest = true;
+          promises.push(buildExt(ext, type, fileExt));
         }
       }
     }

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

···
     dependencies: [{ ext: "moonbase", id: "stores" }]
   }
 };
-
-const bg = "#222034";
-const fg = "#FFFBA6";
-
-export const styles = [
-  `
-.moonbase-settings > :first-child {
-  margin-top: 0px;
-}
-
-textarea.moonbase-resizeable {
-  resize: vertical
-}
-
-.moonbase-updates-notice {
-  background-color: ${bg};
-  color: ${fg};
-  line-height: unset;
-  height: 36px;
-}
-
-.moonbase-updates-notice button {
-  color: ${fg};
-  border-color: ${fg};
-}
-
-.moonbase-updates-notice_text-wrapper {
-  display: inline-flex;
-  align-items: center;
-  line-height: 36px;
-  gap: 2px;
-}
-
-.moonbase-update-section {
-  background-color: ${bg};
-  --info-help-foreground: ${fg};
-  border: none !important;
-  color: ${fg};
-
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.moonbase-update-section button {
-  --info-help-foreground: ${fg};
-  color: ${fg};
-  background-color: transparent;
-  border-color: ${fg};
-}
-
-.moonbase-update-section-buttons {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-}
-`.trim()
-];

packages/core-extensions/src/moonbase/style.css

···
+:root {
+  --moonbase-bg: #222034;
+  --moonbase-fg: #fffba6;
+}
+
+.moonbase-settings > :first-child {
+  margin-top: 0px;
+}
+
+textarea.moonbase-resizeable {
+  resize: vertical;
+}
+
+.moonbase-updates-notice {
+  background-color: var(--moonbase-bg);
+  color: var(--moonbase-fg);
+  line-height: unset;
+  height: 36px;
+}
+
+.moonbase-updates-notice button {
+  color: var(--moonbase-fg);
+  border-color: var(--moonbase-fg);
+}
+
+.moonbase-updates-notice_text-wrapper {
+  display: inline-flex;
+  align-items: center;
+  line-height: 36px;
+  gap: 2px;
+}
+
+.moonbase-update-section {
+  background-color: var(--moonbase-bg);
+  --info-help-foreground: var(--moonbase-fg);
+  border: none !important;
+  color: var(--moonbase-fg);
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.moonbase-update-section button {
+  --info-help-foreground: var(--moonbase-fg);
+  color: var(--moonbase-fg);
+  background-color: transparent;
+  border-color: var(--moonbase-fg);
+}
+
+.moonbase-update-section-buttons {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+}

packages/core/src/extension.ts

···
         }
       }
 
+      const stylePath = moonlightFS.join(dir, "style.css");
+
       ret.push({
         id: manifest.id,
         manifest,
···
           webPath: web != null ? webPath : undefined,
           webpackModules: wpModules,
           nodePath: (await moonlightFS.exists(nodePath)) ? nodePath : undefined,
-          hostPath: (await moonlightFS.exists(hostPath)) ? hostPath : undefined
+          hostPath: (await moonlightFS.exists(hostPath)) ? hostPath : undefined,
+          style: (await moonlightFS.exists(stylePath)) ? await moonlightFS.readFileString(stylePath) : undefined
         }
       });
     } catch (e) {
···
       },
       scripts: {
         web,
-        webpackModules: wpModules
+        webpackModules: wpModules,
+        style: coreExtensionsFs[`${ext}/style.css`]
       }
     });
     seen.add(manifest.id);

packages/core/src/extension/loader.ts

···
     if (exports.styles != null) {
       registerStyles(exports.styles.map((style, i) => `/* ${ext.id}#${i} */ ${style}`));
     }
+    if (ext.scripts.style != null) {
+      registerStyles([`/* ${ext.id}#style.css */ ${ext.scripts.style}`]);
+    }
   }
 }
 

packages/types/src/extension.ts

···
     webpackModules?: Record<string, string>;
     nodePath?: string;
     hostPath?: string;
+    style?: string;
   };
 };