Set up Master CSS in Vite
Guide to setting up Master CSS in your Vite project.
Create a Vite project
If you don't have a Vite project, create one first. Vite treats the project root index.html as the entry point and the default templates usually load source files from src/.
npm create vite@latest my-appcd my-appInstall Master CSS
Install @master/css.vite plugin into your project.
npm i @master/css.vite@rcSet up Master CSS
Add a masterCSS vite plugin in vite.config.js.
By default, masterCSS() uses runtime rendering. Use mode: 'static' when you want zero-runtime generated CSS at build time.
In production runtime mode, Vite emits the project manifest as a JSON asset and preloads it when the plugin also injects the runtime. injectRuntime: false disables both automatic runtime injection and that preload. See Preload runtime project manifests.
In progressive and pre-render modes, Vite pre-renders page CSS into style#master-css and externalizes the page hydration manifest. During dev, the manifest JSON is served from /_master-css/hydration/…; during build, it is emitted under the configured Vite asset path.
import { defineConfig } from 'vite'import masterCSS from '@master/css.vite' export default defineConfig({ plugins: [ masterCSS() ]})Import stylesheets
Import Master CSS from the stylesheet your Vite entry already loads, such as src/style.css. This stylesheet is also the project CSS entry.
@import '@master/css';Define local CSS
Source stylesheets can contain ordinary CSS, @settings, @theme tokens and keyframes, top-level custom conditions/selectors, and managed definition directives together. Ordinary class selectors are kept only when they appear in scanned source. Add @preserve native; only when native CSS must be preserved as written.
A stylesheet that imports @master/css is also a project CSS entry, so its Master CSS manifest directives participate in the project manifest graph.
@import '@master/css';.native-card { border: 1px solid rgb(0 0 0 / 12%);}@components { btn { @compose inline-flex align-items:center px:md h:40px r:md bg:blue fg:white; }}@import '@master/css';@import './src/style.css';Add client types
If TypeScript source files import Master CSS virtual manifest, emittedGlobals, or generated CSS modules, add the Vite client types and Master CSS integration client types to your environment file.
/// <reference types="vite/client" />/// <reference types="@master/css-integration/client" />Start dev server
Run the command to start the Vite dev server.
npm run devStart using Master CSS
Now style your first element using Master CSS syntax!
<h1 class="btn native-card m:2xl">Hello World</h1>