@master/css-language-service 2.0.0-rc.73 → 2.0.0-rc.74

package/dist/features/inspect-syntax.mjs

@@ -1,54 +0,0 @@
-import createCSSMarkdownDocumentation from '../utils/create-css-markdown-documentation.mjs';
-import { 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 === this.runtime.UtilityType.Semantic && utility.layerName === 'components');
-    if (component) {
-        const documentation = createCSSMarkdownDocumentation(generateCSS([
-            token
-        ], this.css, this.runtime));
-        if (documentation) {
-            return {
-                contents: {
-                    kind: documentation.kind,
-                    value: `(components) ` + documentation.value
-                }
-            };
-        }
-    } else {
-        const utility = utilities[0];
-        if (utility) {
-            if (utility.type === this.runtime.UtilityType.Semantic) {
-                const documentation = createCSSMarkdownDocumentation(generateCSS([
-                    token
-                ], this.css, this.runtime));
-                if (documentation) {
-                    return {
-                        contents: documentation,
-                        range
-                    };
-                }
-            } else {
-                const documentation = createCSSMarkdownDocumentation(generateCSS([
-                    token
-                ], this.css, this.runtime));
-                if (documentation) {
-                    return {
-                        contents: documentation,
-                        range
-                    };
-                }
-            }
-        }
-    }
-}
-
-export { inspectSyntax as default };

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

@@ -1,10 +0,0 @@
-import { renderSemanticTokens as renderSemanticTokens$1, renderSemanticTokensAtPosition as renderSemanticTokensAtPosition$1 } from '@master/css-language';
-
-function renderSemanticTokensAtPosition(document, position) {
-    return renderSemanticTokensAtPosition$1(this.css, document, this.getClassContextPositions(document, position), position, this.settings);
-}
-function renderSemanticTokens(document) {
-    return renderSemanticTokens$1(this.css, document, this.getClassPositions(document), this.settings);
-}
-
-export { renderSemanticTokens as default, renderSemanticTokensAtPosition };

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

@@ -1,101 +0,0 @@
-import { instancePattern } from '../utils/regex.mjs';
-import Color from 'colorjs.io';
-
-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 !== this.runtime.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.mjs

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

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

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

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

package/dist/utils/completion-index.mjs

