Add styles based on app flag

build/assets/app.css

@@ -0,0 +1,7 @@
+body {
+    background: var(--bg);
+    color: var(--text);
+    font-family: 'Georgia', serif;
+    font-size: 14px;
+    line-height: 1.5;
+}

build/assets/global.css

@@ -34,13 +34,4 @@ body {
     margin: 0;
     padding: 0;
     overflow: hidden;
-    font-family: sans-serif;
-}
-
-body {
-    background: var(--bg);
-    color: var(--text);
-    font-family: 'Georgia', serif;
-    font-size: 14px;
-    line-height: 1.5;
 }

build/html.ts

@@ -73,13 +73,31 @@ connect();
 </script>`;
 
 async function buildBundle(game: string, production: boolean) {
+    const assetsDir = path.resolve(import.meta.dir, 'assets');
     const srcDir = path.resolve(import.meta.dir, '..', 'src');
-    return Bun.build({
+    const gameDir = path.resolve(srcDir, 'games', game);
+    const gameAssetsDir = path.resolve(gameDir, 'assets');
+
+    let appConfig = Bun.file(path.resolve(gameAssetsDir, 'config.yml'));
+    let config = DEFAULT_CONFIG;
+    if (await appConfig.exists()) {
+        try {
+            const maybeConfig = Bun.YAML.parse(await appConfig.text());
+            if (Type.Is(AppConfigScheme, maybeConfig)) {
+                config = maybeConfig;
+            }
+        } catch { }
+    }
+    const entrypoints = [
+        path.resolve(assetsDir, 'global.css'),
+    ];
+    if (config.isApp) {
+        entrypoints.push(path.resolve(assetsDir, 'app.css'));
+    }
+    entrypoints.push(path.resolve(srcDir, 'index.ts'));
+    const bundle = await Bun.build({
         outdir: '/tmp',
-        entrypoints: [
+        entrypoints,
-            path.resolve(srcDir, 'index.ts'),
-            path.resolve(srcDir, 'common', 'assets', 'global.css'),
-        ],
         sourcemap: production ? 'none' : 'inline',
         define: {
             global: 'window',
@@ -94,6 +112,8 @@ async function buildBundle(game: string, production: boolean) {
             filePlugin,
         ]
     });
+
+    return { bundle, config, gameDir, gameAssetsDir, srcDir, assetsDir };
 }
 
 export async function buildHTML(game: string, {
@@ -101,13 +121,14 @@ export async function buildHTML(game: string, {
     mobile = false,
     local = false,
 }: Args = {}) {
-    const assetsDir = path.resolve(import.meta.dir, 'assets');
+    const {
-    const srcDir = path.resolve(import.meta.dir, '..', 'src');
+        bundle,
-    const gameDir = path.resolve(srcDir, 'games', game);
+        config,
-    const gameAssetsDir = path.resolve(gameDir, 'assets');
+        gameAssetsDir,
+        assetsDir,
+    } = await buildBundle(game, production);
 
     const html = await Bun.file(path.resolve(assetsDir, 'index.html')).text();
-    const bundle = await buildBundle(game, production);
 
     if (bundle.success) {
         const scriptFile = bundle.outputs.find(a => a.kind === 'entry-point' && a.path.endsWith('.js'));
@@ -137,16 +158,6 @@ export async function buildHTML(game: string, {
         }
         const pwaIconData = await pwaIcon.getBase64("image/png");
 
-        let appConfig = Bun.file(path.resolve(gameAssetsDir, 'config.yml'));
-        let config = DEFAULT_CONFIG;
-        if (await appConfig.exists()) {
-            try {
-                const maybeConfig = Bun.YAML.parse(await appConfig.text());
-                if (Type.Is(AppConfigScheme, maybeConfig)) {
-                    config = maybeConfig;
-                }
-            } catch { }
-        }
         let manifest = '';
         if (production && !local) {
             const publishURL = process.env.PUBLISH_URL ? `${process.env.PUBLISH_URL}${game}` : '.';
@@ -226,7 +237,7 @@ export async function buildHTML(game: string, {
  * Used by the dev server for CSS hot reload.
  */
 export async function buildCSS(game: string): Promise<string | null> {
-    const bundle = await buildBundle(game, false);
+    const { bundle } = await buildBundle(game, false);
     if (bundle.success) {
         let style = '';
         for (const file of bundle.outputs.filter(a => a.kind === 'asset' && a.path.endsWith('.css'))) {

src/common/assets/modal.module.css

@@ -1,5 +1,3 @@
-@import './global.css';
-
 .dialog {
     position: fixed;
     inset: 0;

src/common/assets/ui.module.css

@@ -1,5 +1,3 @@
-@import "./global.css";
-
 /* ─── Form Fields ─────────────────────────────────────────── */
 
 .input, input, textarea {

src/games/storywriter/assets/style.css

@@ -1,5 +1,3 @@
-@import "@common/assets/global.css";
-
 :root {
     --textColor: #DCDCD2;
     --italicColor: #AFAFAF;