@master/css-language-service 2.0.0-rc.8 → 2.0.0-rc.81

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) Aoyue Design LLC.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,129 @@
+<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 CSSLanguageService from '@master/css-language-service'
+
+const languageService = new CSSLanguageService(customSettings)
+```
+
+`CSSLanguageService` provides stateful completion, hover, color, color presentation, and semantic token features around the editor-neutral primitives in `@master/css-language`.
+
+### Semantic tokens
+
+```ts
+const semanticTokens = languageService.renderSemanticTokens(textDocument)
+```
+
+Semantic tokens are generated with the project manifest, so custom variables, components, utilities, modes, and other manifest-dependent tokens 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 bare `@compose` preludes and 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 `bg:transparent !` to `bg: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 { settings } 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-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, DECLARATION_SEPARATOR_TRIGGER_CHARACTER, GROUP_TRIGGER_CHARACTER, INVOKED_TRIGGER_CHARACTERS, QUERY_TRIGGER_CHARACTERS, SELECTOR_TRIGGER_CHARACTERS, VALUE_TRIGGER_CHARACTERS } from "@master/css-language";
+export { AT_TRIGGER_CHARACTER, DECLARATION_SEPARATOR_TRIGGER_CHARACTER, GROUP_TRIGGER_CHARACTER, INVOKED_TRIGGER_CHARACTERS, QUERY_TRIGGER_CHARACTERS, SELECTOR_TRIGGER_CHARACTERS, VALUE_TRIGGER_CHARACTERS };

package/dist/common.js

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

package/dist/core.d.ts

@@ -0,0 +1,39 @@
+import { CSSLanguageRuntime, ClassPosition, MasterCSS } from "@master/css-language";
+import EventEmitter from "node:events";
+import { Position } from "vscode-languageserver-protocol";
+import { TextDocument } from "vscode-languageserver-textdocument";
+import { Settings } 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$1, { renderSemanticTokensAtPosition as renderSemanticTokensAtPosition$1 } from "./features/render-semantic-tokens.js";
+import suggestSyntax from "./features/suggest-syntax.js";
+
+//#region src/core.d.ts
+interface CSSLanguageServiceOptions {
+  runtime?: CSSLanguageRuntime;
+}
+declare class CSSLanguageService extends EventEmitter {
+  customSettings?: Settings | undefined;
+  css: MasterCSS;
+  runtime: CSSLanguageRuntime;
+  settings: Settings;
+  private completionIndex?;
+  private classPositionCache;
+  constructor(customSettings?: Settings | undefined, options?: CSSLanguageServiceOptions);
+  private getCompletionIndex;
+  inspectSyntax(...params: Parameters<typeof inspectSyntax>): import("vscode-languageserver-protocol").Hover | undefined;
+  renderSyntaxColors(...params: Parameters<typeof renderSyntaxColors>): Promise<import("vscode-languageserver-protocol").ColorInformation[] | undefined> | undefined;
+  editSyntaxColors(...params: Parameters<typeof editSyntaxColors>): import("vscode-languageserver-protocol").ColorPresentation[] | undefined;
+  formatDirectives(...params: Parameters<typeof formatDirectives>): import("vscode-languageserver-protocol").TextEdit[] | undefined;
+  renderSemanticTokens(...params: Parameters<typeof renderSemanticTokens$1>): import("vscode-languageserver-protocol").SemanticTokens | undefined;
+  renderSemanticTokensAtPosition(...params: Parameters<typeof renderSemanticTokensAtPosition$1>): import("vscode-languageserver-protocol").SemanticTokens | undefined;
+  suggestSyntax(document: Parameters<typeof suggestSyntax>[0], position: Parameters<typeof suggestSyntax>[1], context: Parameters<typeof suggestSyntax>[2]): import("vscode-languageserver-protocol").CompletionItem[] | undefined;
+  getClassPositions(textDocument: TextDocument): ClassPosition[];
+  getClassPosition(textDocument: TextDocument, position: Position): ClassPosition | undefined;
+  getClassContextPositions(textDocument: TextDocument, position: Position): ClassPosition[];
+  isDocumentAccepted(doc: TextDocument): boolean;
+}
+//#endregion
+export { CSSLanguageServiceOptions, type ClassPosition, CSSLanguageService as default };

package/dist/core.js

