@master/css-language-service 0.0.0-site.1793659883.g69c9aebcf628

package/README.md

@@ -0,0 +1,131 @@
+<br>
+<div align="center">
+
+<p align="center">
+  <a href="https://css.master.co">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/33840671/201701649-3bb7d698-abec-4d5f-ac30-ccc4d7bafcd4.svg">
+      <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/33840671/201703010-77bf2373-9899-40cc-98f5-30cf9b546941.svg">
+      <img alt="Master CSS" src="https://user-images.githubusercontent.com/33840671/201703010-77bf2373-9899-40cc-98f5-30cf9b546941.svg" width="100%">
+    </picture>
+  </a>
+</p>
+<p align="center">Language Service for Master CSS</p>
+
+<p align="center">
+  <a aria-label="GitHub release (latest by date including pre-releases)" href="https://github.com/master-co/css/releases">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/v/release/master-co/css?include_prereleases&color=212022&label=&style=for-the-badge&logo=github&logoColor=fff">
+      <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/v/release/master-co/css?include_prereleases&color=f6f7f8&label=&style=for-the-badge&logo=github&logoColor=%23000">
+      <img alt="NPM Version" src="https://img.shields.io/github/v/release/master-co/css?include_prereleases&color=f6f7f8&label=&style=for-the-badge&logo=github">
+    </picture>
+  </a>
+  <a aria-label="NPM Package" href="https://www.npmjs.com/package/@master/css-language-service">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/dm/@master/css-language-service?color=212022&label=%20&logo=npm&style=for-the-badge">
+      <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/npm/dm/@master/css-language-service?color=f6f7f8&label=%20&logo=npm&style=for-the-badge">
+      <img alt="NPM package ( download / month )" src="https://img.shields.io/npm/dm/@master/css-language-service?color=f6f7f8&label=%20&logo=npm&style=for-the-badge">
+    </picture>
+  </a>
+  <a aria-label="JSDelivr" href="https://www.jsdelivr.com/package/npm/@master/css-language-service">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/jsdelivr/npm/hm/@master/css-language-service?color=212022&label=%20&logo=jsdelivr&style=for-the-badge">
+      <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/jsdelivr/npm/hm/@master/css-language-service?color=f6f7f8&label=%20&logo=jsdelivr&style=for-the-badge">
+      <img alt="JSDelivr hits (npm scoped)" src="https://img.shields.io/jsdelivr/npm/hm/@master/css-language-service?color=f6f7f8&label=%20&logo=jsdelivr&style=for-the-badge">
+    </picture>
+  </a>
+  <a aria-label="Discord Community" href="https://discord.gg/sZNKpAAAw6">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/discord/917780624314613760?color=212022&label=%20&logo=discord&style=for-the-badge">
+      <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/discord/917780624314613760?color=f6f7f8&label=%20&logo=discord&style=for-the-badge">
+      <img alt="Discord online" src="https://img.shields.io/discord/917780624314613760?color=f6f7f8&label=%20&logo=discord&style=for-the-badge">
+    </picture>
+  </a>
+  <a aria-label="Follow @mastercorg" href="https://twitter.com/mastercorg">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/static/v1?label=%20&message=twitter&color=212022&logo=twitter&style=for-the-badge">
+      <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/static/v1?label=%20&message=twitter&color=f6f7f8&logo=twitter&style=for-the-badge">
+      <img alt="Follow @mastercorg" src="https://img.shields.io/static/v1?label=%20&message=twitter&color=f6f7f8&logo=twitter&style=for-the-badge">
+    </picture>
+  </a>
+  <a aria-label="Github Actions" href="https://github.com/master-co/css/actions/workflows/ci-release.yml">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/actions/workflow/status/master-co/css/ci-release.yml?branch=rc&label=%20&message=twitter&color=212022&logo=githubactions&style=for-the-badge">
+      <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/actions/workflow/status/master-co/css/ci-release.yml?branch=rc&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000">
+      <img alt="Github release actions" src="https://img.shields.io/github/actions/workflow/status/master-co/css/ci-release.yml?branch=rc&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000">
+    </picture>
+  </a>
+</p>
+
+</div>
+
+## Installation
+
+```bash
+npm install @master/css-language-service
+```
+
+## Usage
+
+```js
+import { MasterCSSLanguageService } from '@master/css-language-service'
+import { createToolingSession } from '@master/css-tooling'
+
+const session = await createToolingSession({ manifest })
+const languageService = new MasterCSSLanguageService(customSettings, { session })
+```
+
+`MasterCSSLanguageService` provides stateful completion, hover, color, color presentation, and semantic token features around one manifest-scoped tooling session. Dispose the service when the editor workspace closes.
+
+### Semantic tokens
+
+```ts
+const semanticTokens = languageService.renderSemanticTokens(textDocument)
+```
+
+Semantic tokens are generated with the project manifest, so project tokens, utility definitions, and other manifest-dependent syntax can be classified after the caller loads the manifest.
+
+Use `renderSemanticTokensAtPosition()` when a client wants active-only highlighting for the embedded class context at the current editor position.
+
+```ts
+const semanticTokens = languageService.renderSemanticTokensAtPosition(textDocument, position)
+```
+
+CSS directive syntax in CSS-family documents is highlighted by the shared TextMate grammar. Semantic tokens are only added for directive class-list spans such as quoted `@safelist` strings.
+
+### Directive formatting
+
+```ts
+const edits = languageService.formatDirectives(textDocument)
+```
+
+Directive formatting returns LSP text edits for Master CSS directive source. It supports CSS, SCSS, and LESS documents, plus CSS-family `<style>` blocks in Vue, Svelte, and Astro documents. The formatter repairs directive class-list important markers such as `(background-color:transparent) !` to `(background-color:transparent)!` and does not change compiler semantics or generated CSS.
+
+Pass an LSP range as the second argument for range formatting:
+
+```ts
+const edits = languageService.formatDirectives(textDocument, range)
+```
+
+## Settings
+
+```js
+import { defaultLanguageServiceSettings } from '@master/css-language-service'
+```
+
+| Setting | Type | Default | Description |
+| --- | --- | --- | --- |
+| `includedLanguages` | `string[]` | Common web and template languages | Language IDs that receive language-service features. |
+| `exclude` | `string[]` | `["**/.git/**", "**/node_modules/**", "**/.hg/**"]` | Glob patterns excluded from all features. |
+| `classAttributes` | `string[]` | `["class", "className"]` | Quoted markup attributes that contain Master CSS class strings. |
+| `classAttributeBindings` | `Record<string, [string, string] \| false>` | Framework binding defaults | Bound attributes such as `:class`, `[ngClass]`, and `class:list`. |
+| `classFunctions` | `string[]` | Common class helpers | Functions and methods whose string arguments contain classes, such as `clsx()` and `classList.add()`. |
+| `classDeclarations` | `string[]` | `[]` | Variable declarations or object properties whose string values contain classes. |
+| `suggestSyntax` | `boolean` | `true` | Enables syntax suggestions. |
+| `inspectSyntax` | `boolean` | `true` | Enables hover inspection and generated CSS previews. |
+| `renderSyntaxColors` | `boolean` | `true` | Enables color rendering. |
+| `editSyntaxColors` | `boolean` | `true` | Enables color editing. |
+| `formatDirectives` | `boolean` | `true` | Enables Master CSS directive formatting. |
+| `embeddedSyntaxHighlighting` | `'active' \| 'always' \| 'off'` | `'active'` | Controls embedded semantic token highlighting. |
+
+Use `@master/css-tooling/language` directly for browser helpers, Shiki integration, TextMate grammar assets, and raw class-position scanning.

