SSR framework for Svelte 5 + Bun with islands-based selective hydration
On this page
CSS imports
Side-effect import of a .css file from any .svelte, .ts, or .js module bundles the stylesheet out-of-band and links it from the page <head>. The import is stripped from both the SSR and client JS bundles, so the .css content never ships through JavaScript.
<!-- file: src/Page.svelte -->
<script>
import '@fontsource/inter';
import 'tippy.js/dist/tippy.css';
</script>Bare specifiers resolve through package.json#main, so @fontsource/*, CSS-only libraries, and any package that points its main entry at a stylesheet all work the same way. Relative paths (import './styles.css') resolve from the importing file.
The bundle is served as /_mochi/import-css/<name>-<hash>.css (with assetPrefix configurable on Mochi.serve). Mochi tracks the imports reachable from each page entry and injects a <link rel="stylesheet"> only on pages that actually use them.
// file: src/lib/icons.ts
import 'tippy.js/dist/tippy.css';The import can live anywhere in the dependency graph — a leaf .ts module, a hydratable island, or the page component itself. Mochi follows the bundle, not the call site.
Do NOT load third-party stylesheets via runtime <link> tags in the shell when the asset ships with an npm package; instead, import it side-effect-style so it goes through the bundler with the rest of your CSS.
Component-scoped <style> blocks
<style> inside a .svelte file is handled by the Svelte compiler — Mochi extracts the compiled CSS, hashes it, and serves it from /_mochi/css/<component>-<hash>.css. This path is independent of side-effect CSS imports and applies to every component the page renders.
<!-- file: src/Card.svelte -->
<h2>Card</h2>
<style>
h2 {
color: tomato;
}
</style>Do NOT import the same stylesheet from both a <style> block and a side-effect import; instead, pick one — <style> for component-local rules, import './foo.css' for shared/global stylesheets.
Variable fonts
Bun’s CSS bundler unquotes format('woff2-variations') to format(woff2-variations), which browsers silently drop. Mochi re-quotes the four *-variations hints (woff2-variations, woff-variations, truetype-variations, opentype-variations) after bundling, so @fontsource-variable/* packages work without manual workarounds.
Dev mode
A .css edit triggers a fast rebundle and a page reload — no SSR recompile. Edits to .svelte or .ts files go through the full compile path.