Navigation

Tools

Packages

Choose a public package, find its import paths, and open its API source on GitHub.

On this page

Choose a package by the work it owns. Each section lists its public import paths and links to its current source on GitHub. Read signatures, overloads and types there; this page does not reproduce declarations.

The source links follow the repository’s rc branch. For an installed release, also consult the declarations shipped with that package.

Choose an entrypoint

WorkStart with
Connect a framework or build toolInstallation → and its integration package below.
Compile CSS definitions or resolve stylesheet files@master/css-compiler
Generate class rules from compiled definitions@master/css
Observe classes in a browser DOM@master/css-runtime
Render and hydrate a server response@master/css-server
Extract or validate source@master/css-tooling
Implement editor features@master/css-language-service
Automate from a terminal or agentCLI commands or MCP tools

A compiled manifest does not contain the delivered native stylesheet

The compiler returns native CSS and definitions separately. A Node render session turns the supplied class into utility CSS; it does not redeliver the compiler’s native .card rule.

Text description
  1. app.css contains a theme token and a native .card rule. compileManifestSync from @master/css-compiler/node compiles it with an explicit base manifest.
  2. result.css carries the native rule. result.manifest carries the definitions used for later class generation.
  3. A Node createRenderSessionSync from @master/css/node accepts that manifest. Ensuring bg-brand generates its background-color rule and required token resources.
  4. The application must deliver the native CSS as well as generated CSS and coordinate shared resource ownership. Browser engines use compiled runtime programs instead of this Node manifest path.

A manifest describes definitions; it is not a native stylesheet. Deliver the compiler’s native CSS as well as the utility output your rendering mode produces. A Node engine uses a manifest; the browser engine uses a compiled runtime program. Rendering modes teaches which delivery path to choose.

@master/css-astro

Connect Master CSS to Astro configuration and request handling. The integration configures build behavior; the middleware entry exposes Astro’s request hook.

Import pathPurpose
@master/css-astroAstro integration factory and options.
@master/css-astro/middlewareAstro request middleware.

Use the default integration factory in Astro configuration. See Astro installation for build and middleware setup.

Source and README · Public export mappings

@master/css-compiler

Compile stylesheet directives, load project manifests and compose generated CSS with authored styles. Choose the entrypoint that matches the work and execution environment.

Import pathPurpose
@master/css-compilerAsynchronous compiler sessions and in-memory directive compilation.
@master/css-compiler/nodeSynchronous native compilation and filesystem resolution.
@master/css-compiler/projectAsynchronous project entry discovery and manifest loading.
@master/css-compiler/project/syncSynchronous project entry discovery and manifest loading.
@master/css-compiler/stylesheetNode.js stylesheet resolution, composition and delivery assets.
@master/css-compiler/stylesheet/browserBrowser compilation from supplied source and a base manifest.
@master/css-compiler/diagnosticsProject inspection reports with classes, files and diagnostics.

Supply the base manifest explicitly when an API requires it. Inspect returned diagnostics before using the result. A delivery result is an asset set: publish every stylesheet and resource at its assigned URL. See Imports for resolution and delivery boundaries.

Publishing a file compilation

compileManifestFileSync(file, { baseManifest, delivery }) reads the file graph and returns assets without writing them. delivery supplies entryURL, stylesheetURL(file) and resourceURL(file); give distinct stylesheets distinct final URLs. Publish every returned stylesheets item at its href, and copy each resources item from file to href. The top-level css, nativeCSS and generatedCSS describe the entry only. Relative resource URLs keep their original source owner, query and fragment; reference-only stylesheets do not become published assets. Missing resources and colliding stylesheet URLs fail before publication. Omitting delivery returns the single-string result, without this asset-publication contract.

preserveNativeCSS defaults to true; explicit false suppresses raw native CSS while retaining compiled native mixin applications in included output. It does not enable pruning. Stylesheet collections separately select native CSS, Master base CSS and generated utilities through includeNativeCSS, includeMasterBaseCSS and includeGeneratedCSS. Excluded native output does not remove definitions used by generated utilities. See native pruning for file policy.

validation: 'report' is the default: inspect diagnostics while retaining the result. validation: 'error' rejects known-invalid CSS in the complete result before returning assets; unknown capabilities alone do not fail it. Ranged diagnostics identify original stylesheet sources where a usable source map exists. A host transform that cannot map a generated segment must not invent an original position.