package/dist/common.d.ts

@@ -0,0 +1,2 @@
+import { AT_TRIGGER_CHARACTER, INVOKED_TRIGGER_CHARACTERS, QUERY_TRIGGER_CHARACTERS, SELECTOR_TRIGGER_CHARACTERS, VALUE_TRIGGER_CHARACTERS } from "@master/css-tooling/language";
+export { AT_TRIGGER_CHARACTER, INVOKED_TRIGGER_CHARACTERS, QUERY_TRIGGER_CHARACTERS, SELECTOR_TRIGGER_CHARACTERS, VALUE_TRIGGER_CHARACTERS };

package/dist/common.js

@@ -0,0 +1 @@
+export { AT_TRIGGER_CHARACTER, INVOKED_TRIGGER_CHARACTERS, QUERY_TRIGGER_CHARACTERS, SELECTOR_TRIGGER_CHARACTERS, VALUE_TRIGGER_CHARACTERS } from "@master/css-tooling/language";

package/dist/core.d.ts

@@ -0,0 +1,34 @@
+import { Position } from "vscode-languageserver-protocol";
+import { TextDocument } from "vscode-languageserver-textdocument";
+import { MasterCSSLanguageClassPosition, MasterCSSToolingSession } from "@master/css-tooling";
+import { MasterCSSLanguageServiceSettings } from "./settings.js";
+import inspectSyntax from "./features/inspect-syntax.js";
+import renderSyntaxColors from "./features/render-syntax-colors.js";
+import editSyntaxColors from "./features/edit-syntax-colors.js";
+import formatDirectives from "./features/format-directives.js";
+import renderSemanticTokens, { renderSemanticTokensAtPosition } from "./features/render-semantic-tokens.js";
+import suggestSyntax from "./features/suggest-syntax.js";
+interface MasterCSSLanguageServiceOptions {
+  session: MasterCSSToolingSession;
+}
+declare class MasterCSSLanguageService implements Disposable {
+  customSettings: MasterCSSLanguageServiceSettings | undefined;
+  readonly settings: MasterCSSLanguageServiceSettings;
+  readonly session: MasterCSSToolingSession;
+  constructor(customSettings: MasterCSSLanguageServiceSettings | undefined, options: MasterCSSLanguageServiceOptions);
+  dispose(): void;
+  [Symbol.dispose](): void;
+  inspectSyntax(...params: Parameters<typeof inspectSyntax>): import("vscode-languageserver-types").Hover | undefined;
+  renderSyntaxColors(...params: Parameters<typeof renderSyntaxColors>): Promise<import("vscode-languageserver-types").ColorInformation[]> | undefined;
+  editSyntaxColors(...params: Parameters<typeof editSyntaxColors>): import("vscode-languageserver-types").ColorPresentation[] | undefined;
+  formatDirectives(...params: Parameters<typeof formatDirectives>): import("vscode-languageserver-types").TextEdit[] | undefined;
+  renderSemanticTokens(...params: Parameters<typeof renderSemanticTokens>): import("vscode-languageserver-types").SemanticTokens | undefined;
+  renderSemanticTokensAtPosition(...params: Parameters<typeof renderSemanticTokensAtPosition>): import("vscode-languageserver-types").SemanticTokens | undefined;
+  suggestSyntax(...params: Parameters<typeof suggestSyntax>): import("vscode-languageserver-types").CompletionItem[] | undefined;
+  getClassPositions(document: TextDocument): MasterCSSLanguageClassPosition[];
+  getClassPosition(document: TextDocument, position: Position): MasterCSSLanguageClassPosition | undefined;
+  getClassContextPositions(document: TextDocument, position: Position): MasterCSSLanguageClassPosition[];
+  private analyzeDocumentClassPositions;
+  isDocumentAccepted(document: TextDocument): boolean;
+}
+export { MasterCSSLanguageService, MasterCSSLanguageServiceOptions };

