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.svelte into your project.
npm i @master/css.svelte@rcSet up Master CSS
Add the Master CSS Svelte Vite plugin in vite.config.js. The Svelte integration uses progressive mode by default.
import { sveltekit } from '@sveltejs/kit/vite'import { defineConfig } from 'vite'import masterCSS from '@master/css.svelte/vite' export default defineConfig({ plugins: [ sveltekit(), masterCSS() ]})Import the default stylesheet
Import Master CSS from a global stylesheet and load it from the root layout. This stylesheet is also the project CSS entry.
@import '@master/css';<script lang="ts"> import './styles.css'</script>Set up code linting
Install the Master CSS ESLint config with the Svelte parser stack, then add it to eslint.config.js.
The Svelte parser lets ESLint validate Master CSS classes inside .svelte markup and JavaScript class utilities.
npm i -D @master/eslint-config-css@rc eslint-plugin-svelte @eslint/compat globals typescript-eslint eslintimport js from '@eslint/js'import { includeIgnoreFile } from '@eslint/compat'import { fileURLToPath } from 'node:url'import globals from 'globals'import svelte from 'eslint-plugin-svelte'import ts from 'typescript-eslint'import css from '@master/eslint-config-css' const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url))export default ts.config( includeIgnoreFile(gitignorePath), js.configs.recommended, ...ts.configs.recommended, ...svelte.configs['flat/recommended'], { languageOptions: { globals: { ...globals.browser, ...globals.node } } }, { files: ['**/*.svelte'], languageOptions: { parserOptions: { parser: ts.parser } } }, ...css )Set up Master CSS renderer
Create a src/hooks.server.ts and export the Master CSS handle. It injects early streamed CSS before </head>, while the client runtime hydrates classes discovered after the head is flushed.
The packaged server hook keeps the hydration manifest inline because SvelteKit dynamic SSR does not provide one portable public output path. Static or prerender adapters can externalize it when they provide a writer for the hashed JSON asset.
If the project already has a server handle, compose it with SvelteKit's sequence().
export { default as handle } from '@master/css.svelte/hooks.server'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:2xl text:neutral font:5xl font:heavy"> Hello World</h1>