@@ -1,269 +0,0 @@
-import { CompletionItemKind } from 'vscode-languageserver-protocol';
-import { defaultCSSLanguageRuntime, getMdnPseudoElementNames, getMdnPseudoClassNames, createDefaultCSS } from '@master/css-language';
-import getUtilityInfo from './get-utility-info.mjs';
-import sortCompletionItems from './sort-completion-items.mjs';
-
-const ANIMATION_REFERENCE_PROPERTIES = new Set([
-    'animation',
-    'animation-name'
-]);
-function utilityMayReferenceAnimations(utility) {
-    const emit = utility.emit;
-    switch(emit.type){
-        case 'declarations':
-            return emit.declarations.some((property)=>ANIMATION_REFERENCE_PROPERTIES.has(property));
-        case 'property':
-            return ANIMATION_REFERENCE_PROPERTIES.has(emit.property);
-        case 'template':
-            return Object.keys(emit.declarations).some((property)=>ANIMATION_REFERENCE_PROPERTIES.has(property));
-        case 'static':
-            return emit.rules.some((rule)=>Object.keys(rule.declarations).some((property)=>ANIMATION_REFERENCE_PROPERTIES.has(property)));
-        default:
-            return false;
-    }
-}
-function isPureNativePropertyUtility(utility) {
-    return utility.emit.type === 'property' && utility.id === utility.emit.property && utility.name === utility.emit.property;
-}
-function addMapValue(map, key, value) {
-    const values = map.get(key);
-    if (values) {
-        values.push(value);
-    } else {
-        map.set(key, [
-            value
-        ]);
-    }
-}
-function collectClassEntries(css, runtime) {
-    const completionItems = [];
-    const addedKeys = new Set();
-    const addedCompletionLabels = new Set();
-    const propertyCompletionItem = {
-        kind: CompletionItemKind.Property,
-        command: {
-            title: 'triggerSuggest',
-            command: 'editor.action.triggerSuggest'
-        }
-    };
-    const addPropertyCompletionItem = (key, detail)=>{
-        const label = key + ':';
-        if (addedCompletionLabels.has(label)) return;
-        addedCompletionLabels.add(label);
-        completionItems.push({
-            ...propertyCompletionItem,
-            ...detail ? {
-                detail
-            } : {},
-            label,
-            sortText: key
-        });
-    };
-    const addSemanticCompletionItem = (label, detail)=>{
-        if (addedCompletionLabels.has(label)) return;
-        addedCompletionLabels.add(label);
-        completionItems.push({
-            label,
-            kind: CompletionItemKind.Value,
-            documentationClassName: label,
-            ...detail ? {
-                detail
-            } : {}
-        });
-    };
-    for (const eachDefinedUtility of css.definedUtilities){
-        if (eachDefinedUtility.type === runtime.UtilityType.Semantic) {
-            const isComponent = eachDefinedUtility.layer === 'components';
-            const { detail } = getUtilityInfo(eachDefinedUtility);
-            for (const matcher of eachDefinedUtility.matchers){
-                if (matcher.type === 'static') {
-                    addSemanticCompletionItem(matcher.name, isComponent ? 'component' : detail);
-                } else if (matcher.type === 'pattern') {
-                    for (const value of matcher.values){
-                        addSemanticCompletionItem(matcher.prefix + value, isComponent ? 'component' : undefined);
-                    }
-                }
-            }
-        } else {
-            for (const matcher of eachDefinedUtility.matchers){
-                if (matcher.type !== 'pattern') continue;
-                for (const value of matcher.values){
-                    addSemanticCompletionItem(matcher.prefix + value);
-                }
-            }
-            eachDefinedUtility.keys?.forEach((key)=>{
-                addedKeys.delete(key);
-                addPropertyCompletionItem(key);
-            });
-            if (eachDefinedUtility.aliasGroups?.length) {
-                for (const aliasGroup of eachDefinedUtility.aliasGroups){
-                    if (addedKeys.has(aliasGroup)) {
-                        continue;
-                    }
-                    addedKeys.add(aliasGroup);
-                }
-            }
-        }
-    }
-    for (const [key, canonicalKey] of Object.entries(runtime.builtinKeyAliases)){
-        addPropertyCompletionItem(key, canonicalKey);
-    }
-    for (const namespace of runtime.builtinNativeValueNamespaces){
-        for (const property of namespace.properties){
-            addPropertyCompletionItem(property);
-        }
-    }
-    addedKeys.forEach((aliasGroup)=>{
-        /**
-         * Ambiguous keys are added to the completion list
-         * @example text: t:
-         */ if (addedCompletionLabels.has(aliasGroup + ':')) return;
-        completionItems.push({
-            ...propertyCompletionItem,
-            detail: 'ambiguous key',
-            label: aliasGroup + ':',
-            sortText: aliasGroup
-        });
-    });
-    return sortCompletionItems(completionItems);
-}
-function createPseudoClassSelectors(css) {
-    const selectors = new Map([
-        [
-            ':of',
-            ':of'
-        ]
-    ]);
-    for (const [token, branches] of css.variants){
-        const selector = branches.find((branch)=>branch.selector)?.selector;
-        if (selector && token.startsWith(':') && !token.startsWith('::')) {
-            selectors.set(token, selector);
-        }
-    }
-    return Array.from(selectors, ([token, selector])=>({
-            token,
-            selector
-        }));
-}
-function createPseudoElementSelectors(css) {
-    const selectors = [];
-    for (const [token, branches] of css.variants){
-        const selector = branches.find((branch)=>branch.selector)?.selector;
-        if (selector && token.startsWith('::')) {
-            selectors.push({
-                token,
-                selector
-            });
-        }
-    }
-    return selectors;
-}
-function createNativeVariableNamespacesByProperty(runtime) {
-    const namespacesByProperty = new Map();
-    for (const namespace of runtime.builtinNativeValueNamespaces){
-        const variableNamespaces = (namespace.variableAliasRefs || []).map((ref)=>ref[0] === '=' || ref[0] === '~' ? ref.slice(1) : '').filter(Boolean);
-        if (!variableNamespaces.length) continue;
-        for (const property of namespace.properties){
-            const namespaces = namespacesByProperty.get(property);
-            if (namespaces) {
-                namespaces.push(...variableNamespaces);
-            } else {
-                namespacesByProperty.set(property, [
-                    ...variableNamespaces
-                ]);
-            }
-        }
-    }
-    return namespacesByProperty;
-}
-function createCompletionIndex(css = createDefaultCSS(), runtime = defaultCSSLanguageRuntime) {
-    const componentNames = [];
-    const utilityNames = [];
-    const nativeUtilityKeys = new Map();
-    const scopedVariablesByKey = new Map();
-    const patternValuesByKey = new Map();
-    const animationUtilitiesByKey = new Map();
-    for (const utility of css.definedUtilities){
-        const staticNames = utility.type === runtime.UtilityType.Semantic ? utilityNames : undefined;
-        for (const matcher of utility.matchers){
-            if (matcher.type === 'static') {
-                staticNames?.push(matcher.name);
-                if (utility.type === runtime.UtilityType.Semantic && utility.layer === 'components') {
-                    componentNames.push(matcher.name);
-                }
-            } else if (matcher.type === 'pattern') {
-                const patternNames = matcher.values.map((value)=>matcher.prefix + value);
-                utilityNames.push(...patternNames);
-                if (utility.type === runtime.UtilityType.Semantic && utility.layer === 'components') {
-                    componentNames.push(...patternNames);
-                }
-                if (matcher.prefix.endsWith(':')) {
-                    const key = matcher.prefix.slice(0, -1);
-                    for (const value of matcher.values){
-                        addMapValue(patternValuesByKey, key, {
-                            value
-                        });
-                    }
-                }
-            }
-        }
-        for (const key of utility.keys || []){
-            if (!nativeUtilityKeys.has(key)) {
-                nativeUtilityKeys.set(key, utility.emit.type === 'property' ? utility.emit.property : utility.id);
-            }
-        }
-        if (utility.variables?.size) {
-            const keys = new Set([
-                utility.key,
-                utility.subkey,
-                ...utility.keys || [],
-                ...utility.aliasGroups || []
-            ].filter((key)=>Boolean(key)));
-            for (const key of keys){
-                utility.variables.forEach((variable, name)=>{
-                    addMapValue(scopedVariablesByKey, key, {
-                        name,
-                        variable
-                    });
-                });
-            }
-        }
-        if (utility.keys?.length && utilityMayReferenceAnimations(utility)) {
-            const detailPrefix = isPureNativePropertyUtility(utility) ? utility.id : undefined;
-            for (const key of utility.keys){
-                addMapValue(animationUtilitiesByKey, key, {
-                    detailPrefix
-                });
-            }
-        }
-    }
-    return {
-        runtime,
-        keyAliases: runtime.builtinKeyAliases,
-        classEntries: collectClassEntries(css, runtime),
-        componentNames,
-        utilityNames,
-        nativeUtilityKeys,
-        scopedVariablesByKey,
-        patternValuesByKey,
-        animationUtilitiesByKey,
-        nativeVariableNamespacesByProperty: createNativeVariableNamespacesByProperty(runtime),
-        variables: Array.from(css.variables.values()),
-        pseudoClassNames: getMdnPseudoClassNames(),
-        pseudoClassSelectors: createPseudoClassSelectors(css),
-        pseudoElementNames: getMdnPseudoElementNames(),
-        pseudoElementSelectors: createPseudoElementSelectors(css),
-        atRules: Array.from(css.atRules.entries())
-    };
-}
-function matchesIndexedName(field, name) {
-    if (!field.startsWith(name)) return false;
-    const nextCharacter = field.charAt(name.length);
-    if (nextCharacter === '_') return true;
-    const lastCharacter = name.charAt(name.length - 1);
-    const lastIsWord = /\w/.test(lastCharacter);
-    const nextIsWord = /\w/.test(nextCharacter);
-    return lastIsWord !== nextIsWord;
-}
-
-export { createCompletionIndex, matchesIndexedName };