package/dist/core.js

@@ -0,0 +1,81 @@
+import { analyzeDocument, clearDocumentAnalyses } from "./document-analysis.js";
+import { defaultLanguageServiceSettings } from "./settings.js";
+import inspectSyntax from "./features/inspect-syntax.js";
+import renderSyntaxColors from "./features/render-syntax-colors.js";
+import editSyntaxColors from "./features/edit-syntax-colors.js";
+import formatDirectives from "./features/format-directives.js";
+import renderSemanticTokens, { renderSemanticTokensAtPosition } from "./features/render-semantic-tokens.js";
+import suggestSyntax from "./features/suggest-syntax.js";
+import { defu } from "defu";
+import { minimatch } from "minimatch";
+// src/core.ts
+var MasterCSSLanguageService = class {
+	customSettings;
+	settings;
+	session;
+	constructor(customSettings, options) {
+		this.customSettings = customSettings;
+		if (!options?.session) throw new TypeError("MasterCSSLanguageService requires a MasterCSSToolingSession.");
+		this.settings = defu(customSettings, defaultLanguageServiceSettings);
+		this.session = options.session;
+	}
+	dispose() {
+		clearDocumentAnalyses(this);
+		this.session.dispose();
+	}
+	[Symbol.dispose]() {
+		this.dispose();
+	}
+	inspectSyntax(...params) {
+		if (this.settings.inspectSyntax && this.isDocumentAccepted(params[0])) return inspectSyntax.call(this, ...params);
+	}
+	renderSyntaxColors(...params) {
+		if (this.settings.renderSyntaxColors && this.isDocumentAccepted(params[0])) return renderSyntaxColors.call(this, ...params);
+	}
+	editSyntaxColors(...params) {
+		if (this.settings.editSyntaxColors && this.isDocumentAccepted(params[0])) return editSyntaxColors.call(this, ...params);
+	}
+	formatDirectives(...params) {
+		if (this.settings.formatDirectives && this.isDocumentAccepted(params[0])) return formatDirectives.call(this, ...params);
+	}
+	renderSemanticTokens(...params) {
+		if (this.isDocumentAccepted(params[0])) return renderSemanticTokens.call(this, ...params);
+	}
+	renderSemanticTokensAtPosition(...params) {
+		if (this.isDocumentAccepted(params[0])) return renderSemanticTokensAtPosition.call(this, ...params);
+	}
+	suggestSyntax(...params) {
+		if (this.settings.suggestSyntax && this.isDocumentAccepted(params[0])) return suggestSyntax.call(this, ...params);
+	}
+	getClassPositions(document) {
+		return this.analyzeDocumentClassPositions(document);
+	}
+	getClassPosition(document, position) {
+		const offset = document.offsetAt(position);
+		const classPositions = this.analyzeDocumentClassPositions(document);
+		const exact = classPositions.filter(({ range }) => offset >= range.start && offset <= range.end).sort((left, right) => left.range.end - left.range.start - (right.range.end - right.range.start))[0];
+		if (exact) return exact;
+		const context = classPositions.find(({ contextRange }) => offset >= contextRange.start && offset <= contextRange.end);
+		const source = document.getText();
+		if (context && (offset === context.contextRange.start || /\s/u.test(source[offset - 1] || ""))) return {
+			range: {
+				start: offset,
+				end: offset
+			},
+			contextRange: context.contextRange,
+			raw: "",
+			token: ""
+		};
+	}
+	getClassContextPositions(document, position) {
+		const offset = document.offsetAt(position);
+		return this.analyzeDocumentClassPositions(document).filter(({ contextRange }) => offset >= contextRange.start && offset <= contextRange.end);
+	}
+	analyzeDocumentClassPositions(document) {
+		return [...analyzeDocument(this, document).classPositions];
+	}
+	isDocumentAccepted(document) {
+		return !this.settings.exclude?.some((pattern) => minimatch(document.uri, pattern));
+	}
+};
+export { MasterCSSLanguageService };