@@ -0,0 +1,111 @@
+import settings 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$1, { renderSemanticTokensAtPosition as renderSemanticTokensAtPosition$1 } from "./features/render-semantic-tokens.js";
+import { createCompletionIndex } from "./utils/completion-index.js";
+import suggestSyntax from "./features/suggest-syntax.js";
+import { ClassPositionCache, defaultCSSLanguageRuntime, getClassPositions } from "@master/css-language";
+import { defu } from "defu";
+import EventEmitter from "node:events";
+import { minimatch } from "minimatch";
+//#region src/core.ts
+var CSSLanguageService = class extends EventEmitter {
+	customSettings;
+	css;
+	runtime;
+	settings;
+	completionIndex;
+	classPositionCache = new ClassPositionCache();
+	constructor(customSettings, options = {}) {
+		super();
+		this.customSettings = customSettings;
+		this.runtime = options.runtime ?? defaultCSSLanguageRuntime;
+		this.settings = defu(customSettings, settings);
+		this.css = this.runtime.MasterCSS.create({
+			manifest: this.settings.manifest || this.runtime.defaultManifest,
+			nativeDeclarationMatcher: this.runtime.nativeDeclarationMatcher
+		});
+	}
+	getCompletionIndex() {
+		this.completionIndex ??= createCompletionIndex(this.css, this.runtime);
+		return this.completionIndex;
+	}
+	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$1?.call(this, ...params);
+	}
+	renderSemanticTokensAtPosition(...params) {
+		if (this.isDocumentAccepted(params[0])) return renderSemanticTokensAtPosition$1?.call(this, ...params);
+	}
+	suggestSyntax(document, position, context) {
+		if (this.settings.suggestSyntax && this.isDocumentAccepted(document)) return suggestSyntax?.call(this, document, position, context, this.getCompletionIndex());
+	}
+	getClassPositions(textDocument) {
+		return getClassPositions(textDocument, this.settings, { cache: this.classPositionCache });
+	}
+	getClassPosition(textDocument, position) {
+		const cachedOxcClassPosition = getClassPositions(textDocument, this.settings, {
+			position,
+			includeEmpty: true,
+			provider: "oxc",
+			oxcMode: "cache-only",
+			cache: this.classPositionCache
+		})[0];
+		if (cachedOxcClassPosition) return cachedOxcClassPosition;
+		const regexClassPosition = getClassPositions(textDocument, this.settings, {
+			position,
+			includeEmpty: true,
+			provider: "regex"
+		})[0];
+		if (regexClassPosition && !regexClassPosition.raw.includes("${")) return regexClassPosition;
+		return getClassPositions(textDocument, this.settings, {
+			position,
+			includeEmpty: true,
+			provider: "oxc",
+			cache: this.classPositionCache
+		})[0] ?? regexClassPosition;
+	}
+	getClassContextPositions(textDocument, position) {
+		const cachedOxcClassPositions = getClassPositions(textDocument, this.settings, {
+			position,
+			provider: "oxc",
+			oxcMode: "cache-only",
+			positionMatch: "context",
+			cache: this.classPositionCache
+		});
+		if (cachedOxcClassPositions.length) return cachedOxcClassPositions;
+		const regexClassPositions = getClassPositions(textDocument, this.settings, {
+			position,
+			provider: "regex",
+			positionMatch: "context"
+		});
+		if (regexClassPositions.length && regexClassPositions.every(({ raw }) => !raw.includes("${"))) return regexClassPositions;
+		const oxcClassPositions = getClassPositions(textDocument, this.settings, {
+			position,
+			provider: "oxc",
+			positionMatch: "context",
+			cache: this.classPositionCache
+		});
+		return oxcClassPositions.length ? oxcClassPositions : regexClassPositions;
+	}
+	isDocumentAccepted(doc) {
+		if (!this.settings.exclude) return true;
+		for (const exclude of this.settings.exclude) if (minimatch(doc.uri, exclude)) return false;
+		return true;
+	}
+};
+//#endregion
+export { CSSLanguageService as default };

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

@@ -0,0 +1,8 @@
+import { ColorPresentation, ColorPresentationParams } from "vscode-languageserver-protocol";
+import { TextDocument } from "vscode-languageserver-textdocument";
+import CSSLanguageService from "../core.js";
+
+//#region src/features/edit-syntax-colors.d.ts
+declare function editSyntaxColors(this: CSSLanguageService, document: TextDocument, color: ColorPresentationParams['color'], range: ColorPresentationParams['range']): ColorPresentation[];
+//#endregion
+export { editSyntaxColors as default };

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

