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

package/dist/utils/completion-index.d.ts

@@ -0,0 +1,38 @@
+import { type CompletionItem } from 'vscode-languageserver-protocol';
+import { type AtRule, type MasterCSS } from '@master/css-language';
+import type { Variable } from '@master/css-language';
+export interface ClassCompletionEntry extends CompletionItem {
+    documentationClassName?: string;
+}
+export interface PatternValueCandidate {
+    value: string;
+}
+export interface ScopedVariableCandidate {
+    name: string;
+    variable: Variable;
+}
+export interface AnimationUtilityCandidate {
+    detailPrefix?: string;
+}
+export interface SelectorVariantCandidate {
+    token: string;
+    selector: string;
+}
+export interface CompletionIndex {
+    classEntries: ClassCompletionEntry[];
+    componentNames: string[];
+    utilityNames: string[];
+    nativeUtilityKeys: Map<string, string>;
+    scopedVariablesByKey: Map<string, ScopedVariableCandidate[]>;
+    patternValuesByKey: Map<string, PatternValueCandidate[]>;
+    animationUtilitiesByKey: Map<string, AnimationUtilityCandidate[]>;
+    nativeVariableNamespacesByProperty: Map<string, string[]>;
+    variables: Variable[];
+    pseudoClassNames: string[];
+    pseudoClassSelectors: SelectorVariantCandidate[];
+    pseudoElementNames: string[];
+    pseudoElementSelectors: SelectorVariantCandidate[];
+    atRules: [string, AtRule][];
+}
+export declare function createCompletionIndex(css?: MasterCSS): CompletionIndex;
+export declare function matchesIndexedName(field: string, name: string): boolean;

package/dist/utils/completion-index.mjs

