Integrations
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 installInstall Master CSS
Install @master/css.vite plugin into your project.
npm i @master/css.vite@rcCreate a configuration file
Run the command to create a master.css.js file.
npm create @master/css@rcimport { defineConfig } from 'vite'import masterCSS from '@master/css.vite' export default defineConfig({ plugins: [ masterCSS({ mode: 'progressive' }) ]})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 -- --openStart using Master CSS
Now style your first element using Master CSS syntax!
<h1 class="italic m:12x fg:strong font:40 font:heavy"> Hello World</h1>localhost:5173