Set up Master CSS in Lit
Guide to setting up Master CSS in your Lit project.
Create a Lit project
If you don't have a Lit project, create one first.
npm create vite@latest my-app -- --template lit-tscd my-appAdd Master CSS
Run the installer from the Lit project root. Lit uses Vite static mode by default. Keep complete class names in source; use explicit runtime mode if classes must be generated from new names in the browser.
npm create @master/css@rc -- --framework lit --yesInclude styles in the shadow root
Import the generated stylesheet as text and include it with Lit’s unsafeCSS. The CSS comes from your build input; do not pass untrusted user text to unsafeCSS. The installer preserves the standard component’s existing styles when adding this stylesheet.
import { LitElement, html, unsafeCSS } from 'lit'import { customElement } from 'lit/decorators.js'import masterCSSStyles from './index.css?inline'@customElement('my-element')export class MyElement extends LitElement { static styles = [unsafeCSS(masterCSSStyles)] render() { return html`<button class="px-md py-xs bg-blue fg-white">Hello Lit</button>` }}Start dev server
Run the command to start the Vite dev server.
npm run devStart using Master CSS
Now style elements inside your Lit templates using Master CSS syntax.
Hello World
For newly generated class names, explicitly select --mode runtime and use the
withMasterCSSRuntime decorator with virtual:master-css-manifest and
virtual:master-css-emitted-globals. Attach one runtime to each shadow root.
Static mode needs no engine, Wasm, manifest, or decorator in the browser.