package/dist/document-analysis.d.ts

@@ -0,0 +1,16 @@
+import { MasterCSSDocumentAnalysis } from "@master/css-tooling/language";
+import { TextDocument } from "vscode-languageserver-textdocument";
+import { MasterCSSLanguageService } from "./core.js";
+declare function clearDocumentAnalyses(service: MasterCSSLanguageService): void;
+/** The Rust document request for a document under the service's class settings. */
+declare function documentRequest(service: MasterCSSLanguageService, document: TextDocument): {
+  source: string;
+  languageId: string;
+  settings: {
+    classAttributes: string[] | undefined;
+    classFunctions: string[] | undefined;
+    classDeclarations: string[] | undefined;
+  };
+};
+declare function analyzeDocument(service: MasterCSSLanguageService, document: TextDocument): MasterCSSDocumentAnalysis;
+export { analyzeDocument, clearDocumentAnalyses, documentRequest };

package/dist/document-analysis.js

@@ -0,0 +1,34 @@
+// src/document-analysis.ts
+const documents = /* @__PURE__ */ new WeakMap();
+function clearDocumentAnalyses(service) {
+	documents.delete(service);
+}
+/** The Rust document request for a document under the service's class settings. */
+function documentRequest(service, document) {
+	return {
+		source: document.getText(),
+		languageId: document.languageId,
+		settings: {
+			classAttributes: service.settings.classAttributes,
+			classFunctions: service.settings.classFunctions,
+			classDeclarations: service.settings.classDeclarations
+		}
+	};
+}
+function analyzeDocument(service, document) {
+	const request = documentRequest(service, document);
+	const settingsKey = JSON.stringify(request.settings);
+	let cache = documents.get(service);
+	const cached = cache?.get(document);
+	if (cached && cached.version === document.version && cached.languageId === document.languageId && cached.settingsKey === settingsKey) return cached.result;
+	const result = service.session.analyzeDocument(request);
+	if (!cache) documents.set(service, cache = /* @__PURE__ */ new WeakMap());
+	cache.set(document, {
+		version: document.version,
+		languageId: document.languageId,
+		settingsKey,
+		result
+	});
+	return result;
+}
+export { analyzeDocument, clearDocumentAnalyses, documentRequest };

