@master/css-language-service 2.0.0-rc.5 → 2.0.0-rc.50

package/dist/utils/convert-color-space.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+var culori = require('culori');
+
+function convertColorSpace(rgb, targetSpace) {
+    const alphaUsed = rgb.alpha !== 1;
+    const alphaToken = alphaUsed ? `/${rgb.alpha}` : '';
+    if (rgb.r === 0 && rgb.g === 0 && rgb.b === 0) return 'black' + alphaToken;
+    if (rgb.r === 1 && rgb.g === 1 && rgb.b === 1) return 'white' + alphaToken;
+    switch(targetSpace){
+        case 'hex':
+            return alphaUsed ? culori.serializeHex8(rgb) : culori.serializeHex(rgb);
+        case 'rgba':
+        case 'rgb':
+            return `rgb(${Math.round(rgb.r * 255)}|${Math.round(rgb.g * 255)}|${Math.round(rgb.b * 255)}${alphaToken})`;
+        case 'hsla':
+        case 'hsl':
+            const hsl = culori.modeHsl.fromMode.rgb(rgb);
+            return `hsl(${Math.round(hsl.h || 0)}|${Math.round(hsl.s * 100)}%|${Math.round(hsl.l * 100)}%${alphaToken})`;
+        case 'hwb':
+            const hwb = culori.modeHwb.fromMode.rgb(rgb);
+            return `hwb(${Math.round(hwb.h || 0)}|${Math.round(hwb.w * 100)}%|${Math.round(hwb.b * 100)}%${alphaToken})`;
+        case 'lab':
+            const lab = culori.modeLab.fromMode.rgb(rgb);
+            return `lab(${Math.round(lab.l)}%|${Math.round(lab.a)}|${Math.round(lab.b || 0)}${alphaToken})`;
+        case 'lch':
+            const lch = culori.modeLch.fromMode.rgb(rgb);
+            return `lch(${Math.round(lch.l)}%|${Math.round(lch.c)}|${Math.round(lch.h || 0)}${alphaToken})`;
+        case 'oklab':
+            const oklab = culori.modeOklab.fromMode.rgb(rgb);
+            return `oklab(${Math.round(oklab.l * 100)}%|${oklab.a.toFixed(4)}|${oklab.b.toFixed(4)}${alphaToken})`;
+        case 'oklch':
+            const oklch = culori.modeOklch.fromMode.rgb(rgb);
+            return `oklch(${Math.round(oklch.l * 100)}%|${oklch.c.toFixed(4)}|${Math.round(oklch.h || 0)}${alphaToken})`;
+    }
+    // color()
+    return culori.formatCss(rgb).replace(' / ', '/').replace(' ', '|');
+}
+
+module.exports = convertColorSpace;

package/dist/utils/convert-color-space.d.ts

@@ -0,0 +1,2 @@
+import { type Rgb } from 'culori';
+export default function convertColorSpace(rgb: Rgb, targetSpace: any): string | undefined;

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