@@ -0,0 +1,16 @@
+import convertColorByToken from "../utils/convert-color-token.js";
+//#region src/features/edit-syntax-colors.ts
+function editSyntaxColors(document, color, range) {
+	const colorPresentations = [];
+	const targetColorToken = convertColorByToken(color, document.getText(range), this.css);
+	if (targetColorToken) colorPresentations.push({
+		label: targetColorToken,
+		textEdit: {
+			range,
+			newText: targetColorToken
+		}
+	});
+	return colorPresentations;
+}
+//#endregion
+export { editSyntaxColors as default };

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

@@ -0,0 +1,7 @@
+import { Range, TextEdit } from "vscode-languageserver-protocol";
+import { TextDocument } from "vscode-languageserver-textdocument";
+
+//#region src/features/format-directives.d.ts
+declare function formatDirectives(document: TextDocument, range?: Range): TextEdit[] | undefined;
+//#endregion
+export { formatDirectives as default };

package/dist/features/format-directives.js

@@ -0,0 +1,72 @@
+import { formatMasterCSSDirectives } from "@master/css-language";
+//#region 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 intersects(a, b) {
+	return a.start < b.end && b.start < a.end;
+}
+function toTextEdit(document, edit) {
+	return {
+		range: {
+			start: document.positionAt(edit.start),
+			end: document.positionAt(edit.end)
+		},
+		newText: edit.newText
+	};
+}
+function collectCSSDocumentFormatEdits(document, range) {
+	return formatMasterCSSDirectives(document.getText(), { range: toOffsetRange(document, range) }).map(toTextEdit.bind(void 0, document));
+}
+function collectSFCFormatEdits(document, range) {
+	const source = document.getText();
+	const offsetRange = toOffsetRange(document, range);
+	const edits = [];
+	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(styleText);
+		const styleEnd = styleStart + styleText.length;
+		if (offsetRange && !intersects(offsetRange, {
+			start: styleStart,
+			end: styleEnd
+		})) continue;
+		const relativeRange = offsetRange ? {
+			start: Math.max(offsetRange.start, styleStart) - styleStart,
+			end: Math.min(offsetRange.end, styleEnd) - styleStart
+		} : void 0;
+		for (const edit of formatMasterCSSDirectives(styleText, { range: relativeRange })) edits.push({
+			start: styleStart + edit.start,
+			end: styleStart + edit.end,
+			newText: edit.newText
+		});
+	}
+	return edits.map(toTextEdit.bind(void 0, document));
+}
+function formatDirectives(document, range) {
+	if (CSS_FORMAT_LANGUAGE_IDS.has(document.languageId)) return collectCSSDocumentFormatEdits(document, range);
+	if (SFC_FORMAT_LANGUAGE_IDS.has(document.languageId)) return collectSFCFormatEdits(document, range);
+}
+//#endregion
+export { formatDirectives as default };

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

@@ -0,0 +1,8 @@
+import { Hover, HoverParams } from "vscode-languageserver-protocol";
+import { TextDocument } from "vscode-languageserver-textdocument";
+import CSSLanguageService from "../core.js";
+
+//#region src/features/inspect-syntax.d.ts
+declare function inspectSyntax(this: CSSLanguageService, document: TextDocument, position: HoverParams['position']): Hover | undefined;
+//#endregion
+export { inspectSyntax as default };

package/dist/features/inspect-syntax.js

@@ -0,0 +1,37 @@
+import createCSSMarkdownDocumentation from "../utils/create-css-markdown-documentation.js";
+import { generateCSS } from "@master/css-language";
+//#region src/features/inspect-syntax.ts
+function inspectSyntax(document, position) {
+	const classPosition = this.getClassPosition(document, position);
+	if (!classPosition) return;
+	const { token } = classPosition;
+	const range = {
+		start: document.positionAt(classPosition.range.start),
+		end: document.positionAt(classPosition.range.end)
+	};
+	const utilities = this.css.generate(token);
+	if (utilities.find((utility) => utility.type === this.runtime.UtilityType.Semantic && utility.layerName === "components")) {
+		const documentation = createCSSMarkdownDocumentation(generateCSS([token], this.css, this.runtime));
+		if (documentation) return { contents: {
+			kind: documentation.kind,
+			value: `(components) ` + documentation.value
+		} };
+	} else {
+		const utility = utilities[0];
+		if (utility) if (utility.type === this.runtime.UtilityType.Semantic) {
+			const documentation = createCSSMarkdownDocumentation(generateCSS([token], this.css, this.runtime));
+			if (documentation) return {
+				contents: documentation,
+				range
+			};
+		} else {
+			const documentation = createCSSMarkdownDocumentation(generateCSS([token], this.css, this.runtime));
+			if (documentation) return {
+				contents: documentation,
+				range
+			};
+		}
+	}
+}
+//#endregion
+export { inspectSyntax as default };

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