Preparing native CSS for another transformer

Compiler hosts can opt into preserveNativeSource: true when another transformer needs the untouched native portions of a stylesheet. Master definitions are still consumed and native @apply rules are still lowered, while unrelated comments, empty rules, value spelling, and rule boundaries are retained. The option defaults to false, preserving the compiler's normal native CSS normalization.

Source preservation cannot be combined with enabled native pruning. Passing a class list alone does not enable pruning. preserveNativeCSS: false still suppresses native output. The option does not prevent subsequent host transforms from optimizing the result or rewriting its source map, and it does not discover new Master definitions or generated-global references introduced by a later transform.

Continuing resource rendering after host transforms

compileRenderedStylesheet() and compileBrowserStylesheet() accept an optional emittedGlobals resource-count snapshot when another output already supplies generated theme variables or keyframe definitions. Positive counts suppress duplicate emission; zero counts do not. New references still emit their transitive resource closure. The returned snapshot includes the external context and resources required by this render, without changing the input snapshot. Omitting the option preserves normal standalone rendering.

This context prevents a later render from replacing an already processed variable with its original manifest value. It does not run host plugins on newly generated CSS. Hosts remain responsible for processing that new CSS and publishing its resources while preserving plugin ordering and source ownership.

Source and README · Public export mappings

@master/create-css

Plan and apply Master CSS setup for an existing project. The plan describes dependency changes, file edits, commands and warnings before application.

Import pathPurpose
@master/create-cssSetup planning, application and their options and result types.

Call planMasterCSSSetup() to inspect the proposed changes. applyMasterCSSSetupPlan() checks recorded file preconditions before writing; create a new plan if those files change. Setup can modify project files and install dependencies. See Installation for the interactive workflow.

Source and README · Public export mappings

@master/css

Execute a compiled manifest or runtime program, generate rules for class names and inspect engine state. CSS entrypoints provide the preset stylesheet layers.

Import pathPurpose
@master/cssAsynchronous engine creation and one-shot class rendering.
@master/css/nodeSynchronous native engine, runtime program compilation and reusable render sessions in Node.js.
@master/css/clientAmbient TypeScript declarations for generated virtual modules.
@master/css/index.cssComplete preset stylesheet entry.
@master/css/base.cssBase styles and the stable cascade-layer order.
@master/css/theme.cssPreset theme definitions.
@master/css/media.cssPreset viewport and preference conditions.
@master/css/container.cssPreset container width conditions.
@master/css/utilities.cssPreset utility registrations.

Pass an explicit manifest to engine and render APIs in Node.js, or a runtime program from compileRuntimeProgram() anywhere; browsers execute only programs. Reuse a session for repeated work and dispose it when finished. For stylesheet authoring and project loading, use the compiler; for DOM observation, use the runtime.

Build integrations expose the delivery artifacts as virtual modules declared by ./client: virtual:master-css-manifest is the compiled MasterCSSManifest for the Node engine, server renderer and tooling; virtual:master-css-program is the browser engine program, a hashed .bin asset in production builds; virtual:master-css-emitted-globals lists variables and keyframes the CSS entry already emits, so runtime generation does not repeat them. A page hydration manifest is separate and describes one response.

Build-time and server generation use Rust semantics; the browser engine executes compiled programs and produces the same CSS for the same definitions and classes. Compile with matching compiler, server and runtime releases: unsupported execution or language versions are rejected.

executionState(names) reads stored rule references in request order, repeats included, without generating rules; unknown or never-ensured classes have empty references. Use snapshot() for complete rules and CSS. The browser engine has no inspection or render sessions. A host must synchronize resource state even when a transition has no CSS mutations, and a wrapper must forward every MasterCSSEngine member, including executionState, registerEmittedGlobals, replaceEmittedGlobals, refresh, dispose and Symbol.dispose.

Source and README · Public export mappings

@master/css-svelte-addon

The official Svelte CLI add-on configures Master CSS in SvelteKit projects, including dependencies, Vite integration, stylesheet imports and server hooks.

Import pathPurpose
@master/css-svelte-addonDefault add-on consumed by the Svelte CLI.