@@ -0,0 +1,38 @@
+import { modeOklch, modeOklab, modeLch, modeLab, modeHwb, modeHsl, serializeHex8, serializeHex, formatCss } from 'culori';
+
+function convertColorSpace(rgb, targetSpace) {
+    const alphaUsed = rgb.alpha !== 1;
+    const alphaToken = alphaUsed ? `/${rgb.alpha}` : '';
+    if (rgb.r === 0 && rgb.g === 0 && rgb.b === 0) return 'black' + alphaToken;
+    if (rgb.r === 1 && rgb.g === 1 && rgb.b === 1) return 'white' + alphaToken;
+    switch(targetSpace){
+        case 'hex':
+            return alphaUsed ? serializeHex8(rgb) : serializeHex(rgb);
+        case 'rgba':
+        case 'rgb':
+            return `rgb(${Math.round(rgb.r * 255)}|${Math.round(rgb.g * 255)}|${Math.round(rgb.b * 255)}${alphaToken})`;
+        case 'hsla':
+        case 'hsl':
+            const hsl = modeHsl.fromMode.rgb(rgb);
+            return `hsl(${Math.round(hsl.h || 0)}|${Math.round(hsl.s * 100)}%|${Math.round(hsl.l * 100)}%${alphaToken})`;
+        case 'hwb':
+            const hwb = modeHwb.fromMode.rgb(rgb);
+            return `hwb(${Math.round(hwb.h || 0)}|${Math.round(hwb.w * 100)}%|${Math.round(hwb.b * 100)}%${alphaToken})`;
+        case 'lab':
+            const lab = modeLab.fromMode.rgb(rgb);
+            return `lab(${Math.round(lab.l)}%|${Math.round(lab.a)}|${Math.round(lab.b || 0)}${alphaToken})`;
+        case 'lch':
+            const lch = modeLch.fromMode.rgb(rgb);
+            return `lch(${Math.round(lch.l)}%|${Math.round(lch.c)}|${Math.round(lch.h || 0)}${alphaToken})`;
+        case 'oklab':
+            const oklab = modeOklab.fromMode.rgb(rgb);
+            return `oklab(${Math.round(oklab.l * 100)}%|${oklab.a.toFixed(4)}|${oklab.b.toFixed(4)}${alphaToken})`;
+        case 'oklch':
+            const oklch = modeOklch.fromMode.rgb(rgb);
+            return `oklch(${Math.round(oklch.l * 100)}%|${oklch.c.toFixed(4)}|${Math.round(oklch.h || 0)}${alphaToken})`;
+    }
+    // color()
+    return formatCss(rgb).replace(' / ', '/').replace(' ', '|');
+}
+
+export { convertColorSpace as default };

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

@@ -0,0 +1,28 @@
+'use strict';
+
+var convertColorSpace = require('./convert-color-space.cjs');
+
+function convertColorByToken(color, colorToken, css) {
+    const valueComponent = css.generate('color:' + colorToken)[0]?.valueComponents[0];
+    let outputColorSpace = 'hex';
+    switch(valueComponent?.type){
+        case 'function':
+            outputColorSpace = valueComponent.name;
+            break;
+        case 'variable':
+            outputColorSpace = valueComponent.variable?.space;
+            break;
+        case 'string':
+            outputColorSpace = 'hex';
+            break;
+    }
+    return convertColorSpace({
+        r: color.red,
+        g: color.green,
+        b: color.blue,
+        alpha: color.alpha,
+        mode: 'rgb'
+    }, outputColorSpace);
+}
+
+module.exports = convertColorByToken;

package/dist/utils/convert-color-token.d.ts

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

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

@@ -0,0 +1,26 @@
+import convertColorSpace from './convert-color-space.mjs';
+
+function convertColorByToken(color, colorToken, css) {
+    const valueComponent = css.generate('color:' + colorToken)[0]?.valueComponents[0];
+    let outputColorSpace = 'hex';
+    switch(valueComponent?.type){
+        case 'function':
+            outputColorSpace = valueComponent.name;
+            break;
+        case 'variable':
+            outputColorSpace = valueComponent.variable?.space;
+            break;
+        case 'string':
+            outputColorSpace = 'hex';
+            break;
+    }
+    return convertColorSpace({
+        r: color.red,
+        g: color.green,
+        b: color.blue,
+        alpha: color.alpha,
+        mode: 'rgb'
+    }, outputColorSpace);
+}
+
+export { convertColorByToken as default };

package/dist/utils/create-doc.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vscodeLanguageserverTextdocument = require('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 vscodeLanguageserverTextdocument.TextDocument.create(`file:///abc.${ext}`, languageIdOfExt[ext], 0, content);
+}
+
+exports.default = createDoc;
+exports.languageIdOfExt = languageIdOfExt;

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/css-data-provider.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var dataProvider = require('vscode-css-languageservice/lib/umd/languageFacts/dataProvider');
+var webCustomData = require('vscode-css-languageservice/lib/umd/data/webCustomData');
+
+// @ts-expect-error
+const cssDataProvider = new dataProvider.CSSDataProvider(webCustomData.cssData);
+
+module.exports = cssDataProvider;