package/dist/features/edit-syntax-colors.d.ts

@@ -0,0 +1,5 @@
+import { ColorPresentation, ColorPresentationParams } from "vscode-languageserver-protocol";
+import { TextDocument } from "vscode-languageserver-textdocument";
+import { MasterCSSLanguageService } from "../core.js";
+declare function editSyntaxColors(this: MasterCSSLanguageService, document: TextDocument, color: ColorPresentationParams['color'], range: ColorPresentationParams['range']): ColorPresentation[];
+export { editSyntaxColors as default };

package/dist/features/edit-syntax-colors.js

@@ -0,0 +1,36 @@
+import { convertColorInFormat } from "../utils/convert-color-token.js";
+// src/features/edit-syntax-colors.ts
+const commonFormats = [
+	{ syntax: "hex" },
+	{ syntax: "rgb" },
+	{ syntax: "hsl" },
+	{ syntax: "oklch" }
+];
+function editSyntaxColors(document, color, range) {
+	const selectedColorToken = document.getText(range);
+	const rustPresentation = this.session.colorPresentation(selectedColorToken);
+	if (!rustPresentation.editable) return [];
+	const formats = rustPresentation.sourceFormat ? [rustPresentation.sourceFormat, ...commonFormats] : [...commonFormats];
+	const colorPresentations = [];
+	const formatKeys = /* @__PURE__ */ new Set();
+	const tokens = /* @__PURE__ */ new Set();
+	for (const format of formats) {
+		const formatKey = `${format.syntax}:${format.space || ""}`;
+		if (formatKeys.has(formatKey)) continue;
+		formatKeys.add(formatKey);
+		try {
+			const targetColorToken = convertColorInFormat(color, format);
+			if (tokens.has(targetColorToken)) continue;
+			tokens.add(targetColorToken);
+			colorPresentations.push({
+				label: targetColorToken,
+				textEdit: {
+					range,
+					newText: (rustPresentation.replacementPrefix || "") + targetColorToken + (rustPresentation.replacementSuffix || "")
+				}
+			});
+		} catch {}
+	}
+	return colorPresentations;
+}
+export { editSyntaxColors as default };

