Master CSS 語言服務

Use manifest-aware editor intelligence for Master CSS classes, directives, project tokens, generated CSS previews, colors, and workspace-specific configuration.

Overview

The Master CSS Language Service brings the project manifest into the editor. It reads the same variables, components, utilities, modes, selectors, and conditions that Master CSS uses to generate CSS, then uses that knowledge to make class strings easier to read and edit.

Use Visual Studio Code setup to install the official extension. Use it with the VS Code ESLint extension when you need team rules, diagnostics for committed markup, and automated class sorting.

Editor features

Syntax suggestions

Completion works inside configured class sources, including markup attributes, bound framework attributes, JavaScript helper calls, tagged templates, and project-specific class declarations.

<button class="inline-flex align-items:center gap:2x px:md py:xs r:md fg:white bg:blue-60">    Save</button>

Suggestions include utilities, property values, color tokens, selectors, queries, groups, and directive syntax. They are manifest-aware, so project tokens become completion items after the language service finds the correct workspace manifest.

Hover inspection

Hover inspection shows the generated CSS for a class at the cursor. This is useful when a class combines a declaration, value, selector state, and query in one compact string.

<button class="fg:white bg:blue-60:hover@sm">    Save</button>

Hovering bg:blue-60:hover@sm previews the CSS that Master CSS would emit for the hover state at the sm breakpoint.

Syntax highlighting

The extension highlights Master CSS directive syntax in CSS-family documents and uses semantic tokens for class-list spans. Embedded utilities can show their declaration, value, selector, query, unit, important marker, quoted segment, and component boundaries.

The default highlighting mode is active-context highlighting. It keeps long markup calm until the cursor enters a class string, then highlights the current class context.

Color tools

Color syntax can use VS Code color decorators and the color picker. This includes supported Master CSS color utilities and manifest colors that resolve through the active project.

<span class="fg:#4f46e5 bg:blue-60/.1">Primary</span>

Directive formatting

Document and range formatting can repair Master CSS directive source without changing compiler semantics, cascade behavior, or generated CSS. It is enabled by default with masterCSS.formatDirectives.

The formatter supports CSS, SCSS, and LESS documents. It also scans CSS-family <style> blocks in Vue, Svelte, and Astro documents when the Master CSS formatter handles the request.

For class-list directives, formatting keeps important markers attached to the class token:

.card {    @compose bg:transparent !;}

becomes:

.card {    @compose bg:transparent!;}

Diagnostics

The language server reports Master CSS directive errors in CSS, SCSS, LESS, and style blocks inside Vue, Svelte, and Astro files. It also reports project manifest loading errors so workspace setup issues are visible in the editor.

Class-string syntax, policy, and sort-on-save diagnostics in markup and JavaScript are owned by code linting. The language server does not duplicate sort-classes, prefer-canonical-classes, no-conflicting-classes, no-invalid-classes, or no-unapproved-raw-values warnings.

Supported class sources

The default settings cover common web, framework, and content files: HTML, PHP, JavaScript, TypeScript, JSX, TSX, CSS, SCSS, LESS, Vue, Svelte, Rust, Astro, Markdown, and MDX.

Customize the source settings when a project uses its own class helpers or naming conventions:

{    "masterCSS.classAttributes": [        "class",        "className",        "ui"    ],    "masterCSS.classDeclarations": [        "classes",        "styles"    ],    "masterCSS.classFunctions": [        "clsx",        "cva",        "cn"    ]}

Workspace-aware manifests

The language server creates a root workspace, then masterCSS.workspaces controls whether additional project workspaces are detected.

With the default auto mode, it detects:

• CSS files importing @master/css
• CSS files containing the lightweight @master entry; marker
• package.json files that declare Master CSS package dependencies

Each detected workspace gets its own language service and manifest. In a monorepo, this keeps completions, hover previews, colors, directive diagnostics, and component names aligned with the nearest Master CSS project.

{    "masterCSS.workspaces": [        "apps/admin",        "apps/shop",        "packages/design-system"    ]}

Use explicit workspace globs when auto-detection does not match the repository layout. See Monorepo for project-boundary guidance.

Highlighting modes

Embedded syntax highlighting is controlled by masterCSS.embeddedSyntaxHighlighting.

{    "masterCSS.embeddedSyntaxHighlighting": "active"}

If semantic colors do not appear, confirm that semantic highlighting is enabled in the active VS Code theme.

Settings

Set options in .vscode/settings.json or VS Code user settings with the masterCSS. prefix.

{    "editor.quickSuggestions": {        "strings": true    },    "masterCSS.suggestSyntax": true,    "masterCSS.inspectSyntax": true,    "masterCSS.renderSyntaxColors": true,    "masterCSS.formatDirectives": true,    "masterCSS.embeddedSyntaxHighlighting": "active"}

Run Master CSS: Restart Language Server after dependency changes, major workspace-layout changes, or manifest edits if VS Code has not reloaded the language server automatically.

Troubleshooting

Setup links

• Visual Studio Code setup for extension installation, string completions, project-aware entries, ESLint diagnostics, and sort-on-save.
• Code linting for rule behavior, options, and team policy examples.
• Monorepo for workspace boundaries across multiple projects.