package/dist/utils/css-data-provider.d.ts

@@ -0,0 +1,3 @@
+import type { ICSSDataProvider } from 'vscode-css-languageservice/lib/umd/cssLanguageTypes';
+declare const cssDataProvider: ICSSDataProvider;
+export default cssDataProvider;

package/dist/utils/css-data-provider.mjs

@@ -0,0 +1,7 @@
+import { CSSDataProvider } from 'vscode-css-languageservice/lib/umd/languageFacts/dataProvider';
+import { cssData } from 'vscode-css-languageservice/lib/umd/data/webCustomData';
+
+// @ts-expect-error
+const cssDataProvider = new CSSDataProvider(cssData);
+
+export { cssDataProvider as default };

package/dist/utils/find-matching-brackets.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+function findMatchingPairs(input, startIndex, start, end) {
+    let endIndex;
+    // {} [] ()
+    if (start !== end) {
+        let count = 1;
+        for(let i = startIndex; i < input.length; i++){
+            if (input[i] === start) {
+                count++;
+            } else if (input[i] === end) {
+                count--;
+                if (count === 0) {
+                    endIndex = i;
+                    break;
+                }
+            }
+        }
+    } else {
+        for(let i = startIndex; i < input.length; i++){
+            if (input[i] === start && input[i - 1] !== '\\') {
+                return i;
+            }
+        }
+    }
+    return endIndex;
+}
+
+module.exports = findMatchingPairs;

package/dist/utils/find-matching-brackets.d.ts

@@ -0,0 +1 @@
+export default function findMatchingPairs(input: string, startIndex: number, start: string, end: string): number | undefined;

package/dist/utils/find-matching-brackets.mjs

@@ -0,0 +1,27 @@
+function findMatchingPairs(input, startIndex, start, end) {
+    let endIndex;
+    // {} [] ()
+    if (start !== end) {
+        let count = 1;
+        for(let i = startIndex; i < input.length; i++){
+            if (input[i] === start) {
+                count++;
+            } else if (input[i] === end) {
+                count--;
+                if (count === 0) {
+                    endIndex = i;
+                    break;
+                }
+            }
+        }
+    } else {
+        for(let i = startIndex; i < input.length; i++){
+            if (input[i] === start && input[i - 1] !== '\\') {
+                return i;
+            }
+        }
+    }
+    return endIndex;
+}
+
+export { findMatchingPairs as default };

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

@@ -0,0 +1,30 @@
+'use strict';
+
+var css = require('@master/css');
+var vscodeLanguageserverProtocol = require('vscode-languageserver-protocol');
+var sortCompletionItems = require('./sort-completion-items.cjs');
+
+function getColorCompletionItems(css$1 = new css.MasterCSS()) {
+    const completionItems = [];
+    for(const eachVariableName in css$1.variables){
+        const eachVariable = css$1.variables[eachVariableName];
+        if (eachVariable.type === 'color') {
+            // todo: packages/core should support getTextByVariable(variable)
+            const valueToken = eachVariable.space && eachVariable.value ? `${eachVariable.space}(${eachVariable.value})` : eachVariable.value;
+            completionItems.push({
+                label: eachVariableName,
+                // detail is shown in the detail pane
+                // todo: eachVariable.token should be recorded as original config variable
+                detail: valueToken,
+                // documentation is shown in the hover
+                // todo: should convert and space to rgba
+                documentation: eachVariable.space && eachVariable.value ? `${eachVariable.space}(${eachVariable.value.split(' ').join(',')})` : eachVariable.value,
+                kind: vscodeLanguageserverProtocol.CompletionItemKind.Color,
+                sortText: eachVariableName.replace(/(.+?)-(\d+)/, (match, prefix, num)=>prefix + '-' + ('00000' + num).slice(-5))
+            });
+        }
+    }
+    return sortCompletionItems(completionItems);
+}
+
+module.exports = getColorCompletionItems;

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