@@ -0,0 +1,9 @@
+import { SemanticTokens } from "vscode-languageserver-protocol";
+import { TextDocument } from "vscode-languageserver-textdocument";
+import CSSLanguageService from "../core.js";
+
+//#region src/features/render-semantic-tokens.d.ts
+declare function renderSemanticTokensAtPosition(this: CSSLanguageService, document: TextDocument, position: Parameters<CSSLanguageService['getClassPosition']>[1]): SemanticTokens | undefined;
+declare function renderSemanticTokens(this: CSSLanguageService, document: TextDocument): SemanticTokens | undefined;
+//#endregion
+export { renderSemanticTokens as default, renderSemanticTokensAtPosition };

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

@@ -0,0 +1,10 @@
+import { renderSemanticTokens as renderSemanticTokens$1, renderSemanticTokensAtPosition as renderSemanticTokensAtPosition$1 } from "@master/css-language";
+//#region src/features/render-semantic-tokens.ts
+function renderSemanticTokensAtPosition(document, position) {
+	return renderSemanticTokensAtPosition$1(this.css, document, this.getClassContextPositions(document, position), position, this.settings);
+}
+function renderSemanticTokens(document) {
+	return renderSemanticTokens$1(this.css, document, this.getClassPositions(document), this.settings);
+}
+//#endregion
+export { renderSemanticTokens as default, renderSemanticTokensAtPosition };

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

@@ -0,0 +1,8 @@
+import { ColorInformation } from "vscode-languageserver-protocol";
+import { TextDocument } from "vscode-languageserver-textdocument";
+import CSSLanguageService from "../core.js";
+
+//#region src/features/render-syntax-colors.d.ts
+declare function renderSyntaxColors(this: CSSLanguageService, document: TextDocument): Promise<ColorInformation[] | undefined>;
+//#endregion
+export { renderSyntaxColors as default };

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

@@ -0,0 +1,93 @@
+import { instancePattern } from "../utils/regex.js";
+import Color from "colorjs.io";
+//#region src/features/render-syntax-colors.ts
+function resolveVariableColorValue(variable, variables) {
+	let current = variable;
+	for (let i = 0; i < 8; i++) {
+		const value = current?.value;
+		if (value === void 0) return;
+		const text = String(value);
+		const alias = /^\$([a-zA-Z0-9-]+)(?: ?\/ ?.+?)?$|^var\(--([_a-zA-Z0-9-]+)\)$/.exec(text);
+		const aliasName = alias?.[1] ?? alias?.[2];
+		if (!aliasName) return text;
+		current = variables.get(aliasName);
+	}
+}
+async function renderSyntaxColors(document) {
+	const text = document.getText() ?? "";
+	const colorInformations = [];
+	try {
+		for (const instanceMatch of text.matchAll(instancePattern)) {
+			if (instanceMatch.index === void 0) break;
+			const instanceStartIndex = instanceMatch.index;
+			const syntax = instanceMatch[0];
+			const rule = this.css.generate(syntax)[0];
+			if (rule && rule.type !== this.runtime.UtilityType.Semantic) {
+				const keyTokenLength = rule.keyToken?.length ?? 0;
+				let currentLength = 0;
+				const resolveValueComponent = (valueComponent) => {
+					if (valueComponent.text === void 0) return;
+					const startOffset = instanceStartIndex + keyTokenLength + currentLength;
+					const valueComponentTokenLength = valueComponent.token.length;
+					let color;
+					switch (valueComponent.type) {
+						case "function":
+							if ([
+								"rgb",
+								"rgba",
+								"hsl",
+								"hsla",
+								"hwb",
+								"lab",
+								"lch",
+								"oklab",
+								"oklch",
+								"color"
+							].includes(valueComponent.name)) color = new Color(valueComponent.text);
+							else if (valueComponent.children.length) {
+								currentLength += valueComponent.name.length + 1;
+								valueComponent.children.forEach(resolveValueComponent);
+							}
+							break;
+						case "variable":
+							if (valueComponent.variable?.namespace?.startsWith("color") && valueComponent.variable.value !== void 0) {
+								color = new Color(resolveVariableColorValue(valueComponent.variable, this.css.variables) || String(valueComponent.variable.value));
+								if (valueComponent.alpha !== void 0) color.alpha *= valueComponent.alpha;
+							}
+							break;
+						case "string":
+							if (valueComponent.text !== "#" && valueComponent.text?.startsWith("#")) color = new Color(valueComponent.text);
+							break;
+					}
+					if (color) {
+						const rgbaColor = color.to("srgb");
+						colorInformations.push({
+							range: {
+								start: document.positionAt(startOffset),
+								end: document.positionAt(startOffset + valueComponentTokenLength)
+							},
+							color: {
+								red: rgbaColor.r ?? 0,
+								green: rgbaColor.g ?? 0,
+								blue: rgbaColor.b ?? 0,
+								alpha: Number(rgbaColor.alpha)
+							}
+						});
+					}
+					currentLength += valueComponentTokenLength || 0;
+				};
+				rule.valueComponents.forEach(resolveValueComponent);
+			}
+		}
+	} catch (e) {}
+	const colorIndexSet = /* @__PURE__ */ new Set();
+	return colorInformations.filter((item) => {
+		if (colorIndexSet.has(item.range.start)) return false;
+		else {
+			colorIndexSet.add(item.range.start);
+			return true;
+		}
+	});
+}
+//#endregion
+export { renderSyntaxColors as default };

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

