Build System Configuration

This document explains the configuration options available in the chat-app build scripts.

Key changes:

• Output files now use generic name compiled-*.css instead of chat-app-*.css
• Makes it easier to filter out compiled CSS in search
• All configuration is at the top in the CONFIG object

const CONFIG = {
  DESIGN_SYSTEM_SOURCE: "../../../../styles",
  DESIGN_SYSTEM_DEST: "./design-system",
  APP_STYLES_SCSS: "./app.scss",
  OUTPUT_PREFIX: "./compiled",  // Generic name for easy filtering
  MAX_CHUNK_SIZE: 60 * 1024,
  APP_NAME: "chat-app",
};

Key changes:

• New CSS_MODE config option: "build" or "link"
• "build" mode: Uses locally compiled CSS (production)
• "link" mode: Links to prebuilt design system + local custom styles (testing)

const CONFIG = {
  SRC_DIR: "./src/html",
  OUTPUT_FILE: "./index.html",
  
  CSS_MODE: "build", // Change to "link" for testing
  
  // When CSS_MODE is "link":
  PREBUILT_DESIGN_SYSTEM_CSS: "/v2/frontend/styles/theme.css",
  LOCAL_CUSTOM_CSS: "/frontend/styles/app.css",
  
  // When CSS_MODE is "build":
  BUILT_CSS_PREFIX: "compiled", // Must match build.ts OUTPUT_PREFIX
};

deno task build

This will:

1. Compile design system + app styles into compiled.css (or compiled-1.css, compiled-2.css, etc.)
2. Build HTML with links to the compiled CSS files

When to use: Testing changes to your app-specific styles without rebuilding the entire design system.

1. Change CSS_MODE in build-html.ts:

   CSS_MODE: "link",

2. Run HTML build only:

   deno task build:html

3. Your index.html will now link to:

   • Prebuilt design system: /v2/frontend/styles/theme.css
   • Local custom styles: /frontend/styles/app.css

To ignore compiled CSS files in your IDE search:

VS Code / Cursor:

• Search for compiled-*.css to exclude: -compiled-*.css
• Or add to .gitignore if you don't want to version them

Grep/Ripgrep:

rg "pattern" --glob "!compiled-*.css"

Each app can customize these settings:

• OUTPUT_PREFIX: Change output filename (e.g., "app", "styles", "compiled")
• APP_NAME: Used in comments/metadata
• CSS_MODE: Toggle between build and link modes
• PREBUILT_DESIGN_SYSTEM_CSS: Path to your shared design system
• LOCAL_CUSTOM_CSS: Path to app-specific styles

1. Generic naming: compiled-*.css is easier to filter than app-specific names
2. Flexible testing: Link mode lets you test without full rebuilds
3. Consistent across apps: Same configuration pattern for all apps
4. Easy customization: All settings in one place at the top
5. No duplication: Generic names won't pollute search results