@@ -0,0 +1,268 @@
+import { CompletionItemKind } from 'vscode-languageserver-protocol';
+import { builtinNativeValueNamespaces, builtinKeyAliases } from '@master/css-engine';
+import { UtilityType, 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) {
+    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 === 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(builtinKeyAliases)){
+        addPropertyCompletionItem(key, canonicalKey);
+    }
+    for (const namespace of 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() {
+    const namespacesByProperty = new Map();
+    for (const namespace of 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()) {
+    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 === UtilityType.Semantic ? utilityNames : undefined;
+        for (const matcher of utility.matchers){
+            if (matcher.type === 'static') {
+                staticNames?.push(matcher.name);
+                if (utility.type === 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 === 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 {
+        classEntries: collectClassEntries(css),
+        componentNames,
+        utilityNames,
+        nativeUtilityKeys,
+        scopedVariablesByKey,
+        patternValuesByKey,
+        animationUtilitiesByKey,
+        nativeVariableNamespacesByProperty: createNativeVariableNamespacesByProperty(),
+        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.d.ts

@@ -0,0 +1,4 @@
+import type { MasterCSS } from '@master/css-language';
+import type { ColorPresentationParams } from 'vscode-languageserver-protocol';
+export default function convertColorByToken(color: ColorPresentationParams['color'], colorToken: string, css: MasterCSS): string | undefined;
+export declare function normalizeCSSColorFunctionName(fn: string): string;

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

@@ -0,0 +1,55 @@
+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.d.ts

@@ -0,0 +1,5 @@
+export interface CSSMarkdownDocumentation {
+    kind: 'markdown';
+    value: string;
+}
+export default function createCSSMarkdownDocumentation(css: string): CSSMarkdownDocumentation | undefined;

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

@@ -0,0 +1,15 @@
+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.d.ts

@@ -0,0 +1,16 @@
+import { TextDocument } from 'vscode-languageserver-textdocument';
+export declare const languageIdOfExt: {
+    ts: string;
+    tsx: string;
+    js: string;
+    jsx: string;
+    css: string;
+    scss: string;
+    less: string;
+    html: string;
+    json: string;
+    vue: string;
+    svelte: string;
+    astro: string;
+};
+export default function createDoc(ext: keyof typeof languageIdOfExt, content: string): TextDocument;

package/dist/utils/create-doc.mjs

@@ -0,0 +1,21 @@
+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.d.ts

@@ -0,0 +1,4 @@
+import { type CompletionItem } from 'vscode-languageserver-protocol';
+import { MasterCSS } from '@master/css-language';
+import { type CompletionIndex } from './completion-index';
+export default function getClassCompletionItems(css?: MasterCSS, completionIndex?: CompletionIndex): CompletionItem[];

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

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

package/dist/utils/get-color-completion-items.d.ts

@@ -0,0 +1,3 @@
+import { MasterCSS } from '@master/css-language';
+import { type CompletionItem } from 'vscode-languageserver-protocol';
+export default function getColorCompletionItems(css?: MasterCSS): CompletionItem[];

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

@@ -0,0 +1,24 @@
+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.d.ts

@@ -0,0 +1 @@
+export default function getPosition(searchString: string, text: string): import("vscode-languageserver-textdocument").Position;

package/dist/utils/get-position.mjs

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

package/dist/utils/get-pseudo-class-completion-items.d.ts

@@ -0,0 +1,4 @@
+import { MasterCSS } from '@master/css-language';
+import { type CompletionItem } from 'vscode-languageserver-protocol';
+import { type CompletionIndex } from './completion-index';
+export default function getPseudoClassCompletionItems(css: MasterCSS | undefined, syntax: string, completionIndex?: CompletionIndex): CompletionItem[];

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

@@ -0,0 +1,68 @@
+import { generateCSS, createDefaultCSS } from '@master/css-language';
+import { CompletionItemKind } from 'vscode-languageserver-protocol';
+import sortCompletionItems from './sort-completion-items.mjs';
+import createCSSMarkdownDocumentation from './create-css-markdown-documentation.mjs';
+import { createCompletionIndex } from './completion-index.mjs';
+
+const kind = CompletionItemKind.Function;
+const functionalPseudoClassNames = new Set([
+    ':current',
+    ':dir',
+    ':has',
+    ':has-slotted',
+    ':host',
+    ':host-context',
+    ':is',
+    ':lang',
+    ':local-link',
+    ':not',
+    ':nth',
+    ':nth-child',
+    ':nth-col',
+    ':nth-last',
+    ':nth-last-child',
+    ':nth-last-col',
+    ':nth-last-of-type',
+    ':nth-of-type',
+    ':of',
+    ':state',
+    ':where'
+]);
+function normalizeFunctionalPseudoClass(name) {
+    return functionalPseudoClassNames.has(name) ? name + '()' : name;
+}
+function getPseudoClassCompletionItems(css = createDefaultCSS(), syntax, completionIndex = createCompletionIndex(css)) {
+    const completionItems = completionIndex.pseudoClassNames.map((pseudoClassName)=>{
+        const name = normalizeFunctionalPseudoClass(pseudoClassName);
+        let sortText = name.startsWith(':-') ? 'yyyy' + name.slice(2) : 'yy' + name.replace(/^:/, '');
+        if (sortText.endsWith('()')) sortText = 'y' + sortText;
+        return {
+            label: name,
+            sortText,
+            documentation: createCSSMarkdownDocumentation(generateCSS([
+                syntax + name.slice(1)
+            ], css)),
+            kind
+        };
+    });
+    for (const { token: name, selector } of completionIndex.pseudoClassSelectors){
+        if (name.startsWith('::')) continue;
+        const value = selector.replace(/&/g, '');
+        const label = normalizeFunctionalPseudoClass(name);
+        let sortText = label.startsWith(':-') ? 'yyyy' + label.slice(2) : 'yy' + label.replace(/^:/, '');
+        if (sortText.endsWith('()')) sortText = 'y' + sortText;
+        const completionItem = {
+            label,
+            documentation: createCSSMarkdownDocumentation(generateCSS([
+                syntax + label.slice(1)
+            ], css)),
+            sortText,
+            kind,
+            detail: String(value)
+        };
+        completionItems.push(completionItem);
+    }
+    return sortCompletionItems(completionItems);
+}
+
+export { getPseudoClassCompletionItems as default };

package/dist/utils/get-pseudo-element-completion-items.d.ts

@@ -0,0 +1,4 @@
+import { MasterCSS } from '@master/css-language';
+import { type CompletionItem } from 'vscode-languageserver-protocol';
+import { type CompletionIndex } from './completion-index';
+export default function getPseudoElementCompletionItems(css: MasterCSS | undefined, syntax: string, completionIndex?: CompletionIndex): CompletionItem[];

package/dist/utils/get-pseudo-element-completion-items.mjs

@@ -0,0 +1,43 @@
+import { generateCSS, createDefaultCSS } from '@master/css-language';
+import { CompletionItemKind } from 'vscode-languageserver-protocol';
+import sortCompletionItems from './sort-completion-items.mjs';
+import createCSSMarkdownDocumentation from './create-css-markdown-documentation.mjs';
+import { createCompletionIndex } from './completion-index.mjs';
+
+const kind = CompletionItemKind.Function;
+function getPseudoElementCompletionItems(css = createDefaultCSS(), syntax, completionIndex = createCompletionIndex(css)) {
+    const completionItems = completionIndex.pseudoElementNames.map((pseudoElementName)=>{
+        const name = /::(?:part|slotted)/.test(pseudoElementName) ? pseudoElementName + '()' : pseudoElementName;
+        let sortText = name.startsWith('::-') ? 'zzzz' + name.slice(3) : 'zz' + name.replace(/^::/, '');
+        if (sortText.endsWith('()')) sortText = 'z' + sortText;
+        return {
+            label: name,
+            sortText,
+            documentation: createCSSMarkdownDocumentation(generateCSS([
+                syntax + name.slice(2)
+            ], css)),
+            kind
+        };
+    });
+    for (const variant of completionIndex.pseudoElementSelectors){
+        const selectorName = variant.token;
+        const selectorValue = variant.selector.replace(/&/g, '');
+        const name = selectorName.endsWith('(') ? selectorName + ')' : selectorName;
+        const value = typeof selectorValue === 'string' ? selectorValue.endsWith('(') ? selectorValue + ')' : selectorValue : selectorValue;
+        let sortText = name.startsWith('::-') ? 'zzzz' + name.slice(3) : 'zz' + name.replace(/^::/, '');
+        if (sortText.endsWith('()')) sortText = 'z' + sortText;
+        const completionItem = {
+            label: name,
+            documentation: createCSSMarkdownDocumentation(generateCSS([
+                syntax + name.slice(2)
+            ], css)),
+            sortText,
+            kind,
+            detail: String(value)
+        };
+        completionItems.push(completionItem);
+    }
+    return sortCompletionItems(completionItems);
+}
+
+export { getPseudoElementCompletionItems as default };

package/dist/utils/get-query-completion-items.d.ts

@@ -0,0 +1,4 @@
+import { MasterCSS } from '@master/css-language';
+import { CompletionItem } from 'vscode-languageserver-protocol';
+import { type CompletionIndex } from './completion-index';
+export default function getQueryCompletionItems(css: MasterCSS | undefined, triggerCharacter: string | undefined, syntax: string, completionIndex?: CompletionIndex): CompletionItem[];