@@ -0,0 +1,9 @@
+import { CompletionItem, CompletionParams } from "vscode-languageserver-protocol";
+import { TextDocument } from "vscode-languageserver-textdocument";
+import CSSLanguageService from "../core.js";
+import { CompletionIndex } from "../utils/completion-index.js";
+
+//#region src/features/suggest-syntax.d.ts
+declare function suggestSyntax(this: CSSLanguageService, document: TextDocument, position: CompletionParams['position'], context: CompletionParams['context'], completionIndex?: CompletionIndex): CompletionItem[] | undefined;
+//#endregion
+export { suggestSyntax as default };

package/dist/features/suggest-syntax.js

@@ -0,0 +1,11 @@
+import querySyntaxCompletions from "../utils/query-syntax-completions.js";
+//#region src/features/suggest-syntax.ts
+function suggestSyntax(document, position, context, completionIndex) {
+	const classPosition = this.getClassPosition(document, position);
+	if (classPosition !== void 0) return querySyntaxCompletions(context?.triggerCharacter === " " ? "" : document.getText({
+		start: document.positionAt(classPosition.range.start),
+		end: position
+	}), this.css, completionIndex);
+}
+//#endregion
+export { suggestSyntax as default };

package/dist/index.d.ts

@@ -1,5 +1,8 @@
-export { getDocumentColors, getColorValue, getColorPresentation } from './providers/color';
-export { checkConfigColorsBlock, getLastInstance, getConfigColorsCompletionItem, getCompletionItem, getReturnItem } from './providers/completion';
-export { doHover } from './providers/hover';
-export { positionCheck } from './position-check';
-export { settings } from './settings';
+import settings, { Settings } 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 suggestSyntax from "./features/suggest-syntax.js";
+import CSSLanguageService, { CSSLanguageServiceOptions, default as core_default } from "./core.js";
+export * from "./common.js";
+export { CSSLanguageService, type CSSLanguageServiceOptions, type Settings, core_default as default, editSyntaxColors, inspectSyntax, renderSyntaxColors, settings, suggestSyntax };

package/dist/index.js

@@ -0,0 +1,8 @@
+import { AT_TRIGGER_CHARACTER, DECLARATION_SEPARATOR_TRIGGER_CHARACTER, GROUP_TRIGGER_CHARACTER, INVOKED_TRIGGER_CHARACTERS, QUERY_TRIGGER_CHARACTERS, SELECTOR_TRIGGER_CHARACTERS, VALUE_TRIGGER_CHARACTERS } from "./common.js";
+import settings 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 suggestSyntax from "./features/suggest-syntax.js";
+import CSSLanguageService from "./core.js";
+export { AT_TRIGGER_CHARACTER, CSSLanguageService, DECLARATION_SEPARATOR_TRIGGER_CHARACTER, GROUP_TRIGGER_CHARACTER, INVOKED_TRIGGER_CHARACTERS, QUERY_TRIGGER_CHARACTERS, SELECTOR_TRIGGER_CHARACTERS, VALUE_TRIGGER_CHARACTERS, CSSLanguageService as default, editSyntaxColors, inspectSyntax, renderSyntaxColors, settings, suggestSyntax };