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

package/README.md

@@ -0,0 +1,114 @@
+<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.
+
+## 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

@@ -0,0 +1 @@
+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

@@ -0,0 +1 @@
+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

@@ -0,0 +1,30 @@
+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 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;
+    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

@@ -0,0 +1,114 @@
+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';
+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 { 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 = 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);
+    }
+    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);
+    }
+    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(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;
+    }
+}
+
+export { CSSLanguageService as default };

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

@@ -0,0 +1,4 @@
+import type { TextDocument } from 'vscode-languageserver-textdocument';
+import CSSLanguageService from '../core';
+import type { ColorPresentationParams, ColorPresentation } from 'vscode-languageserver-protocol';
+export default function editSyntaxColors(this: CSSLanguageService, document: TextDocument, color: ColorPresentationParams['color'], range: ColorPresentationParams['range']): ColorPresentation[];

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

@@ -0,0 +1,17 @@
+import convertColorByToken from '../utils/convert-color-token.mjs';
+
+function editSyntaxColors(document, color, range) {
+    const colorPresentations = [];
+    const selectedColorToken = document.getText(range);
+    const targetColorToken = convertColorByToken(color, selectedColorToken, this.css);
+    if (targetColorToken) colorPresentations.push({
+        label: targetColorToken,
+        textEdit: {
+            range,
+            newText: targetColorToken
+        }
+    });
+    return colorPresentations;
+}
+
+export { editSyntaxColors as default };

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

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

package/dist/features/inspect-syntax.mjs

@@ -0,0 +1,54 @@
+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);
+    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);
+    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: `(components) ` + documentation.value
+                }
+            };
+        }
+    } else {
+        const utility = utilities[0];
+        if (utility) {
+            if (utility.type === UtilityType.Semantic) {
+                const documentation = createCSSMarkdownDocumentation(generateCSS([
+                    token
+                ], this.css));
+                if (documentation) {
+                    return {
+                        contents: documentation,
+                        range
+                    };
+                }
+            } else {
+                const documentation = createCSSMarkdownDocumentation(generateCSS([
+                    token
+                ], this.css));
+                if (documentation) {
+                    return {
+                        contents: documentation,
+                        range
+                    };
+                }
+            }
+        }
+    }
+}
+
+export { inspectSyntax as default };

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.d.ts

@@ -0,0 +1,4 @@
+import type { ColorInformation } from 'vscode-languageserver-protocol';
+import CSSLanguageService from '../core';
+import type { TextDocument } from 'vscode-languageserver-textdocument';
+export default function renderSyntaxColors(this: CSSLanguageService, document: TextDocument): Promise<ColorInformation[] | undefined>;

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

@@ -0,0 +1,102 @@
+import { instancePattern } from '../utils/regex.mjs';
+import Color from 'colorjs.io';
+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 = [];
+    try {
+        for (const instanceMatch of text.matchAll(instancePattern)){
+            if (instanceMatch.index === undefined) break;
+            const instanceStartIndex = instanceMatch.index;
+            const syntax = instanceMatch[0];
+            const rule = this.css.generate(syntax)[0];
+            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:1.875rem
+                    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; // function name + '('
+                                valueComponent.children.forEach(resolveValueComponent);
+                            }
+                            break;
+                        case 'variable':
+                            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':
+                            if (valueComponent.text !== '#' && valueComponent.text?.startsWith('#')) {
+                                color = new Color(valueComponent.text);
+                            }
+                            break;
+                    }
+                    // check if rgba is valid
+                    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 = new Set();
+    return colorInformations.filter((item)=>{
+        if (colorIndexSet.has(item.range.start)) {
+            return false;
+        } else {
+            colorIndexSet.add(item.range.start);
+            return true;
+        }
+    });
+}
+
+export { renderSyntaxColors as default };

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

@@ -0,0 +1,5 @@
+import type { CompletionItem, CompletionParams } from 'vscode-languageserver-protocol';
+import type { TextDocument } from 'vscode-languageserver-textdocument';
+import CSSLanguageService from '../core';
+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;

package/dist/features/suggest-syntax.mjs

