@master/css-language-service 2.0.0-rc.4 → 2.0.0-rc.41

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,248 @@
+'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){
+                // eslint-disable-next-line prefer-const
+                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,30 @@
+/// <reference types="node" />
+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 type 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;
+}

package/dist/core.mjs

@@ -0,0 +1,246 @@
+import { MasterCSS } from '@master/css';
+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 suggestSyntax from './features/suggest-syntax.mjs';
+import findMatchingPairs from './utils/find-matching-brackets.mjs';
+import escapeRegexp from 'lodash.escaperegexp';
+
+class CSSLanguageService extends EventEmitter {
+    customSettings;
+    css;
+    settings;
+    constructor(customSettings){
+        super();
+        this.customSettings = customSettings;
+        this.settings = extend(settings, customSettings);
+        this.css = new 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){
+                // eslint-disable-next-line prefer-const
+                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 + '=',
+                '\'',
+                '\''
+            ]);
+        });
+        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(doc.uri, exclude)) {
+                return false;
+            }
+        }
+        return true;
+    }
+}
+
+export { CSSLanguageService as default };

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

@@ -0,0 +1,19 @@
+'use strict';
+
+var convertColorToken = require('../utils/convert-color-token.cjs');
+
+function editSyntaxColors(document, color, range) {
+    const colorPresentations = [];
+    const selectedColorToken = document.getText(range);
+    const targetColorToken = convertColorToken(color, selectedColorToken, this.css);
+    if (targetColorToken) colorPresentations.push({
+        label: targetColorToken,
+        textEdit: {
+            range,
+            newText: targetColorToken
+        }
+    });
+    return colorPresentations;
+}
+
+module.exports = editSyntaxColors;

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[];