@master/css-language-service 2.0.0-rc.69 → 2.0.0-rc.70

package/README.md

@@ -48,16 +48,67 @@
             <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/release.yml">
+    <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/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/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/release.yml?branch=rc&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000">
+            <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>
 
-## Documentation
-Check out the official [documentation](https://rc.css.master.co/reference/language-service).
+## 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.
+
+## 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. |
+| `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

@@ -1,9 +1 @@
-import { type ServerCapabilities } from 'vscode-languageserver-protocol';
-export declare const INVOKED_TRIGGER_CHARACTERS: string[];
-export declare const VALUE_TRIGGER_CHARACTERS: string[];
-export declare const SELECTOR_TRIGGER_CHARACTERS: string[];
-export declare const AT_TRIGGER_CHARACTER = "@";
-export declare const QUERY_TRIGGER_CHARACTERS: string[];
-export declare const GROUP_TRIGGER_CHARACTER = "{";
-export declare const DECLARATION_SEPARATOR_TRIGGER_CHARACTER = ";";
-export declare const SERVER_CAPABILITIES: ServerCapabilities;
+export { 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';

package/dist/common.mjs

@@ -1,48 +1 @@
-import { TextDocumentSyncKind } from 'vscode-languageserver-protocol';
-import { QUERY_COMPARISON_OPERATORS, QUERY_LOGICAL_OPERATORS, SEPARATOR_SIGN, DELIMITER_SIGN, SELECTOR_SIGNS, AT_SIGN } from '@master/css';
-
-const INVOKED_TRIGGER_CHARACTERS = [
-    '"',
-    ' ',
-    '\''
-];
-const VALUE_TRIGGER_CHARACTERS = [
-    SEPARATOR_SIGN,
-    DELIMITER_SIGN
-];
-const SELECTOR_TRIGGER_CHARACTERS = SELECTOR_SIGNS;
-const AT_TRIGGER_CHARACTER = AT_SIGN;
-const QUERY_TRIGGER_CHARACTERS = [
-    ...QUERY_COMPARISON_OPERATORS,
-    ...QUERY_LOGICAL_OPERATORS
-];
-const GROUP_TRIGGER_CHARACTER = '{';
-const DECLARATION_SEPARATOR_TRIGGER_CHARACTER = ';';
-const SERVER_CAPABILITIES = {
-    textDocumentSync: TextDocumentSyncKind.Incremental,
-    // Tell the client that this server supports code completion.
-    completionProvider: {
-        resolveProvider: false,
-        workDoneProgress: false,
-        triggerCharacters: [
-            ...new Set([
-                ...INVOKED_TRIGGER_CHARACTERS,
-                ...VALUE_TRIGGER_CHARACTERS,
-                ...SELECTOR_TRIGGER_CHARACTERS,
-                ...QUERY_TRIGGER_CHARACTERS,
-                DECLARATION_SEPARATOR_TRIGGER_CHARACTER,
-                AT_TRIGGER_CHARACTER,
-                GROUP_TRIGGER_CHARACTER
-            ])
-        ]
-    },
-    colorProvider: true,
-    hoverProvider: true,
-    workspace: {
-        workspaceFolders: {
-            supported: true
-        }
-    }
-};
-
-export { AT_TRIGGER_CHARACTER, DECLARATION_SEPARATOR_TRIGGER_CHARACTER, GROUP_TRIGGER_CHARACTER, INVOKED_TRIGGER_CHARACTERS, QUERY_TRIGGER_CHARACTERS, SELECTOR_TRIGGER_CHARACTERS, SERVER_CAPABILITIES, VALUE_TRIGGER_CHARACTERS };
+export { 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';

package/dist/core.d.ts

@@ -1,29 +1,30 @@
-import { MasterCSS } from '@master/css';
+import { MasterCSS, type ClassPosition } from '@master/css-language';
 import EventEmitter from 'node:events';
 import type { Position } from 'vscode-languageserver-protocol';
 import { type Settings } from './settings';
 import inspectSyntax from './features/inspect-syntax';
 import renderSyntaxColors from './features/render-syntax-colors';
 import editSyntaxColors from './features/edit-syntax-colors';
+import renderSemanticTokens, { renderSemanticTokensAtPosition } from './features/render-semantic-tokens';
 import suggestSyntax from './features/suggest-syntax';
 import { TextDocument } from 'vscode-languageserver-textdocument';
-export interface ClassPosition {
-    range: {
-        start: number;
-        end: number;
-    };
-    raw: string;
-    token: string;
-}
+export type { ClassPosition };
 export default class CSSLanguageService extends EventEmitter {
     customSettings?: Settings | undefined;
     css: MasterCSS;
     settings: Settings;
+    private completionIndex?;
+    private classPositionCache;
     constructor(customSettings?: Settings | undefined);
+    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;
-    suggestSyntax(...params: Parameters<typeof suggestSyntax>): import("vscode-languageserver-protocol").CompletionItem[] | undefined;
+    renderSemanticTokens(...params: Parameters<typeof renderSemanticTokens>): import("vscode-languageserver-protocol").SemanticTokens | undefined;
+    renderSemanticTokensAtPosition(...params: Parameters<typeof renderSemanticTokensAtPosition>): 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;
 }

package/dist/core.mjs

@@ -1,4 +1,4 @@
-import { createCSS } from '@master/css';
+import { ClassPositionCache, MasterCSS, matchesLanguageServiceNativeDeclaration, defaultManifest, getClassPositions } from '@master/css-language';
 import extend from '@techor/extend';
 import EventEmitter from 'node:events';
 import settings from './settings.mjs';
@@ -6,18 +6,27 @@ import { minimatch } from 'minimatch';
 import inspectSyntax from './features/inspect-syntax.mjs';
 import renderSyntaxColors from './features/render-syntax-colors.mjs';
 import editSyntaxColors from './features/edit-syntax-colors.mjs';
+import renderSemanticTokens, { renderSemanticTokensAtPosition } from './features/render-semantic-tokens.mjs';
 import suggestSyntax from './features/suggest-syntax.mjs';
-import findMatchingPairs from './utils/find-matching-brackets.mjs';
-import escapeRegexp from 'lodash.escaperegexp';
+import { createCompletionIndex } from './utils/completion-index.mjs';
 
 class CSSLanguageService extends EventEmitter {
     customSettings;
     css;
     settings;
+    completionIndex;
+    classPositionCache = new ClassPositionCache();
     constructor(customSettings){
         super(), this.customSettings = customSettings;
         this.settings = extend(settings, customSettings);
-        this.css = createCSS(this.settings.config);
+        this.css = MasterCSS.create({
+            manifest: this.settings.manifest || defaultManifest,
+            nativeDeclarationMatcher: matchesLanguageServiceNativeDeclaration
+        });
+    }
+    getCompletionIndex() {
+        this.completionIndex ??= createCompletionIndex(this.css);
+        return this.completionIndex;
     }
     inspectSyntax(...params) {
         if (this.settings.inspectSyntax && this.isDocumentAccepted(params[0])) return inspectSyntax?.call(this, ...params);
@@ -28,207 +37,68 @@ class CSSLanguageService extends EventEmitter {
     editSyntaxColors(...params) {
         if (this.settings.editSyntaxColors && this.isDocumentAccepted(params[0])) return editSyntaxColors?.call(this, ...params);
     }
-    suggestSyntax(...params) {
-        if (this.settings.suggestSyntax && this.isDocumentAccepted(params[0])) return suggestSyntax?.call(this, ...params);
+    renderSemanticTokens(...params) {
+        if (this.isDocumentAccepted(params[0])) return renderSemanticTokens?.call(this, ...params);
     }
-    getClassPosition(textDocument, position) {
-        const positionIndex = textDocument.offsetAt(position);
-        const startIndex = textDocument.offsetAt({
-            line: position.line - 100,
-            character: 0
-        }) ?? 0;
-        const endIndex = textDocument.offsetAt({
-            line: position.line + 100,
-            character: 0
-        }) ?? undefined;
-        const text = textDocument.getText().substring(startIndex, endIndex);
-        const { classAttributeBindings, classAttributes, classDeclarations, classFunctions } = this.settings;
-        const normalizeClassNamePosition = (className, attrStart, escapeCharacter)=>{
-            /**
-             * Matching classes, including empty string after white space
-             * @example <div class="class-a class-b "></div>
-             * @url https://regex101.com/r/LnBLAV/1
-             */ for (const eachClassMatch of className.matchAll(/(?:[^\s]+)?/g)){
-                if (eachClassMatch.index === undefined) continue;
-                const raw = eachClassMatch[0];
-                const classStartIndex = attrStart + eachClassMatch.index;
-                const classEndIndex = classStartIndex + raw.length;
-                if (classStartIndex <= positionIndex - startIndex && positionIndex - startIndex <= classEndIndex) {
-                    return {
-                        range: {
-                            start: classStartIndex,
-                            end: startIndex + classEndIndex
-                        },
-                        raw,
-                        token: raw.replace(new RegExp('\\' + escapeCharacter, 'g'), escapeCharacter)
-                    };
-                } else if (attrStart === classEndIndex) {
-                    return {
-                        range: {
-                            start: attrStart,
-                            end: attrStart
-                        },
-                        raw: '',
-                        token: ''
-                    };
-                }
-            }
-        };
-        const resolve = (classMatchers, handle)=>{
-            for (const eachClassMatcher of classMatchers){
-                let [eachPattern, start, end] = eachClassMatcher;
-                end = end ?? start;
-                for (const eachClassPostioinMatch of text.matchAll(new RegExp(`(?:\\s|\\.)${eachPattern}${escapeRegexp(start)}`, 'g'))){
-                    if (eachClassPostioinMatch.index === undefined) continue;
-                    const eachClassAttributeString = eachClassPostioinMatch[0];
-                    const eachAttrStart = eachClassPostioinMatch.index + eachClassAttributeString.length;
-                    const eachClassPositionEnd = findMatchingPairs(text, eachAttrStart, start, end);
-                    if (!eachClassPositionEnd) continue;
-                    if ((eachAttrStart <= positionIndex - startIndex && eachClassPositionEnd >= positionIndex - startIndex) === true) {
-                        const classPosition = handle(eachAttrStart, eachClassPositionEnd, eachClassMatcher);
-                        if (classPosition) return classPosition;
-                    } else if (eachClassPostioinMatch.index > positionIndex - startIndex) {
-                        break;
-                    }
-                }
-            }
-        };
-        const stringExpressions = [];
-        const assignmentExpressions = [];
-        classAttributes?.forEach((eachClassAttribute)=>{
-            stringExpressions.push([
-                eachClassAttribute + '=',
-                '"',
-                '"'
-            ], [
-                eachClassAttribute + '=',
-                '\'',
-                '\''
-            ]);
+    renderSemanticTokensAtPosition(...params) {
+        if (this.isDocumentAccepted(params[0])) return renderSemanticTokensAtPosition?.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
         });
-        classDeclarations?.forEach((eachClassDeclaration)=>{
-            stringExpressions.push([
-                eachClassDeclaration + '(?:\\s+)?(?::|=)(?:\\s+)?',
-                '"',
-                '"'
-            ], [
-                eachClassDeclaration + '(?:\\s+)?(?::|=)(?:\\s+)?',
-                '`',
-                '`'
-            ], [
-                eachClassDeclaration + '(?:\\s+)?(?::|=)(?:\\s+)?',
-                '\'',
-                '\''
-            ]);
-            assignmentExpressions.push([
-                eachClassDeclaration + '(?:\\s+)?(?::|=)(?:\\s+)?',
-                '{',
-                '}'
-            ]);
+    }
+    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
         });
