Master CSS

Master CSS for Visual Studio Code provides manifest-aware language features for Master CSS classes, CSS directives, and project-specific tokens. The extension starts the bundled Master CSS language server, loads the nearest project manifest, and brings completion, hover, TextMate directive highlighting, semantic class-list highlighting, color tools, directive diagnostics, and directive formatting into supported files.

For the complete VS Code workflow, use this extension together with the official VS Code ESLint extension. Master CSS owns completion, hover, colors, highlighting, directive diagnostics, manifest diagnostics, and directive formatting. ESLint owns class policy diagnostics and sort-on-save for rules such as @master/css/sort-classes, @master/css/prefer-canonical-classes, and @master/css/no-conflicting-classes.

Quick Start

Install Master CSS from the Visual Studio Marketplace, or use extension ID masterco.master-css-vscode in VS Code. Editors using Open VSX use master.master-css-vscode.

Enable suggestions inside strings so utility completions appear in markup, JSX, template strings, and helper calls:

{
  "editor.quickSuggestions": {
    "strings": true
  }
}

For project-aware tokens, create a CSS entry that imports @master/css, or declare a Master CSS package dependency in the project package.json.

@import "@master/css";

@theme {
  --color-primary: #4f46e5;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-primary);
}

Features

• Syntax suggestions: Completes Master CSS utilities, values, selectors, queries, and directive syntax in configured languages.
• Hover inspection: Shows generated CSS previews for Master CSS syntax at the cursor.
• Syntax highlighting: Highlights CSS directive syntax with the bundled TextMate grammar, then uses semantic tokens for embedded class lists, token-backed values, selectors, pseudo states, queries, units, important markers, and quoted strings.
• Embedded highlighting modes: Highlights the active class context by default, can highlight every discovered embedded utility, or can disable embedded utility highlighting.
• Color support: Shows VS Code color decorators for supported Master CSS color syntax and lets the VS Code color picker edit those values.
• Directive diagnostics: Reports Master CSS directive errors in CSS, SCSS, LESS, and style blocks inside Vue, Svelte, and Astro files.
• Manifest diagnostics: Reports project manifest loading errors without taking over ESLint class policy warnings.
• Directive formatting: Formats Master CSS directives and keeps class important markers attached, such as (background-color:transparent) ! to (background-color:transparent)!.
• Workspace-aware manifests: Loads project manifests from the closest detected Master CSS workspace so completions and tokens reflect project tokens, utility recipes, mixins, and named conditions.
• Restart command: Provides Master CSS: Restart Language Server for reloading the language server after dependency, manifest, or workspace changes.

The default language list covers HTML, PHP, JavaScript, TypeScript, JSX, TSX, CSS, SCSS, LESS, Vue, Svelte, Rust, Astro, Markdown, and MDX.

For CSS, SCSS, and LESS document formatting, the extension delegates to VS Code's existing formatter first, then repairs Master CSS directive spacing and class-list important markers on the formatted text. Vue, Svelte, and Astro CSS-family <style> blocks can be formatted when Master CSS is explicitly selected as the formatter, but the extension does not take over their default formatters automatically.

Workspace Discovery

masterCSS.workspaces defaults to auto. In auto mode, the language server always creates a root workspace and also detects:

• CSS files importing @master/css
• package.json files that declare Master CSS package dependencies such as @master/css, @master/css-runtime, or official integration packages matching @master/css*

Each detected workspace gets its own language service and project manifest. In monorepos, this lets each package use its nearest Master CSS manifest while still keeping the root workspace available.

Use explicit workspace globs when auto detection is not the intended project shape:

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

Settings

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

{
  "masterCSS.suggestSyntax": true,
  "masterCSS.formatDirectives": true,
  "masterCSS.embeddedSyntaxHighlighting": "active"
}

Default class binding and function detection:

{
  "masterCSS.classAttributeBindings": {
    "className": ["{", "}"],
    "class": ["{", "}"],
    "class:list": ["{", "}"],
    ":class": ["\"", "\""],
    "v-bind:class": ["\"", "\""],
    "[class]": ["\"", "\""],
    "[className]": ["\"", "\""],
    "[ngClass]": ["\"", "\""]
  },
  "masterCSS.classFunctions": [
    "clsx",
    "cn",
    "cva",
    "ctl",
    "cv",
    "class",
    "classnames",
    "classVariant",
    "styled(?:\\s+)?(?:\\.\\w+)?",
    "classList(?:\\s+)?\\.(?:add|remove|toggle|replace)"
  ]
}

Common Customizations

Add a custom language ID:

{
  "masterCSS.includedLanguages": [
    "html",
    "typescriptreact",
    "vue",
    "astro",
    "edge"
  ]
}

Recognize project-specific class containers:

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

Exclude generated or vendored files:

{
  "masterCSS.exclude": [
    "**/.git/**",
    "**/node_modules/**",
    "**/.hg/**",
    "**/dist/**",
    "**/.next/**"
  ]
}

Choose embedded highlighting behavior:

{
  "masterCSS.embeddedSyntaxHighlighting": "always"
}

Use active for lower-noise active-context highlighting, always to highlight all discovered embedded utility classes, and off to disable embedded utility highlighting. Master CSS syntax inside CSS, SCSS, and LESS documents remains highlighted by the extension.

Disable directive formatting when another formatter integration must own all directive whitespace:

{
  "masterCSS.formatDirectives": false
}

Commands

Open the Command Palette and run:

Master CSS: Restart Language Server

Use this after changing dependencies, workspace layout, or project manifest files if VS Code has not reloaded the language server automatically. The extension also restarts the Master CSS language server when masterCSS.* settings change.

Requirements and Limitations

• Requires VS Code 1.123.0 or newer.
• Native packages cover macOS x64/ARM64, Windows x64/ARM64, Linux glibc x64/ARM64, and Alpine musl x64/ARM64. The Alpine artifacts are for compatible remote extension hosts; VS Code Desktop itself is not an Alpine application. A packaged artifact alone does not establish compatibility with every downstream editor or remote host.
• Linux ARM32 (linux-armhf) and Universal VSIX files are not provided. Install only the package matching a supported architecture.
• Requires a trusted local workspace because the language server loads configuration and code from the workspace.
• Does not support VS Code virtual workspaces or untrusted workspaces.
• Uses a TextMate injection grammar for CSS directive syntax and semantic tokens for Master CSS class-list spans. It does not contribute a custom .mcss language.

Keep only one Master CSS language extension enabled to avoid competing language servers. See the maintainer release notes.

Troubleshooting

• Completions do not show inside strings: Enable editor.quickSuggestions.strings as shown in Quick Start.
• Project tokens or utility completions are missing: Ensure the project has a detected CSS entry or Master CSS package dependency, then run Master CSS: Restart Language Server.
• The wrong monorepo package is used: Set masterCSS.workspaces to explicit workspace directories.
• Embedded markup highlighting is too noisy or too quiet: Change masterCSS.embeddedSyntaxHighlighting to active, always, or off.
• Semantic colors do not appear: Confirm VS Code semantic highlighting is enabled for the active theme.

Documentation

See the language service guide, the @master/css-language-service README, and the @master/css-language-server README for deeper details.

Community

• Documentation — Start with setup, features, and troubleshooting.
• GitHub Discussions — Ask usage questions and share ideas in English or Chinese.
• GitHub Issues — Report reproducible bugs with your editor, extension version, and project setup.

Discord remains available for informal community chat. Official support requests belong in GitHub Discussions or Issues; Discord has no guaranteed maintainer response.

_{Our 《 Code of Conduct 》 applies to all Master CSS community channels.}

Contributing

Please see our CONTRIBUTING for workflow.