Run this add-on through the Svelte CLI. Its setup rejects projects without SvelteKit, and its run step requires a Svelte dependency. See Svelte installation for the complete setup.

Source and README · Public export mappings

@master/eslint-config-css

Use the official flat-config preset to enable Master CSS lint rules in ESLint. The default export and recommended refer to the same configuration.

Import pathPurpose
@master/eslint-config-cssRecommended ESLint flat configuration.

Add the preset to your ESLint flat configuration. Configure project-specific behavior through the plugin settings; Code linting shows each rule.

@master/css/sort-classeswarnYes

Classes out of generated-rule order, and duplicates.

@master/css/no-invalid-classeserrorNo

Invalid Master CSS syntax and invalid generated CSS; unmatched classes only with disallowUnknownClass.

@master/css/no-conflicting-classeswarnYes

Full and partial declaration conflicts in the same variant scope; only full overrides are fixed.

@master/css/prefer-canonical-classeswarnYes

Non-canonical forms, only when token identity and generated-rule behavior are preserved.

@master/css/no-unapproved-raw-values and @master/css/prefer-component-classes are not in the preset.

Source and README · Public export mappings

@master/eslint-plugin-css

The ESLint plugin connects JavaScript and template syntax to Master CSS validation, class ordering and fixes. Its default and masterCSS exports expose the same plugin.

Import pathPurpose
@master/eslint-plugin-cssPlugin rules and recommended configuration.

Use the official preset for the standard rules, or register the plugin in your own flat configuration. See Code linting for rule behavior.

Settings live under the @master/css settings key. Arrays replace their defaults.

SettingDefaultUse
classAttributes['class', 'className']Markup attributes that contain class strings.
classFunctionsclsx, cva, ctl, cv, class, classnames, classVariant, styled, classList.add/remove/toggle/replaceCallees and tagged templates whose arguments can contain class strings; styled also accepts member forms such as styled.button.
classDeclarations[]Project variables or object properties treated as class declarations.
ignoredKeys['compoundVariants', 'defaultVariants']Object keys skipped while traversing variant config objects.

@master/css/no-unapproved-raw-values reports raw values in token-backed utilities. requireProperties limits it to listed native properties (empty or omitted checks every token-backed property); allowProperties and allowedPatterns add exceptions; allowRawValues disables it. Native custom-property references stay valid. Its diagnostic data names the property scope and canonical token families; it has no autofix.

@master/css/prefer-component-classes reports a class list in which more than max classes (default 3) style other elements through a top-level _, >, + or ~ combinator. Its diagnostic data lists classNames and their targets; it has no autofix.

Source and README · Public export mappings

@master/css-language-server

Provide Master CSS completion, hover, colors, formatting and semantic tokens through the Language Server Protocol. The library entry supports host-managed lifecycle; the server entry starts the process.

Import pathPurpose
@master/css-language-serverLanguage server, workspace settings and semantic-token request names.
@master/css-language-server/serverExecutable server startup entry; no named or default exports.

Create and start MasterCSSLanguageServer when embedding it in a host, then dispose it during shutdown. Loading the /server entry constructs and starts a server immediately. See Language service for the editor-facing workflow.

Source and README · Public export mappings

@master/css-language-service

Map Master CSS tooling results to editor documents, language features and syntax highlighting. Use the Shiki entrypoint for server-rendered code presentation.

Import pathPurpose
@master/css-language-serviceEditor document services, settings and trigger characters.
@master/css-language-service/commonShared completion trigger characters.
@master/css-language-service/shikiShiki transformer, semantic decorations and language registration.
@master/css-language-service/shiki.cssHover-activated markup class colors for Shiki output.
@master/css-language-service/syntaxes/master-css.tmLanguage.jsonTextMate grammar asset for directive highlighting.

Supply a tooling session when creating MasterCSSLanguageService. Shiki helpers accept a reusable language session or manifest through their options. Import @master/css-language-service/shiki.css for hover-activated markup highlighting. See Language service for configuration and examples.

Source and README · Public export mappings

@master/css-mcp

Create a Master CSS Model Context Protocol server or start its stdio transport. The tool catalog identifies operations and their file effects.

Import pathPurpose
@master/css-mcpServer factory and stdio startup.