package/dist/features/format-directives.d.ts

@@ -0,0 +1,5 @@
+import { Range, TextEdit } from "vscode-languageserver-protocol";
+import { TextDocument } from "vscode-languageserver-textdocument";
+import { MasterCSSLanguageService } from "../core.js";
+declare function formatDirectives(this: MasterCSSLanguageService, document: TextDocument, range?: Range): TextEdit[] | undefined;
+export { formatDirectives as default };

package/dist/features/format-directives.js

@@ -0,0 +1,60 @@
+// src/features/format-directives.ts
+const CSS_FORMAT_LANGUAGE_IDS = /* @__PURE__ */ new Set([
+	"css",
+	"scss",
+	"less"
+]);
+const SFC_FORMAT_LANGUAGE_IDS = /* @__PURE__ */ new Set([
+	"vue",
+	"svelte",
+	"astro"
+]);
+const STYLE_BLOCK_RE = /<style\b([^>]*)>([\s\S]*?)<\/style>/gi;
+function getSFCStyleLanguage(attributes) {
+	const match = /\blang\s*=\s*(?:"([^"]+)"|'([^']+)'|([^\s>]+))/i.exec(attributes);
+	return (match?.[1] || match?.[2] || match?.[3] || "css").toLowerCase();
+}
+function toOffsetRange(document, range) {
+	if (!range) return;
+	return {
+		start: document.offsetAt(range.start),
+		end: document.offsetAt(range.end)
+	};
+}
+function toTextEdit(document, edit) {
+	return {
+		range: {
+			start: document.positionAt(edit.range.start),
+			end: document.positionAt(edit.range.end)
+		},
+		newText: edit.text
+	};
+}
+function collectSFCStyleRanges(document) {
+	const source = document.getText();
+	const ranges = [];
+	STYLE_BLOCK_RE.lastIndex = 0;
+	for (const match of source.matchAll(STYLE_BLOCK_RE)) {
+		const styleLanguage = getSFCStyleLanguage(match[1]);
+		if (!CSS_FORMAT_LANGUAGE_IDS.has(styleLanguage)) continue;
+		const styleText = match[2];
+		const styleStart = (match.index || 0) + match[0].indexOf(">") + 1;
+		const styleEnd = styleStart + styleText.length;
+		ranges.push({
+			start: styleStart,
+			end: styleEnd
+		});
+	}
+	return ranges;
+}
+function formatDirectives(document, range) {
+	const isCSS = CSS_FORMAT_LANGUAGE_IDS.has(document.languageId);
+	const isSFC = SFC_FORMAT_LANGUAGE_IDS.has(document.languageId);
+	if (!isCSS && !isSFC) return;
+	return this.session.formatDirectives({
+		source: document.getText(),
+		range: toOffsetRange(document, range),
+		styleRanges: isSFC ? collectSFCStyleRanges(document) : void 0
+	}).edits.map(toTextEdit.bind(void 0, document));
+}
+export { formatDirectives as default };

package/dist/features/inspect-syntax.d.ts

@@ -0,0 +1,5 @@
+import { Hover, HoverParams } from "vscode-languageserver-protocol";
+import { TextDocument } from "vscode-languageserver-textdocument";
+import { MasterCSSLanguageService } from "../core.js";
+declare function inspectSyntax(this: MasterCSSLanguageService, document: TextDocument, position: HoverParams['position']): Hover | undefined;
+export { inspectSyntax as default };

package/dist/features/inspect-syntax.js

