Set up Master CSS in Svelte
Guide to setting up Master CSS in your Svelte project.
Create a project
If you don't have a Svelte project, create one first. It's recommended to refer to Svelte Kit.
npm create svelte@latest my-appcd my-appnpm installAdd Master CSS
Run the Svelte CLI add-on from the SvelteKit project root. It installs static rendering and leaves existing server hooks unchanged.
npx sv add @master/css-svelte-addonLaunch server
Run npm run dev -- --open to start your Svelte development server
npm run dev -- --openStart using Master CSS
Now style your first element using Master CSS syntax!
Hello World
<h1 class="m-2xl italic font-5xl font-heavy text-neutral"> Hello World</h1>Component <style> blocks can use tokens, modes, shared utilities, and managed
animations from project CSS entries without @reference. Import the entry where
its global reset, native rules, or generated classes should load. A component
style receives the theme resources it uses even when that entry is not loaded
on the same route. Use @reference for definitions outside the project context.
Static is the default. For browser generation, explicitly use masterCSS({ mode: 'runtime' }) in the Vite configuration and load the runtime bootstrap in the
SvelteKit client hook:
/// <reference types="@master/css/client" />import 'virtual:master-css-runtime'The module starts the runtime with the project manifest and emitted globals and handles Vite HMR. SvelteKit owns its HTML rendering, so the Vite mode option alone does not insert a runtime script into the page.
For progressive rendering, select mode: 'progressive', keep the client hook,
and export the handle from @master/css-svelte/hooks.server;
compose it first when using SvelteKit’s sequence(). For pre-render only, select
mode: 'pre-render' and create the server handle with hydrationManifest: false.
A static application needs neither Master CSS hook. A pre-render application
uses only the server hook.