Use createMasterCSSMCPServer() when the host owns transport setup, or startMasterCSSMCPStdioServer() for stdio. See MCP server for client registration and the tool catalog for usage; read complete contracts through tools/list.

Source and README · Public export mappings

@master/css-next

Connect Master CSS to Next.js configuration and build output. The root export wraps Next configuration; the adapter entry supports build integration and adapter composition.

Import pathPurpose
@master/css-nextNext configuration wrapper and integration options.
@master/css-next/adapterBuild adapter, composition helpers and rendered-output reports.

Use the root default export in Next configuration. Await the wrapper when using a rendering mode that processes build output. See Next.js installation for the setup and supported rendering modes.

Source and README · Public export mappings

@master/css-nuxt

Register Master CSS as a Nuxt module. The default and masterCSSNuxtModule exports refer to the same module.

Import pathPurpose
@master/css-nuxtNuxt module.

Register the module through Nuxt configuration so the framework owns its setup and lifecycle. See Nuxt installation for configuration.

Source and README · Public export mappings

@master/css-preset

The preset supplies theme tokens, conditions, utilities and a compiled default manifest. CSS imports and the JSON manifest serve different consumers.

Import pathPurpose
@master/css-presetComplete preset stylesheet entry.
@master/css-preset/default-manifest.jsonCompiled default manifest for engine, compiler and tooling APIs.
@master/css-preset/index.cssComplete preset stylesheet entry.
@master/css-preset/base.cssBase styles and the stable cascade-layer order.
@master/css-preset/theme.cssPreset theme definitions.
@master/css-preset/media.cssPreset viewport and preference conditions.
@master/css-preset/container.cssPreset container width conditions.
@master/css-preset/utilities.cssPreset utility registrations.

Import CSS when authoring a stylesheet; pass the JSON manifest to APIs that execute or compile against a base manifest. Theme tokens explains authoring and overrides.

Source and README · Public export mappings

@master/css-runtime

Observe classes in a document or shadow root and maintain their generated CSS. Runtime startup requires a runtime program, the project manifest compiled for the browser engine, and returns an owned session.

Import pathPurpose
@master/css-runtimeRuntime startup, observation, snapshots and custom-element integration.
@master/css-runtime/default-programThe default preset compiled into a runtime program, for apps without a Master CSS build integration.

Await MasterCSSRuntime.start() before using the session, and call dispose() when its owner is finished. withMasterCSSRuntime() integrates startup and disposal with custom-element connection callbacks and requires a shadow root. See Rendering modes for the browser workflow.

Official integrations inject startup. A custom entry passes program as a loader, such as () => import('virtual:master-css-program').then(module => module.default), plus emittedGlobals, then calls observe(). Runtime-only pages load the program during startup; progressive pages with a valid hydrationManifest defer the engine until a class outside it appears, unless engine: 'eager' or enginePrefetch: 'idle' is set. emittedGlobals applies to every page using the bundle. The runtime inserts generated rules and on-demand keyframes into its own stylesheet and never writes to linked stylesheets.

snapshot() separates usageCounts, connected DOM usage, from classRules, which can also hold warmed, hydrated or retained rules. engine is 'deferred', 'loading', 'ready' or 'failed'; before a deferred engine starts, class snapshots have no rule entries and layers is empty. ensureClassRules() and deleteClassRules() act independently of DOM usage; deletion is synchronous and bypasses retention. Before the engine is ready they throw RUNTIME_ENGINE_NOT_READY and start it, so await ready() first.

Source and README · Public export mappings

@master/css-schema

Shared types and codecs describe manifests, diagnostics, hydration and integration options. These contracts let hosts exchange structured Master CSS data.

Import pathPurpose
@master/css-schemaCommon manifest, diagnostic and rendering-mode exports.
@master/css-schema/manifestManifest v6 types, variable helpers and serialization.
@master/css-schema/hydration-manifestHydration rules, resource order and serialization helpers.
@master/css-schema/css-directivesDirective results, source ranges and output mappings.
@master/css-schema/css-syntaxUtility, selector and value representation types.
@master/css-schema/utility-typeUtility classification constants and their type.
@master/css-schema/runtime-styleRuntime style element identifier.
@master/css-schema/emitted-globalsCounts of resources already emitted outside a session.
@master/css-schema/css-commonShared CSS vendor identifiers.
@master/css-schema/diagnosticsDiagnostic versions, source ranges and error payloads.
@master/css-schema/integrationRendering modes and shared integration options.