-        classFunctions?.forEach((eachClassFunction)=>{
-            /**
-             * @example clsx`class-a class-b`
-             */ stringExpressions.push([
-                eachClassFunction,
-                '`',
-                '`'
-            ]);
-            /**
-             * @example clsx('class-a class-b')
-             */ assignmentExpressions.push([
-                eachClassFunction,
-                '(',
-                ')'
-            ]);
+        if (cachedOxcClassPositions.length) return cachedOxcClassPositions;
+        const regexClassPositions = getClassPositions(textDocument, this.settings, {
+            position,
+            provider: 'regex',
+            positionMatch: 'context'
         });
-        /**
-         * @example <div class=""></div>
-         * */ if (stringExpressions?.length) {
-            const classPosition = resolve(stringExpressions, (eachAttrStart, eachClassPositionEnd, [eachPattern, pair])=>{
-                const eachClassName = text.substring(eachAttrStart, eachClassPositionEnd);
-                /**
-                 * @example <div class=""></div>
-                 */ if (eachClassName === undefined) {
-                    return {
-                        range: {
-                            start: eachAttrStart,
-                            end: eachAttrStart
-                        },
-                        token: '',
-                        raw: ''
-                    };
-                }
-                const classNameStart = eachAttrStart;
-                const classPosition = normalizeClassNamePosition(eachClassName, classNameStart, pair);
-                if (classPosition) return classPosition;
-            });
-            if (classPosition) return classPosition;
-        }
-        if (classAttributeBindings) {
-            for(const eachClassAttribute in classAttributeBindings){
-                const eachClassAttributeBinding = classAttributeBindings[eachClassAttribute];
-                if (eachClassAttributeBinding === false) continue;
-                assignmentExpressions.push([
-                    eachClassAttribute + '=',
-                    eachClassAttributeBinding[0],
-                    eachClassAttributeBinding[1]
-                ]);
-            }
-        }
-        /**
-         * attribute binding
-         * @example <div className={''}></div>
-         * @example <div :class="isActive ? 'block' : 'hidden'"></div>
-         * */ if (assignmentExpressions?.length) {
-            const classPosition = resolve(assignmentExpressions, (eachAttrStart, eachClassPositionEnd, eachClassMatcher)=>{
-                const eachClassPositionExpression = text.substring(eachAttrStart, eachClassPositionEnd);
-                /**
-                 * @example <div className={""}></div>
-                 */ if ([
-                    '""',
-                    '\'\'',
-                    '``'
-                ].includes(eachClassPositionExpression)) {
-                    return {
-                        range: {
-                            start: eachAttrStart + 1,
-                            end: eachAttrStart + 1
-                        },
-                        raw: '',
-                        token: ''
-                    };
-                }
-                // 1. "
-                for (const classExpressionMatch of eachClassPositionExpression.matchAll(/(?<!\\)"([\s\S]*?)(?<!\\)"/g)){
-                    if (classExpressionMatch.index === undefined) continue;
-                    const eachClassName = classExpressionMatch[1];
-                    const classNameStart = eachAttrStart + classExpressionMatch.index + 1 // " length
-                    ;
-                    const classPosition = normalizeClassNamePosition(eachClassName, classNameStart, '"');
-                    if (classPosition) return classPosition;
-                }
-                // 2. '
-                for (const classExpressionMatch of eachClassPositionExpression.matchAll(/(?<!\\)'([\s\S]*?)(?<!\\)'/g)){
-                    if (classExpressionMatch.index === undefined) continue;
-                    const eachClassName = classExpressionMatch[1];
-                    const classNameStart = eachAttrStart + classExpressionMatch.index + 1 // ' length
-                    ;
-                    const classPosition = normalizeClassNamePosition(eachClassName, classNameStart, '\'');
-                    if (classPosition) return classPosition;
-                }
-                // 3. `
-                for (const classExpressionMatch of eachClassPositionExpression.matchAll(/(?<!\\)`([\s\S]*?)(?<!\\)`/g)){
-                    if (classExpressionMatch.index === undefined) continue;
-                    const eachClassName = classExpressionMatch[1];
-                    const classNameStart = eachAttrStart + classExpressionMatch.index + 1 // ` length
-                    ;
-                    const classPosition = normalizeClassNamePosition(eachClassName, classNameStart, '`');
-                    if (classPosition) return classPosition;
-                }
-            });
-            if (classPosition) return classPosition;
+        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;

package/dist/features/inspect-syntax.mjs

@@ -1,7 +1,5 @@
-import { getCSSDataDocumentation } from '../utils/get-css-data-documentation.mjs';
-import { generateCSS, SyntaxRuleType, isCoreRule } from '@master/css';
-import cssDataProvider from '../utils/css-data-provider.mjs';
-import getUtilityInfo from '../utils/get-utility-info.mjs';
+import createCSSMarkdownDocumentation from '../utils/create-css-markdown-documentation.mjs';
+import { UtilityType, generateCSS } from '@master/css-language';
 
 function inspectSyntax(document, position) {
     const classPosition = this.getClassPosition(document, position);
@@ -11,34 +9,27 @@ function inspectSyntax(document, position) {
         start: document.positionAt(classPosition.range.start),
         end: document.positionAt(classPosition.range.end)
     };
-    const componentClasses = this.css.components.get(token);
-    if (componentClasses) {
-        const documentation = getCSSDataDocumentation({}, {
-            generatedCSS: generateCSS([
-                token
-            ], this.css),
-            docs: '/guide/components'
-        });
+    const utilities = this.css.generate(token);
+    const component = utilities.find((utility)=>utility.type === UtilityType.Semantic && utility.layerName === 'components');
+    if (component) {
+        const documentation = createCSSMarkdownDocumentation(generateCSS([
+            token
+        ], this.css));
         if (documentation) {
             return {
                 contents: {
                     kind: documentation.kind,
-                    value: `(style) ` + componentClasses.join(' ') + '\n' + documentation.value
+                    value: `(components) ` + documentation.value
                 }
             };
         }
     } else {
-        const rules = this.css.generate(token);
-        const rule = rules[0];
-        if (rule) {
-            if (rule.type === SyntaxRuleType.Utility) {
-                const { data, docs } = getUtilityInfo(rule.registeredSyntax, this.css);
-                const documentation = getCSSDataDocumentation(data, {
-                    generatedCSS: generateCSS([
-                        token
-                    ], this.css),
-                    docs
-                });
+        const utility = utilities[0];
+        if (utility) {
+            if (utility.type === UtilityType.Semantic) {
+                const documentation = createCSSMarkdownDocumentation(generateCSS([
+                    token
+                ], this.css));
                 if (documentation) {
                     return {
                         contents: documentation,
@@ -46,14 +37,9 @@ function inspectSyntax(document, position) {
                     };
                 }
             } else {
-                const nativeProperties = cssDataProvider.provideProperties();
-                const nativeCSSPropertyData = nativeProperties.find(({ name })=>name === rule.id);
-                const documentation = getCSSDataDocumentation(nativeCSSPropertyData, {
-                    generatedCSS: generateCSS([
-                        token
-                    ], this.css),
-                    docs: '/reference/' + (isCoreRule(rule.id) && rule.id)
-                });
+                const documentation = createCSSMarkdownDocumentation(generateCSS([
+                    token
+                ], this.css));
                 if (documentation) {
                     return {
                         contents: documentation,

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

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

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

@@ -0,0 +1,10 @@
+import { renderSemanticTokens as renderSemanticTokens$1, renderSemanticTokensAtPosition as renderSemanticTokensAtPosition$1 } from '@master/css-language';
+
+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);
+}
+
+export { renderSemanticTokens as default, renderSemanticTokensAtPosition };

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

@@ -1,7 +1,19 @@
 import { instancePattern } from '../utils/regex.mjs';
 import Color from 'colorjs.io';
-import { SyntaxRuleType } from '@master/css';
+import { UtilityType } from '@master/css-language';
 
+function resolveVariableColorValue(variable, variables) {
+    let current = variable;
+    for(let i = 0; i < 8; i++){
+        const value = current?.value;
+        if (value === undefined) 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 = [];
@@ -11,13 +23,13 @@ async function renderSyntaxColors(document) {
             const instanceStartIndex = instanceMatch.index;
             const syntax = instanceMatch[0];
             const rule = this.css.generate(syntax)[0];
-            if (rule && rule.type !== SyntaxRuleType.Utility) {
+            if (rule && rule.type !== UtilityType.Semantic) {
                 const keyTokenLength = rule.keyToken?.length ?? 0;
                 let currentLength = 0;
                 const resolveValueComponent = (valueComponent)=>{
                     if (valueComponent.text === undefined) return; // text is always existing, just for type
                     const startOffset = instanceStartIndex + keyTokenLength + currentLength;
-                    // TODO: check number mt:30
+                    // TODO: check number mt:1.875rem
                     const valueComponentTokenLength = valueComponent.token.length;
                     let color;
                     switch(valueComponent.type){
@@ -41,8 +53,11 @@ async function renderSyntaxColors(document) {
                             }
                             break;
                         case 'variable':
-                            if (valueComponent.variable?.type === 'color') {
-                                color = new Color(valueComponent.text);
+                            if (valueComponent.variable?.namespace?.startsWith('color') && valueComponent.variable.value !== undefined) {
+                                color = new Color(resolveVariableColorValue(valueComponent.variable, this.css.variables) || String(valueComponent.variable.value));
+                                if (valueComponent.alpha !== undefined) {
+                                    color.alpha *= valueComponent.alpha;
+                                }
                             }
                             break;
                         case 'string':
@@ -60,9 +75,9 @@ async function renderSyntaxColors(document) {
                                 end: document.positionAt(startOffset + valueComponentTokenLength)
                             },
                             color: {
-                                red: rgbaColor.r,
-                                green: rgbaColor.g,
-                                blue: rgbaColor.b,
+                                red: rgbaColor.r ?? 0,
+                                green: rgbaColor.g ?? 0,
+                                blue: rgbaColor.b ?? 0,
                                 alpha: Number(rgbaColor.alpha)
                             }
                         });

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

@@ -1,4 +1,5 @@
 import type { CompletionItem, CompletionParams } from 'vscode-languageserver-protocol';
 import type { TextDocument } from 'vscode-languageserver-textdocument';
 import CSSLanguageService from '../core';
-export default function suggestSyntax(this: CSSLanguageService, document: TextDocument, position: CompletionParams['position'], context: CompletionParams['context']): CompletionItem[] | undefined;
+import type { CompletionIndex } from '../utils/completion-index';
+export default function suggestSyntax(this: CSSLanguageService, document: TextDocument, position: CompletionParams['position'], context: CompletionParams['context'], completionIndex?: CompletionIndex): CompletionItem[] | undefined;