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

package/dist/core.mjs

@@ -0,0 +1,244 @@
+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){
+                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[];

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.cjs

@@ -0,0 +1,70 @@
+'use strict';
+
+var getCssDataDocumentation = require('../utils/get-css-data-documentation.cjs');
+var css = require('@master/css');
+var cssDataProvider = require('../utils/css-data-provider.cjs');
+var getUtilityInfo = require('../utils/get-utility-info.cjs');
+
+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 componentClasses = this.css.components.get(token);
+    if (componentClasses) {
+        const documentation = getCssDataDocumentation.getCSSDataDocumentation({}, {
+            generatedCSS: css.generateCSS([
+                token
+            ], this.css),
+            docs: '/guide/components'
+        });
+        if (documentation) {
+            return {
+                contents: {
+                    kind: documentation.kind,
+                    value: `(style) ` + componentClasses.join(' ') + '\n' + documentation.value
+                }
+            };
+        }
+    } else {
+        const rules = this.css.generate(token);
+        const rule = rules[0];
+        if (rule) {
+            if (rule.type === css.SyntaxRuleType.Utility) {
+                const { data, docs } = getUtilityInfo(rule.registeredSyntax, this.css);
+                const documentation = getCssDataDocumentation.getCSSDataDocumentation(data, {
+                    generatedCSS: css.generateCSS([
+                        token
+                    ], this.css),
+                    docs
+                });
+                if (documentation) {
+                    return {
+                        contents: documentation,
+                        range
+                    };
+                }
+            } else {
+                const nativeProperties = cssDataProvider.provideProperties();
+                const nativeCSSPropertyData = nativeProperties.find(({ name })=>name === rule.id);
+                const documentation = getCssDataDocumentation.getCSSDataDocumentation(nativeCSSPropertyData, {
+                    generatedCSS: css.generateCSS([
+                        token
+                    ], this.css),
+                    docs: '/reference/' + (css.isCoreRule(rule.id) && rule.id)
+                });
+                if (documentation) {
+                    return {
+                        contents: documentation,
+                        range
+                    };
+                }
+            }
+        }
+    }
+}
+
+module.exports = inspectSyntax;

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,68 @@
+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';
+
+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 componentClasses = this.css.components.get(token);
+    if (componentClasses) {
+        const documentation = getCSSDataDocumentation({}, {
+            generatedCSS: generateCSS([
+                token
+            ], this.css),
+            docs: '/guide/components'
+        });
+        if (documentation) {
+            return {
+                contents: {
+                    kind: documentation.kind,
+                    value: `(style) ` + componentClasses.join(' ') + '\n' + 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
+                });
+                if (documentation) {
+                    return {
+                        contents: documentation,
+                        range
+                    };
+                }
+            } 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)
+                });
+                if (documentation) {
+                    return {
+                        contents: documentation,
+                        range
+                    };
+                }
+            }
+        }
+    }
+}
+
+export { inspectSyntax as default };

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

@@ -0,0 +1,88 @@
+'use strict';
+
+var regex = require('../utils/regex.cjs');
+var culori = require('culori');
+var css = require('@master/css');
+
+async function renderSyntaxColors(document) {
+    const text = document.getText() ?? '';
+    const colorInformations = [];
+    for (const instanceMatch of text.matchAll(regex.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 !== css.SyntaxRuleType.Utility) {
+            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
+                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 = culori.parse(valueComponent.text);
+                        } else if (valueComponent.children.length) {
+                            currentLength += valueComponent.name.length + 1 // function name + '('
+                            ;
+                            valueComponent.children.forEach(resolveValueComponent);
+                        }
+                        break;
+                    case 'variable':
+                        if (valueComponent.variable?.type === 'color') {
+                            color = culori.parse(valueComponent.text);
+                        }
+                        break;
+                    case 'string':
+                        if (valueComponent.text !== '#' && valueComponent.text?.startsWith('#')) {
+                            color = culori.parse(valueComponent.text);
+                        }
+                        break;
+                }
+                // check if rgba is valid
+                if (color) {
+                    const rgbaColor = color.mode !== 'rgb' ? culori.converter('rgb')(color) : color;
+                    colorInformations.push({
+                        range: {
+                            start: document.positionAt(startOffset),
+                            end: document.positionAt(startOffset + valueComponentTokenLength)
+                        },
+                        color: {
+                            red: rgbaColor.r,
+                            green: rgbaColor.g,
+                            blue: rgbaColor.b,
+                            alpha: rgbaColor.alpha === undefined ? 1 : rgbaColor.alpha
+                        }
+                    });
+                }
+                currentLength += valueComponentTokenLength || 0;
+            };
+            rule.valueComponents.forEach(resolveValueComponent);
+        }
+    }
+    const colorIndexSet = new Set();
+    return colorInformations.filter((item)=>{
+        if (colorIndexSet.has(item.range.start)) {
+            return false;
+        } else {
+            colorIndexSet.add(item.range.start);
+            return true;
+        }
+    });
+}
+
+module.exports = renderSyntaxColors;

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,86 @@
+import { instancePattern } from '../utils/regex.mjs';
+import { parse, converter } from 'culori';
+import { SyntaxRuleType } from '@master/css';
+
+async function renderSyntaxColors(document) {
+    const text = document.getText() ?? '';
+    const colorInformations = [];
+    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 !== SyntaxRuleType.Utility) {
+            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
+                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 = parse(valueComponent.text);
+                        } else if (valueComponent.children.length) {
+                            currentLength += valueComponent.name.length + 1 // function name + '('
+                            ;
+                            valueComponent.children.forEach(resolveValueComponent);
+                        }
+                        break;
+                    case 'variable':
+                        if (valueComponent.variable?.type === 'color') {
+                            color = parse(valueComponent.text);
+                        }
+                        break;
+                    case 'string':
+                        if (valueComponent.text !== '#' && valueComponent.text?.startsWith('#')) {
+                            color = parse(valueComponent.text);
+                        }
+                        break;
+                }
+                // check if rgba is valid
+                if (color) {
+                    const rgbaColor = color.mode !== 'rgb' ? converter('rgb')(color) : color;
+                    colorInformations.push({
+                        range: {
+                            start: document.positionAt(startOffset),
+                            end: document.positionAt(startOffset + valueComponentTokenLength)
+                        },
+                        color: {
+                            red: rgbaColor.r,
+                            green: rgbaColor.g,
+                            blue: rgbaColor.b,
+                            alpha: rgbaColor.alpha === undefined ? 1 : rgbaColor.alpha
+                        }
+                    });
+                }
+                currentLength += valueComponentTokenLength || 0;
+            };
+            rule.valueComponents.forEach(resolveValueComponent);
+        }
+    }
+    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.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+var querySyntaxCompletions = require('../utils/query-syntax-completions.cjs');
+
+function suggestSyntax(document, position, context) {
+    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);
+    }
+// todo
+// else if (isInstance === true && checkConfigColorsBlock(document, position) === true) {
+//     return getColorCompletionItems(this.css)
+// }
+}
+
+module.exports = suggestSyntax;

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

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

package/dist/features/suggest-syntax.mjs

@@ -0,0 +1,18 @@
+import querySyntaxCompletions from '../utils/query-syntax-completions.mjs';
+
+function suggestSyntax(document, position, context) {
+    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);
+    }
+// todo
+// else if (isInstance === true && checkConfigColorsBlock(document, position) === true) {
+//     return getColorCompletionItems(this.css)
+// }
+}
+
+export { suggestSyntax as default };