package/dist/utils/convert-color-token.mjs

@@ -1,55 +0,0 @@
-import Color from 'colorjs.io';
-
-function convertColorByToken(color, colorToken, css) {
-    const valueComponent = css.generate('color:' + colorToken)[0]?.valueComponents[0];
-    let outputSpace = 'srgb';
-    switch(valueComponent?.type){
-        case 'function':
-            outputSpace = valueComponent.name;
-            break;
-        case 'variable':
-            outputSpace = String(valueComponent.variable?.value || '').match(/^([a-zA-Z][\w-]*)\(/)?.[1] || outputSpace;
-            break;
-        case 'string':
-            outputSpace = 'srgb';
-            break;
-    }
-    outputSpace = normalizeCSSColorFunctionName(outputSpace);
-    if (!outputSpace) {
-        return;
-    }
-    return new Color({
-        space: 'srgb',
-        coords: [
-            color.red,
-            color.green,
-            color.blue
-        ],
-        alpha: color.alpha
-    }).to(outputSpace).toString({
-        format: 'css',
-        precision: 4,
-        inGamut: false
-    }).replace(' / ', '/').replaceAll(' ', '|');
-}
-function normalizeCSSColorFunctionName(fn) {
-    switch(fn){
-        case 'rgb':
-        case 'rgba':
-            return 'srgb';
-        case 'hsla':
-            return 'hsl';
-        case 'display-p3':
-        case 'p3':
-            return 'p3';
-        case 'rec2020':
-        case 'rec.2020':
-            return 'rec2020';
-        case 'color':
-            return '';
-        default:
-            return fn;
-    }
-}
-
-export { convertColorByToken as default, normalizeCSSColorFunctionName };

package/dist/utils/create-css-markdown-documentation.mjs

@@ -1,15 +0,0 @@
-import beautifyCSS from './beautify-css.mjs';
-
-function createCSSMarkdownDocumentation(css) {
-    if (!css) return;
-    const cssLines = beautifyCSS(css).split('\n');
-    if (cssLines[0] === '') {
-        cssLines.shift();
-    }
-    return {
-        kind: 'markdown',
-        value: '```css\n' + cssLines.join('\n') + '\n```'
-    };
-}
-
-export { createCSSMarkdownDocumentation as default };

package/dist/utils/create-doc.mjs

@@ -1,21 +0,0 @@
-import { TextDocument } from 'vscode-languageserver-textdocument';
-
-const languageIdOfExt = {
-    ts: 'typescript',
-    tsx: 'typescriptreact',
-    js: 'javascript',
-    jsx: 'javascriptreact',
-    css: 'css',
-    scss: 'scss',
-    less: 'less',
-    html: 'html',
-    json: 'json',
-    vue: 'vue',
-    svelte: 'svelte',
-    astro: 'astro'
-};
-function createDoc(ext, content) {
-    return TextDocument.create(`file:///abc.${ext}`, languageIdOfExt[ext], 0, content);
-}
-
-export { createDoc as default, languageIdOfExt };

package/dist/utils/get-class-completion-items.mjs

@@ -1,19 +0,0 @@
-import { generateCSS, createDefaultCSS } from '@master/css-language';
-import createCSSMarkdownDocumentation from './create-css-markdown-documentation.mjs';
-import { createCompletionIndex } from './completion-index.mjs';
-
-function getClassCompletionItems(css = createDefaultCSS(), completionIndex = createCompletionIndex(css)) {
-    return completionIndex.classEntries.map((entry)=>{
-        const { documentationClassName, ...completionItem } = entry;
-        return {
-            ...completionItem,
-            ...documentationClassName ? {
-                documentation: createCSSMarkdownDocumentation(generateCSS([
-                    documentationClassName
-                ], css, completionIndex.runtime))
-            } : {}
-        };
-    });
-}
-
-export { getClassCompletionItems as default };

package/dist/utils/get-color-completion-items.mjs

@@ -1,24 +0,0 @@
-import { createDefaultCSS } from '@master/css-language';
-import { CompletionItemKind } from 'vscode-languageserver-protocol';
-import sortCompletionItems from './sort-completion-items.mjs';
-
-function getColorCompletionItems(css = createDefaultCSS()) {
-    const completionItems = [];
-    css.variables.forEach((eachVariable, eachVariableName)=>{
-        if (eachVariable.namespace?.startsWith('color')) {
-            const valueToken = eachVariable.value ?? eachVariable.name;
-            completionItems.push({
-                label: eachVariableName,
-                // detail is shown in the detail pane
-                detail: String(valueToken),
-                // documentation is shown in the hover
-                documentation: String(valueToken),
-                kind: CompletionItemKind.Color,
-                sortText: eachVariableName.replace(/(.+?)-(\d+)/, (match, prefix, num)=>prefix + '-' + ('00000' + num).slice(-5))
-            });
-        }
-    });
-    return sortCompletionItems(completionItems);
-}
-
-export { getColorCompletionItems as default };

package/dist/utils/get-position.mjs

@@ -1,10 +0,0 @@
-import { TextDocument } from 'vscode-languageserver-textdocument';
-
-function getPosition(searchString, text) {
-    const document = TextDocument.create('mockuri://test', 'plaintext', 1, text);
-    const offset = text.indexOf(searchString);
-    const position = document.positionAt(offset);
-    return position;
-}
-
-export { getPosition as default };