@@ -0,0 +1,3 @@
+import { MasterCSS } from '@master/css';
+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,28 @@
+import { MasterCSS } from '@master/css';
+import { CompletionItemKind } from 'vscode-languageserver-protocol';
+import sortCompletionItems from './sort-completion-items.mjs';
+
+function getColorCompletionItems(css = new MasterCSS()) {
+    const completionItems = [];
+    for(const eachVariableName in css.variables){
+        const eachVariable = css.variables[eachVariableName];
+        if (eachVariable.type === 'color') {
+            // todo: packages/core should support getTextByVariable(variable)
+            const valueToken = eachVariable.space && eachVariable.value ? `${eachVariable.space}(${eachVariable.value})` : eachVariable.value;
+            completionItems.push({
+                label: eachVariableName,
+                // detail is shown in the detail pane
+                // todo: eachVariable.token should be recorded as original config variable
+                detail: valueToken,
+                // documentation is shown in the hover
+                // todo: should convert and space to rgba
+                documentation: eachVariable.space && eachVariable.value ? `${eachVariable.space}(${eachVariable.value.split(' ').join(',')})` : eachVariable.value,
+                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-css-data-documentation.cjs

@@ -0,0 +1,90 @@
+'use strict';
+
+var beautifyCss = require('./beautify-css.cjs');
+var css = require('@master/css');
+
+function getCSSDataDocumentation(data, additional) {
+    const values = [];
+    const references = data?.references ? [
+        ...data.references
+    ] : [];
+    if (data?.status) {
+        values.push(getEntryStatus(data.status));
+    }
+    if (additional?.generatedCSS) {
+        values.push('```css\n' + beautifyCss(additional.generatedCSS).split('\n').slice(1).join('\n') + '\n```');
+    }
+    if (data?.description) if (typeof data.description === 'string') {
+        values.push(textToMarkedString(data.description));
+    } else {
+        values.push(data.description.kind === 'markdown' ? data.description.value : textToMarkedString(data.description.value));
+    }
+    const browserLabel = getBrowserLabel(data?.browsers);
+    if (browserLabel) {
+        values.push('(' + textToMarkedString(browserLabel) + ')');
+    }
+    if (data && 'syntax' in data && data.syntax) {
+        values.push(`Syntax: ${textToMarkedString(data.syntax)}`);
+    }
+    // todo: can i use
+    if (additional?.docs) {
+        references.unshift({
+            name: 'Master CSS',
+            url: new URL(additional.docs, css.OFFICIAL_URL).href
+        });
+    }
+    if (references.length) {
+        values.push(references.map((r)=>{
+            return `[${r.name}](${r.url})`;
+        }).join(' | '));
+    }
+    return values?.length ? {
+        kind: 'markdown',
+        value: values.join('\n\n')
+    } : undefined;
+}
+const browserNames = {
+    E: 'Edge',
+    FF: 'Firefox',
+    S: 'Safari',
+    C: 'Chrome',
+    IE: 'IE',
+    O: 'Opera'
+};
+function getEntryStatus(status) {
+    switch(status){
+        case 'experimental':
+            return '⚠️ Property is experimental. Be cautious when using it.️\n\n';
+        case 'nonstandard':
+            return '🚨️ Property is nonstandard. Avoid using it.\n\n';
+        case 'obsolete':
+            return '🚨️️️ Property is obsolete. Avoid using it.\n\n';
+        default:
+            return '';
+    }
+}
+function textToMarkedString(text) {
+    text = text.replace(/[\\`*_{}[\]()#+\-.!]/g, '\\$&') // escape markdown syntax tokens: http://daringfireball.net/projects/markdown/syntax#backslash
+    ;
+    return text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+function getBrowserLabel(browsers = []) {
+    if (browsers.length === 0) {
+        return null;
+    }
+    return browsers.map((b)=>{
+        let value = '';
+        const matches = b.match(/([A-Z]+)(\d+)?/) ?? '';
+        const name = matches[1];
+        const version = matches[2];
+        if (name in browserNames) {
+            value += browserNames[name];
+        }
+        if (version) {
+            value += ' ' + version;
+        }
+        return value;
+    }).join(', ');
+}
+
+exports.getCSSDataDocumentation = getCSSDataDocumentation;

package/dist/utils/get-css-data-documentation.d.ts

@@ -0,0 +1,5 @@
+import type { IPropertyData, IValueData, MarkupContent } from 'vscode-css-languageservice';
+export declare function getCSSDataDocumentation(data?: IPropertyData | IValueData, additional?: {
+    generatedCSS?: string;
+    docs?: string | false;
+}): MarkupContent | undefined;

package/dist/utils/get-css-data-documentation.mjs

@@ -0,0 +1,88 @@
+import beautifyCSS from './beautify-css.mjs';
+import { OFFICIAL_URL } from '@master/css';
+
+function getCSSDataDocumentation(data, additional) {
+    const values = [];
+    const references = data?.references ? [
+        ...data.references
+    ] : [];
+    if (data?.status) {
+        values.push(getEntryStatus(data.status));
+    }
+    if (additional?.generatedCSS) {
+        values.push('```css\n' + beautifyCSS(additional.generatedCSS).split('\n').slice(1).join('\n') + '\n```');
+    }
+    if (data?.description) if (typeof data.description === 'string') {
+        values.push(textToMarkedString(data.description));
+    } else {
+        values.push(data.description.kind === 'markdown' ? data.description.value : textToMarkedString(data.description.value));
+    }
+    const browserLabel = getBrowserLabel(data?.browsers);
+    if (browserLabel) {
+        values.push('(' + textToMarkedString(browserLabel) + ')');
+    }
+    if (data && 'syntax' in data && data.syntax) {
+        values.push(`Syntax: ${textToMarkedString(data.syntax)}`);
+    }
+    // todo: can i use
+    if (additional?.docs) {
+        references.unshift({
+            name: 'Master CSS',
+            url: new URL(additional.docs, OFFICIAL_URL).href
+        });
+    }
+    if (references.length) {
+        values.push(references.map((r)=>{
+            return `[${r.name}](${r.url})`;
+        }).join(' | '));
+    }
+    return values?.length ? {
+        kind: 'markdown',
+        value: values.join('\n\n')
+    } : undefined;
+}
+const browserNames = {
+    E: 'Edge',
+    FF: 'Firefox',
+    S: 'Safari',
+    C: 'Chrome',
+    IE: 'IE',
+    O: 'Opera'
+};
+function getEntryStatus(status) {
+    switch(status){
+        case 'experimental':
+            return '⚠️ Property is experimental. Be cautious when using it.️\n\n';
+        case 'nonstandard':
+            return '🚨️ Property is nonstandard. Avoid using it.\n\n';
+        case 'obsolete':
+            return '🚨️️️ Property is obsolete. Avoid using it.\n\n';
+        default:
+            return '';
+    }
+}
+function textToMarkedString(text) {
+    text = text.replace(/[\\`*_{}[\]()#+\-.!]/g, '\\$&') // escape markdown syntax tokens: http://daringfireball.net/projects/markdown/syntax#backslash
+    ;
+    return text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+function getBrowserLabel(browsers = []) {
+    if (browsers.length === 0) {
+        return null;
+    }
+    return browsers.map((b)=>{
+        let value = '';
+        const matches = b.match(/([A-Z]+)(\d+)?/) ?? '';
+        const name = matches[1];
+        const version = matches[2];
+        if (name in browserNames) {
+            value += browserNames[name];
+        }
+        if (version) {
+            value += ' ' + version;
+        }
+        return value;
+    }).join(', ');
+}
+
+export { getCSSDataDocumentation };

package/dist/utils/get-main-completion-items.cjs

@@ -0,0 +1,105 @@
+'use strict';
+
+var vscodeLanguageserverProtocol = require('vscode-languageserver-protocol');
+var css = require('@master/css');
+var getCssDataDocumentation = require('./get-css-data-documentation.cjs');
+var sortCompletionItems = require('./sort-completion-items.cjs');
+var getUtilityInfo = require('./get-utility-info.cjs');
+var cssDataProvider = require('./css-data-provider.cjs');
+
+function getMainCompletionItems(css$1 = new css.MasterCSS()) {
+    const completionItems = [];
+    const addedKeys = new Set();
+    for (const eachDefinedRule of css$1.definedRules){
+        if (eachDefinedRule.definition.type === css.SyntaxRuleType.Utility) {
+            const { data, detail, docs } = getUtilityInfo(eachDefinedRule, css$1);
+            const utilityName = eachDefinedRule.id.slice(1);
+            completionItems.push({
+                label: utilityName,
+                kind: vscodeLanguageserverProtocol.CompletionItemKind.Value,
+                documentation: getCssDataDocumentation.getCSSDataDocumentation(data, {
+                    generatedCSS: css.generateCSS([
+                        utilityName
+                    ], css$1),
+                    docs
+                }),
+                detail
+            });
+        } else {
+            const nativeProperties = cssDataProvider.provideProperties();
+            const nativeCSSPropertyData = nativeProperties.find(({ name })=>name === eachDefinedRule.id);
+            const eachCompletionItem = {
+                kind: vscodeLanguageserverProtocol.CompletionItemKind.Property,
+                documentation: getCssDataDocumentation.getCSSDataDocumentation(nativeCSSPropertyData, {
+                    docs: '/reference/' + css.isCoreRule(eachDefinedRule.id) && eachDefinedRule.id
+                }),
+                detail: nativeCSSPropertyData?.syntax
+            };
+            eachDefinedRule.keys.forEach((key)=>{
+                addedKeys.delete(key);
+                completionItems.push({
+                    ...eachCompletionItem,
+                    label: key + ':',
+                    sortText: key,
+                    command: {
+                        title: 'triggerSuggest',
+                        command: 'editor.action.triggerSuggest'
+                    }
+                });
+            });
+            /**
+             * @example @ animation and ~ transition
+             */ if (eachDefinedRule.definition?.sign && eachDefinedRule.definition.includeAnimations) {
+                for(const animationName in css$1.animations){
+                    completionItems.push({
+                        ...eachCompletionItem,
+                        label: eachDefinedRule.definition.sign + animationName + '|1s',
+                        kind: vscodeLanguageserverProtocol.CompletionItemKind.Value
+                    });
+                }
+            }
+            if (eachDefinedRule.definition?.ambiguousKeys?.length) {
+                for (const ambiguousKey of eachDefinedRule.definition.ambiguousKeys){
+                    if (addedKeys.has(ambiguousKey)) {
+                        continue;
+                    }
+                    addedKeys.add(ambiguousKey);
+                }
+            }
+        }
+    }
+    addedKeys.forEach((ambiguousKey)=>{
+        /**
+         * Ambiguous keys are added to the completion list
+         * @example text: t:
+         */ completionItems.push({
+            kind: vscodeLanguageserverProtocol.CompletionItemKind.Property,
+            detail: 'ambiguous key',
+            label: ambiguousKey + ':',
+            sortText: ambiguousKey,
+            command: {
+                title: 'triggerSuggest',
+                command: 'editor.action.triggerSuggest'
+            }
+        });
+    });
+    if (css$1.config.components) {
+        for(const styleName in css$1.config.components){
+            const styleClasses = css$1.components[styleName];
+            completionItems.push({
+                label: styleName,
+                kind: vscodeLanguageserverProtocol.CompletionItemKind.Value,
+                documentation: getCssDataDocumentation.getCSSDataDocumentation({}, {
+                    generatedCSS: css.generateCSS([
+                        styleName
+                    ], css$1),
+                    docs: '/guide/components'
+                }),
+                detail: styleClasses.join(' ') + ' (style)'
+            });
+        }
+    }
+    return sortCompletionItems(completionItems);
+}
+
+module.exports = getMainCompletionItems;

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

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