🍡 mochi

SSR framework for Svelte 5 + Bun with islands-based selective hydration

CSS imports

Side-effect CSS imports in any .svelte (or imported .ts) file are bundled by Bun and served as a hashed /import-css/<name>-<hash>.css asset. Mochi auto-links the bundle from every page that transitively imports it — you don’t add anything to the shell.

<script>
  import '@fontsource/inter';
  import '@fontsource/fraunces';
</script>

The import is stripped from both the SSR and client JS bundles (so no runtime cost) and the CSS is bundled separately. Per-entry tracking ensures pages only ship the CSS they actually depend on. The same import in a hydratable component works the same way — the bundle URL is linked from the page <head> regardless of where the import lives.

Use this for self-hosted fonts (@fontsource/*), CSS-only libraries (tippy.js/dist/tippy.css), or any third-party stylesheet you’d rather not load via a runtime <link>.

In dev, a .css edit triggers a fast rebundle (no full SSR recompile) and a page reload. Edits to .svelte / .ts files trigger the normal full recompile path.