@master/css-language-service 2.0.0-rc.6 → 2.0.0-rc.61

package/README.md

@@ -0,0 +1,63 @@
+<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/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">
+        </picture>
+    </a>
+</p>
+
+</div>
+
+## Documentation
+Check out the official [documentation](https://rc.css.master.co/reference/language-service).

package/dist/common.cjs

@@ -0,0 +1,57 @@
+'use strict';
+
+var vscodeLanguageserverProtocol = require('vscode-languageserver-protocol');
+var css = require('@master/css');
+
+const INVOKED_TRIGGER_CHARACTERS = [
+    '"',
+    ' ',
+    '\''
+];
+const VALUE_TRIGGER_CHARACTERS = [
+    css.SEPARATOR_SIGN,
+    css.DELIMITER_SIGN
+];
+const SELECTOR_TRIGGER_CHARACTERS = css.SELECTOR_SIGNS;
+const AT_TRIGGER_CHARACTER = css.AT_SIGN;
+const QUERY_TRIGGER_CHARACTERS = [
+    ...css.QUERY_COMPARISON_OPERATORS,
+    ...css.QUERY_LOGICAL_OPERATORS
+];
+const GROUP_TRIGGER_CHARACTER = '{';
+const DECLARATION_SEPARATOR_TRIGGER_CHARACTER = ';';
+const SERVER_CAPABILITIES = {
+    textDocumentSync: vscodeLanguageserverProtocol.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
+        }
+    }
+};
+
+exports.AT_TRIGGER_CHARACTER = AT_TRIGGER_CHARACTER;
+exports.DECLARATION_SEPARATOR_TRIGGER_CHARACTER = DECLARATION_SEPARATOR_TRIGGER_CHARACTER;
+exports.GROUP_TRIGGER_CHARACTER = GROUP_TRIGGER_CHARACTER;
+exports.INVOKED_TRIGGER_CHARACTERS = INVOKED_TRIGGER_CHARACTERS;
+exports.QUERY_TRIGGER_CHARACTERS = QUERY_TRIGGER_CHARACTERS;
+exports.SELECTOR_TRIGGER_CHARACTERS = SELECTOR_TRIGGER_CHARACTERS;
+exports.SERVER_CAPABILITIES = SERVER_CAPABILITIES;
+exports.VALUE_TRIGGER_CHARACTERS = VALUE_TRIGGER_CHARACTERS;

package/dist/common.d.ts

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

package/dist/common.mjs

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

package/dist/core.cjs

@@ -0,0 +1,246 @@
+'use strict';
+
+var css = require('@master/css');
+var extend = require('@techor/extend');
+var EventEmitter = require('node:events');
+var settings = require('./settings.cjs');
+var minimatch = require('minimatch');
+var inspectSyntax = require('./features/inspect-syntax.cjs');
+var renderSyntaxColors = require('./features/render-syntax-colors.cjs');
+var editSyntaxColors = require('./features/edit-syntax-colors.cjs');
+var suggestSyntax = require('./features/suggest-syntax.cjs');
+var findMatchingBrackets = require('./utils/find-matching-brackets.cjs');
+var escapeRegexp = require('lodash.escaperegexp');
+
+class CSSLanguageService extends EventEmitter {
+    customSettings;
+    css;
+    settings;
+    constructor(customSettings){
+        super(), this.customSettings = customSettings;
+        this.settings = extend(settings, customSettings);
+        this.css = new css.MasterCSS(this.settings.config);
+    }
+    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);
+    }
+    suggestSyntax(...params) {
+        if (this.settings.suggestSyntax && this.isDocumentAccepted(params[0])) return suggestSyntax?.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 = findMatchingBrackets(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 + '=',
+                '\'',
+                '\''
+            ]);
+        });
+        classDeclarations?.forEach((eachClassDeclaration)=>{
+            stringExpressions.push([
+                eachClassDeclaration + '(?:\\s+)?(?::|=)(?:\\s+)?',
+                '"',
+                '"'
+            ], [
+                eachClassDeclaration + '(?:\\s+)?(?::|=)(?:\\s+)?',
+                '`',
+                '`'
+            ], [
+                eachClassDeclaration + '(?:\\s+)?(?::|=)(?:\\s+)?',
+                '\'',
+                '\''
+            ]);
+            assignmentExpressions.push([
+                eachClassDeclaration + '(?:\\s+)?(?::|=)(?:\\s+)?',
+                '{',
+                '}'
+            ]);
+        });
+        classFunctions?.forEach((eachClassFunction)=>{
+            /**
+             * @example clsx`class-a class-b`
+             */ stringExpressions.push([
+                eachClassFunction,
+                '`',
+                '`'
+            ]);
+            /**
+             * @example clsx('class-a class-b')
+             */ assignmentExpressions.push([
+                eachClassFunction,
+                '(',
+                ')'
+            ]);
+        });
+        /**
+         * @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;
+        }
+    }
+    isDocumentAccepted(doc) {
+        if (!this.settings.exclude) return true;
+        for (const exclude of this.settings.exclude){
+            if (minimatch.minimatch(doc.uri, exclude)) {
+                return false;
+            }
+        }
+        return true;
+    }
+}
+
+module.exports = CSSLanguageService;

package/dist/core.d.ts

@@ -0,0 +1,29 @@
+import { MasterCSS } from '@master/css';
+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 suggestSyntax from './features/suggest-syntax';
+import { TextDocument } from 'vscode-languageserver-textdocument';
+export interface ClassPosition {
+    range: {
+        start: number;
+        end: number;
+    };
+    raw: string;
+    token: string;
+}
+export default class CSSLanguageService extends EventEmitter {
+    customSettings?: Settings | undefined;
+    css: MasterCSS;
+    settings: Settings;
+    constructor(customSettings?: Settings | undefined);
+    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;
+    getClassPosition(textDocument: TextDocument, position: Position): ClassPosition | undefined;
+    isDocumentAccepted(doc: TextDocument): boolean;
+}