@@ -0,0 +1,48 @@
+import { analyzeDocument } from "../document-analysis.js";
+import createCSSMarkdownDocumentation from "../utils/create-css-markdown-documentation.js";
+// src/features/inspect-syntax.ts
+function inspectSyntax(document, position) {
+	const offset = document.offsetAt(position);
+	const keyframe = analyzeDocument(this, document).keyframePositions.find(({ range }) => offset >= range.start && offset <= range.end);
+	if (keyframe) {
+		const entry = this.session.completionIndex().keyframes.find((entry) => entry.name === keyframe.token);
+		if (!entry) return;
+		const origins = entry.sources.map((source) => `${source.file || "stylesheet"}${source.loc ? `:${source.loc.start.line}` : ""}`).join("\n");
+		return {
+			contents: {
+				kind: "markdown",
+				value: [createCSSMarkdownDocumentation(entry.text)?.value, origins].filter(Boolean).join("\n\n")
+			},
+			range: {
+				start: document.positionAt(keyframe.range.start),
+				end: document.positionAt(keyframe.range.end)
+			}
+		};
+	}
+	const classPosition = this.getClassPosition(document, position);
+	if (!classPosition) return;
+	const inspection = this.session.inspectClassName(classPosition.token);
+	const documentation = createCSSMarkdownDocumentation(inspection.text);
+	const range = {
+		start: document.positionAt(classPosition.range.start),
+		end: document.positionAt(classPosition.range.end)
+	};
+	const messages = (inspection.diagnostics ?? []).map((diagnostic) => `**${diagnostic.code}**: ${diagnostic.message}${diagnostic.notes?.length ? `\n\n${diagnostic.notes.join("\n\n")}` : ""}`);
+	if (!documentation && !messages.length) return;
+	const names = inspection.kind === "token" ? [...new Set(inspection.variables.map(({ variable }) => `\`--${variable.name}\``))] : [];
+	const origin = inspection.kind === "token" ? `Named token${names.length ? `: ${names.join(", ")}` : ""}` : inspection.kind === "component" ? "(components)" : "";
+	const status = inspection.cssValueStatus === "invalid" || inspection.cssValueStatus === "unknown" ? `CSS value check: **${inspection.cssValueStatus}**. Browser support: **${inspection.browserSupport}**.` : "";
+	return {
+		contents: {
+			kind: "markdown",
+			value: [
+				origin,
+				documentation?.value,
+				status,
+				...messages
+			].filter(Boolean).join("\n\n")
+		},
+		range
+	};
+}
+export { inspectSyntax as default };

package/dist/features/render-semantic-tokens.d.ts

@@ -0,0 +1,6 @@
+import { SemanticTokens } from "vscode-languageserver-protocol";
+import { TextDocument } from "vscode-languageserver-textdocument";
+import { MasterCSSLanguageService } from "../core.js";
+declare function renderSemanticTokensAtPosition(this: MasterCSSLanguageService, document: TextDocument, position: Parameters<MasterCSSLanguageService['getClassPosition']>[1]): SemanticTokens | undefined;
+declare function renderSemanticTokens(this: MasterCSSLanguageService, document: TextDocument): SemanticTokens | undefined;
+export { renderSemanticTokens as default, renderSemanticTokensAtPosition };

package/dist/features/render-semantic-tokens.js