@@ -0,0 +1,18 @@
+import querySyntaxCompletions from '../utils/query-syntax-completions.mjs';
+
+function suggestSyntax(document, position, context, completionIndex) {
+    const classPosition = this.getClassPosition(document, position);
+    if (classPosition !== undefined) {
+        const q = context?.triggerCharacter === ' ' ? '' : document.getText({
+            start: document.positionAt(classPosition.range.start),
+            end: position
+        });
+        return querySyntaxCompletions(q, this.css, completionIndex);
+    }
+// todo
+// else if (isInstance === true && checkConfigColorsBlock(document, position) === true) {
+//     return getColorCompletionItems(this.css)
+// }
+}
+
+export { suggestSyntax as default };

package/dist/index.d.ts

@@ -1,5 +1,7 @@
-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';
+export { default, default as CSSLanguageService } from './core';
+export { default as settings, type Settings } from './settings';
+export * from './common';
+export { default as inspectSyntax } from './features/inspect-syntax';
+export { default as renderSyntaxColors } from './features/render-syntax-colors';
+export { default as editSyntaxColors } from './features/edit-syntax-colors';
+export { default as suggestSyntax } from './features/suggest-syntax';

package/dist/index.mjs

@@ -0,0 +1,7 @@
+export { default as CSSLanguageService, default } from './core.mjs';
+export { default as settings } from './settings.mjs';
+export { default as inspectSyntax } from './features/inspect-syntax.mjs';
+export { default as renderSyntaxColors } from './features/render-syntax-colors.mjs';
+export { default as editSyntaxColors } from './features/edit-syntax-colors.mjs';
+export { default as suggestSyntax } from './features/suggest-syntax.mjs';
+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/settings.d.ts

@@ -1,9 +1,16 @@
-export declare const settings: {
-    languages: string[];
-    classMatch: string[];
-    exclude: string[];
-    suggestions: boolean;
-    inspect: boolean;
-    previewColors: boolean;
-    config: string;
-};
+import { type LanguageSettings } from '@master/css-language';
+import type { MasterCSSManifest } from '@master/css';
+/**
+ * @example styles https://regex101.com/r/HLPdsw/1
+ **/
+declare const settings: Settings;
+export default settings;
+export declare interface Settings extends LanguageSettings {
+    includedLanguages?: string[];
+    exclude?: string[];
+    manifest?: MasterCSSManifest;
+    suggestSyntax?: boolean;
+    inspectSyntax?: boolean;
+    renderSyntaxColors?: boolean;
+    editSyntaxColors?: boolean;
+}

package/dist/settings.mjs

@@ -0,0 +1,53 @@
+import { languageSettings } from '@master/css-language';
+
+/**
+ * @example styles https://regex101.com/r/HLPdsw/1
+ **/ const settings = {
+    includedLanguages: [
+        "html",
+        "php",
+        "javascript",
+        "typescript",
+        "javascriptreact",
+        "typescriptreact",
+        "css",
+        "scss",
+        "less",
+        "vue",
+        "svelte",
+        "rust",
+        "astro",
+        "markdown",
+        "mdx",
+        "astro"
+    ],
+    /**
+     * @example <div class="a b">
+     * @example <div className="a b">
+     */ classAttributes: languageSettings.classAttributes,
+    /**
+     * @example <div class={active ? 'a' : 'b'}>
+     * @example <div className={active ? 'a' : 'b'}>
+     */ classAttributeBindings: languageSettings.classAttributeBindings,
+    /**
+     * @example const classes = 'a b'
+     * @example { classes: { btn: 'a b' } }
+     */ classDeclarations: languageSettings.classDeclarations,
+    /**
+     * @example clsx('a b')
+     * @example styled`a b`
+     * @example .classList.add('a')
+     */ classFunctions: languageSettings.classFunctions,
+    exclude: [
+        "**/.git/**",
+        "**/node_modules/**",
+        "**/.hg/**"
+    ],
+    suggestSyntax: true,
+    inspectSyntax: true,
+    renderSyntaxColors: true,
+    editSyntaxColors: true,
+    embeddedSyntaxHighlighting: 'active'
+};
+
+export { settings as default };

package/dist/utils/beautify-css.d.ts

@@ -0,0 +1 @@
+export default function beautifyCSS(text: string): any;

package/dist/utils/beautify-css.mjs

@@ -0,0 +1,11 @@
+import { css_beautify } from 'js-beautify/js/lib/beautify-css.js';
+
+// @ts-expect-error
+function beautifyCSS(text) {
+    return css_beautify(text.replace(/@(media|container|supports|layer)\(/g, '@$1 ('), {
+        newline_between_rules: false,
+        indent_size: 2
+    });
+}
+
+export { beautifyCSS as default };