Set up Master CSS in Svelte

Guide to setting up Master CSS in your Svelte project.

Master CSS Progressive Rendering scans the rendered HTML ahead of time, server-side or at build time, generates the corresponding CSS rules for each page, and lazy loads the runtime engine to keep track of the dynamic class names.

Faster page loading

Non-rendering-blocking internal CSS and lazy loading

Fully automatic

Capture any program-generated class names

CSS encapsulation

Only ship the page-used CSS instead of the whole site

https://svelte.pr.beta.css.master.co

Quick start

Clone the example

Copy-paste the following commands to quickly start using the svelte.pr.beta.css.master.co.

You can skip all installation steps.

npx degit master-co/css/examples/svelte-with-progressive-rendering my-project
cd my-project
npm install @master/css.svelte@beta @master/css-server@beta
npm install
npm run dev -- --open

Installation

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 project
cd project
npm install

Install Master CSS

Install Master CSS Svelte into your project via package managers.

npm install @master/css.svelte@beta @master/css-server@beta

Initialize configuration file

Run npx mcss init to create a configuration file master.css.ts.

npx mcss init

Allow configuration file

Add ./master.css.ts to the server.fs.allow section in vite.config.ts to be allowed by the server file system.

Accessing files outside this directory list that aren't imported from an allowed file will result in a 403.

import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'
 
export default defineConfig({
    plugins: [sveltekit()],
    server: {
        fs: {
            allow: ['./master.css.ts']
        }
    }
})

Set up CSS runtime engine

Dynamic import("@master/css.svelte")
Dynamic import('../master.css')
Use Fragment to keep the content pre-rendered

@master/css.svelte and master.css.ts will not be included in the page's initial JavaScript bundle.

<script lang="ts">
    import { onMount, type ComponentType } from "svelte";
    import { Fragment } from "@master/css.svelte";
    import type { CSSProvider as CSSProviderType } from "@master/css.svelte";
    …
 
    let CSSProvider: ComponentType<CSSProviderType> = Fragment as any;
 
    onMount(async () => {
        CSSProvider = (await import("@master/css.svelte")).CSSProvider;
    });
</script>
 
<svelte:component this={CSSProvider} config={import('../../master.css')}>
    <slot />
</svelte:component>

Set up Master CSS renderer

Create a src/hooks.server.ts and use the render() to scan the rendered HTML of the Svelte pages, extract class names, generate CSS rules, and inject the CSS text.

import { render } from '@master/css-server'
import { config } from '../master.css'
 
/** @type {import('@sveltejs/kit').Handle} */
export async function handle({ event, resolve }) {
    return await resolve(event, {
        transformPageChunk: ({ html }) => render(html, config).html
    })
}

Launch server

Run npm run dev -- --open to start your Svelte development server

npm run dev -- --open

Start using Master CSS

Now style your first element using Master CSS syntax!

<h1 class="font:40 fg:blue font:heavy italic m:50 text:center">Hello World</h1>

Open your browser to watch the changes.

localhost:5173