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. It's recommended to refer to Lit documentation.
npm create vite@latest my-app -- --template lit-tscd my-appInstall Master CSS
Install @master/css-runtime and @master/css.vite into your project.
npm i @master/css-runtime@rc @master/css.vite@rcSet up Vite config
Register the Master CSS Vite plugin. The default runtime integration initializes the document root; the Lit decorator below initializes each component shadow root.
Production runtime builds follow the Vite project manifest preload behavior.
import { defineConfig } from 'vite'import masterCSS from '@master/css.vite' export default defineConfig({ plugins: [ masterCSS() ]})Import the default stylesheet
Import Master CSS from the page stylesheet your Lit entry already loads. This stylesheet is also the project CSS entry.
@import '@master/css';Add client types
Add the Vite client types and Master CSS integration client types before importing virtual:master-css-manifest from TypeScript.
/// <reference types="vite/client" />/// <reference types="@master/css-integration/client" />Set up shadow-root runtime
Decorate your Lit element with @cssRuntime() to initialize Master CSS Runtime for the element's shadow root. Import the virtual runtime inputs so the shadow runtime receives the same project-level manifest and emittedGlobals global CSS state that Vite discovered from the project CSS entry.
import { LitElement, html } from 'lit'import { customElement } from 'lit/decorators.js'import { cssRuntime } from '@master/css-runtime' import type { CSSRuntime } from '@master/css-runtime' import manifest from 'virtual:master-css-manifest' import emittedGlobals from 'virtual:master-css-emitted-globals' @customElement('my-element')@cssRuntime({ manifest, emittedGlobals }) export class MyElement extends LitElement { cssRuntime?: CSSRuntime render() { return html` <h1 class="italic m:2xl text:neutral font:5xl font:heavy"> Hello World </h1> ` }}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!
render() { return html` <button class="inline-flex items-center gap:xs px:md py:xs r:lg bg:blue fg:white"> Hello Lit </button> `}