Import types from the narrow subpath that owns them. A type declaration describes a data shape; it does not validate arbitrary input or compile stylesheet directives. Preserve version fields when passing manifests and diagnostics between APIs; editing them by hand does not make a manifest compatible.

Store manifests with serializeMasterCSSManifest(). Serialization normalizes derived fields; it does not replace engine validation or keep comments and editable CSS formatting. Unknown fields are not an extension mechanism: an outer envelope that retains them does not make nested fields accepted or executable.

Source and README · Public export mappings

@master/css-server

Render generated CSS into HTML and produce hydration data for the browser. Use a one-shot helper, a reusable renderer or a streaming HTML session to match the host lifecycle.

Import pathPurpose
@master/css-serverHTML rendering, streaming sessions and hydration options.

Provide a compiled manifest before rendering. Keep emitted-global and hydration metadata aligned with the CSS delivered to the client, and dispose reusable sessions after use. See Rendering modes for complete HTML examples.

createServerRenderer() caches rules across renders: recreate it when the manifest changes, and bound maxCachedClasses in a long-lived server. Custom hosts can pass the final stylesheets a page may link, as { href, css, imports } from describeLinkedStylesheet() in @master/css-compiler/stylesheet, with the documentURL that resolves them; theme variables and native keyframes those stylesheets already deliver are not repeated in style#master-css. Rendering tracks each keyframe definition independently, including same-name definitions in different layers or conditions.

Source and README · Public export mappings

@master/css-svelte

Integrate Master CSS with Svelte builds and SvelteKit server responses. Build and request handling use separate entrypoints.

Import pathPurpose
@master/css-svelte/viteSvelte-aware Vite plugin and options.
@master/css-svelte/hooks.serverNamed SvelteKit request handler.

Register the Vite plugin in build configuration and the named handle export in the SvelteKit server hook. See Svelte installation for the complete wiring.

Source and README · Public export mappings

@master/css-tooling

Analyze class syntax, extract candidates, validate rules and provide lint or language results. Choose a focused entrypoint or reuse a tooling session across operations.

Import pathPurpose
@master/css-toolingReusable asynchronous tooling session spanning analysis capabilities.
@master/css-tooling/nodeSynchronous native session and native declaration support.
@master/css-tooling/lexerClass-list and CSS source analysis.
@master/css-tooling/lexer/nodeSynchronous native class-list analysis.
@master/css-tooling/sourceSource candidate extraction and source-range types.
@master/css-tooling/source/nodeSynchronous native source extraction.
@master/css-tooling/scanner/nodeFilesystem scanner, retained candidates and scanner lifecycle.
@master/css-tooling/validatorClass validation against a supplied manifest.
@master/css-tooling/validator/nodeSynchronous native class validation.
@master/css-tooling/lintLint diagnostics, edits, canonical suggestions and content helpers.
@master/css-tooling/lint/nodeSynchronous native class linting.
@master/css-tooling/languageEditor-neutral analysis, completions, colors and semantic tokens.
@master/css-tooling/language/nodeSynchronous native language sessions and analysis.

Supply the project manifest when creating sessions or calling semantic helpers. Reuse sessions for repeated analysis, then dispose them. Node subpaths expose synchronous native operations; filesystem scanning has its own asynchronous lifecycle.

Source and README · Public export mappings

@master/css-vite

Register Master CSS in Vite to compile project styles and coordinate the selected rendering mode. The default export and createMasterCSSVitePlugin are the same factory.

Import pathPurpose
@master/css-viteVite plugin factory and options.

Call the factory in Vite configuration and let Vite own the returned plugin lifecycle. See Vite installation for the stylesheet entry and rendering-mode setup.

Source and README · Public export mappings

@master/css-webpack

Register Master CSS with Webpack. The default export and MasterCSSWebpackPlugin expose the plugin class; options select its rendering and scanner behavior.

Import pathPurpose
@master/css-webpackWebpack plugin class and options.

Construct the plugin in Webpack configuration so Webpack controls its compilation hooks. See Webpack installation for the stylesheet and loader setup.

Source and README · Public export mappings