@@ -0,0 +1,36 @@
+import { analyzeDocument } from "../document-analysis.js";
+import { SEMANTIC_TOKEN_MODIFIERS, SEMANTIC_TOKEN_TYPES } from "@master/css-tooling/language";
+// src/features/render-semantic-tokens.ts
+const CSS_LANGUAGE_IDS = /* @__PURE__ */ new Set(["css", "scss"]);
+function encodeSemanticTokens(document, tokens) {
+	const data = [];
+	let previousLine = 0;
+	let previousCharacter = 0;
+	for (const token of [...tokens].sort((left, right) => left.start - right.start || left.end - right.end)) {
+		const start = document.positionAt(token.start);
+		const deltaLine = start.line - previousLine;
+		const deltaCharacter = deltaLine === 0 ? start.character - previousCharacter : start.character;
+		const tokenType = SEMANTIC_TOKEN_TYPES.indexOf(token.type);
+		const modifiers = (token.modifiers || []).reduce((bits, modifier) => {
+			const index = SEMANTIC_TOKEN_MODIFIERS.indexOf(modifier);
+			return index < 0 ? bits : bits | 1 << index;
+		}, 0);
+		data.push(deltaLine, deltaCharacter, token.end - token.start, tokenType, modifiers);
+		previousLine = start.line;
+		previousCharacter = start.character;
+	}
+	return data;
+}
+function renderSemanticTokensAtPosition(document, position) {
+	if (this.settings.embeddedSyntaxHighlighting === "off") return;
+	const classPosition = this.getClassPosition(document, position);
+	if (!classPosition) return;
+	const data = encodeSemanticTokens(document, analyzeDocument(this, document).semanticTokens.filter(({ start, end }) => start >= classPosition.contextRange.start && end <= classPosition.contextRange.end));
+	return data.length ? { data } : void 0;
+}
+function renderSemanticTokens(document) {
+	if (this.settings.embeddedSyntaxHighlighting !== "always" && !CSS_LANGUAGE_IDS.has(document.languageId)) return;
+	const result = analyzeDocument(this, document);
+	return result.semanticTokenData.length ? { data: [...result.semanticTokenData] } : void 0;
+}
+export { renderSemanticTokens as default, renderSemanticTokensAtPosition };

package/dist/features/render-syntax-colors.d.ts

@@ -0,0 +1,5 @@
+import { ColorInformation } from "vscode-languageserver-protocol";
+import { TextDocument } from "vscode-languageserver-textdocument";
+import { MasterCSSLanguageService } from "../core.js";
+declare function renderSyntaxColors(this: MasterCSSLanguageService, document: TextDocument): Promise<ColorInformation[]>;
+export { renderSyntaxColors as default };

package/dist/features/render-syntax-colors.js

@@ -0,0 +1,47 @@
+import Color from "colorjs.io";
+// src/features/render-syntax-colors.ts
+const colorJsSpaces = {
+	"display-p3": "p3",
+	"a98-rgb": "a98rgb",
+	"prophoto-rgb": "prophoto",
+	"xyz": "xyz-d65"
+};
+function evaluateColorExpression(expression) {
+	if (expression.kind === "literal") {
+		const color = new Color(expression.value);
+		if (expression.alpha !== void 0) color.alpha *= expression.alpha;
+		return color;
+	}
+	const color = Color.mix(evaluateColorExpression(expression.left), evaluateColorExpression(expression.right), expression.progress, {
+		space: colorJsSpaces[expression.space] || expression.space,
+		premultiplied: true,
+		hue: expression.hue
+	});
+	color.alpha *= expression.alphaMultiplier;
+	return color;
+}
+async function renderSyntaxColors(document) {
+	const candidates = this.getClassPositions(document).map(({ token, range }) => ({
+		className: token,
+		start: range.start
+	}));
+	const colors = [];
+	for (const token of this.session.colorTokens(candidates).tokens) try {
+		const srgb = evaluateColorExpression(token.expression).to("srgb");
+		const clamp = (value) => Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 0;
+		colors.push({
+			range: {
+				start: document.positionAt(token.range.start),
+				end: document.positionAt(token.range.end)
+			},
+			color: {
+				red: clamp(srgb.r ?? 0),
+				green: clamp(srgb.g ?? 0),
+				blue: clamp(srgb.b ?? 0),
+				alpha: clamp(Number(srgb.alpha))
+			}
+		});
+	} catch {}
+	return colors;
+}
+export { renderSyntaxColors as default };

package/dist/features/suggest-syntax.d.ts

@@ -0,0 +1,5 @@
+import { CompletionItem, CompletionParams } from "vscode-languageserver-protocol";
+import { TextDocument } from "vscode-languageserver-textdocument";
+import { MasterCSSLanguageService } from "../core.js";
+declare function suggestSyntax(this: MasterCSSLanguageService, document: TextDocument, position: CompletionParams['position'], context: CompletionParams['context']): CompletionItem[] | undefined;
+export { suggestSyntax as default };