@master/css-language-service 2.0.0-rc.26 → 2.0.0-rc.28

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) + '\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(`/docs/${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 EachRule of css$1.Rules){
+        if (EachRule.definition.layer === css.Layer.Utility) {
+            const { data, detail, docs } = getUtilityInfo(EachRule, css$1);
+            const utilityName = EachRule.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 === EachRule.id);
+            const eachCompletionItem = {
+                kind: vscodeLanguageserverProtocol.CompletionItemKind.Property,
+                documentation: getCssDataDocumentation.getCSSDataDocumentation(nativeCSSPropertyData, {
+                    docs: css.isCoreRule(EachRule.id) && EachRule.id
+                }),
+                detail: nativeCSSPropertyData?.syntax
+            };
+            EachRule.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 (EachRule.definition?.sign && EachRule.definition.includeAnimations) {
+                for(const animationName in css$1.animations){
+                    completionItems.push({
+                        ...eachCompletionItem,
+                        label: EachRule.definition.sign + animationName + '|1s',
+                        kind: vscodeLanguageserverProtocol.CompletionItemKind.Value
+                    });
+                }
+            }
+            if (EachRule.definition?.ambiguousKeys?.length) {
+                for (const ambiguousKey of EachRule.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.styles) {
+        for(const styleName in css$1.config.styles){
+            const styleClasses = css$1.styles[styleName];
+            completionItems.push({
+                label: styleName,
+                kind: vscodeLanguageserverProtocol.CompletionItemKind.Value,
+                documentation: getCssDataDocumentation.getCSSDataDocumentation({}, {
+                    generatedCSS: css.generateCSS([
+                        styleName
+                    ], css$1),
+                    docs: 'styles'
+                }),
+                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[];

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

@@ -0,0 +1,103 @@
+import { CompletionItemKind } from 'vscode-languageserver-protocol';
+import { Layer, generateCSS, isCoreRule, MasterCSS } from '@master/css';
+import { getCSSDataDocumentation } from './get-css-data-documentation.mjs';
+import sortCompletionItems from './sort-completion-items.mjs';
+import getUtilityInfo from './get-utility-info.mjs';
+import cssDataProvider from './css-data-provider.mjs';
+
+function getMainCompletionItems(css = new MasterCSS()) {
+    const completionItems = [];
+    const addedKeys = new Set();
+    for (const EachRule of css.Rules){
+        if (EachRule.definition.layer === Layer.Utility) {
+            const { data, detail, docs } = getUtilityInfo(EachRule, css);
+            const utilityName = EachRule.id.slice(1);
+            completionItems.push({
+                label: utilityName,
+                kind: CompletionItemKind.Value,
+                documentation: getCSSDataDocumentation(data, {
+                    generatedCSS: generateCSS([
+                        utilityName
+                    ], css),
+                    docs
+                }),
+                detail
+            });
+        } else {
+            const nativeProperties = cssDataProvider.provideProperties();
+            const nativeCSSPropertyData = nativeProperties.find(({ name })=>name === EachRule.id);
+            const eachCompletionItem = {
+                kind: CompletionItemKind.Property,
+                documentation: getCSSDataDocumentation(nativeCSSPropertyData, {
+                    docs: isCoreRule(EachRule.id) && EachRule.id
+                }),
+                detail: nativeCSSPropertyData?.syntax
+            };
+            EachRule.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 (EachRule.definition?.sign && EachRule.definition.includeAnimations) {
+                for(const animationName in css.animations){
+                    completionItems.push({
+                        ...eachCompletionItem,
+                        label: EachRule.definition.sign + animationName + '|1s',
+                        kind: CompletionItemKind.Value
+                    });
+                }
+            }
+            if (EachRule.definition?.ambiguousKeys?.length) {
+                for (const ambiguousKey of EachRule.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: CompletionItemKind.Property,
+            detail: 'ambiguous key',
+            label: ambiguousKey + ':',
+            sortText: ambiguousKey,
+            command: {
+                title: 'triggerSuggest',
+                command: 'editor.action.triggerSuggest'
+            }
+        });
+    });
+    if (css.config.styles) {
+        for(const styleName in css.config.styles){
+            const styleClasses = css.styles[styleName];
+            completionItems.push({
+                label: styleName,
+                kind: CompletionItemKind.Value,
+                documentation: getCSSDataDocumentation({}, {
+                    generatedCSS: generateCSS([
+                        styleName
+                    ], css),
+                    docs: 'styles'
+                }),
+                detail: styleClasses.join(' ') + ' (style)'
+            });
+        }
+    }
+    return sortCompletionItems(completionItems);
+}
+
+export { getMainCompletionItems as default };

package/dist/utils/get-position.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var vscodeLanguageserverTextdocument = require('vscode-languageserver-textdocument');
+
+function getPosition(searchString, text) {
+    const document = vscodeLanguageserverTextdocument.TextDocument.create('mockuri://test', 'plaintext', 1, text);
+    const offset = text.indexOf(searchString);
+    const position = document.positionAt(offset);
+    return position;
+}
+
+module.exports = getPosition;

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

@@ -0,0 +1,65 @@
+'use strict';
+
+var css = require('@master/css');
+var cssDataProvider = require('./css-data-provider.cjs');
+var vscodeLanguageserverProtocol = require('vscode-languageserver-protocol');
+var sortCompletionItems = require('./sort-completion-items.cjs');
+var getCssDataDocumentation = require('./get-css-data-documentation.cjs');
+
+const kind = vscodeLanguageserverProtocol.CompletionItemKind.Function;
+function getPseudoClassCompletionItems(css$1 = new css.MasterCSS(), syntax) {
+    const pseudoClassDataList = cssDataProvider.providePseudoClasses().filter((data)=>{
+        // exclude @page pseudo-classes
+        if ([
+            ':first',
+            ':left',
+            ':right',
+            ':blank'
+        ].includes(data.name)) return false;
+        return true;
+    });
+    const completionItems = pseudoClassDataList.map((data)=>{
+        // fix https://github.com/microsoft/vscode-custom-data/issues/78
+        const name = /:(?:dir|has|is|nth-col|where)/.test(data.name) ? data.name + '()' : data.name;
+        let sortText = name.startsWith(':-') ? 'yyyy' + name.slice(2) : 'yy' + name.replace(/^:/, '');
+        if (sortText.endsWith('()')) sortText = 'y' + sortText;
+        return {
+            label: name,
+            sortText,
+            documentation: getCssDataDocumentation.getCSSDataDocumentation(data, {
+                generatedCSS: css.generateCSS([
+                    syntax + name.slice(1)
+                ], css$1),
+                docs: 'selectors'
+            }),
+            kind,
+            data
+        };
+    });
+    for(const selectorName in css$1.config.selectors){
+        if (selectorName.startsWith('::')) continue;
+        const selectorValue = css$1.config.selectors[selectorName];
+        const name = selectorName.endsWith('(') ? selectorName + ')' : selectorName;
+        const value = typeof selectorValue === 'string' ? selectorValue.endsWith('(') ? selectorValue + ')' : selectorValue : selectorValue;
+        const data = pseudoClassDataList.find((data)=>typeof value === 'string' ? value.startsWith(data.name) : false);
+        let sortText = name.startsWith(':-') ? 'yyyy' + name.slice(2) : 'yy' + name.replace(/^:/, '');
+        if (sortText.endsWith('()')) sortText = 'y' + sortText;
+        const completionItem = {
+            label: name,
+            documentation: getCssDataDocumentation.getCSSDataDocumentation(data, {
+                generatedCSS: css.generateCSS([
+                    syntax + name.slice(1)
+                ], css$1),
+                docs: 'selectors'
+            }),
+            sortText,
+            kind,
+            detail: String(value),
+            data
+        };
+        completionItems.push(completionItem);
+    }
+    return sortCompletionItems(completionItems);
+}
+
+module.exports = getPseudoClassCompletionItems;

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

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

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

@@ -0,0 +1,63 @@
+import { generateCSS, MasterCSS } from '@master/css';
+import cssDataProvider from './css-data-provider.mjs';
+import { CompletionItemKind } from 'vscode-languageserver-protocol';
+import sortCompletionItems from './sort-completion-items.mjs';
+import { getCSSDataDocumentation } from './get-css-data-documentation.mjs';
+
+const kind = CompletionItemKind.Function;
+function getPseudoClassCompletionItems(css = new MasterCSS(), syntax) {
+    const pseudoClassDataList = cssDataProvider.providePseudoClasses().filter((data)=>{
+        // exclude @page pseudo-classes
+        if ([
+            ':first',
+            ':left',
+            ':right',
+            ':blank'
+        ].includes(data.name)) return false;
+        return true;
+    });
+    const completionItems = pseudoClassDataList.map((data)=>{
+        // fix https://github.com/microsoft/vscode-custom-data/issues/78
+        const name = /:(?:dir|has|is|nth-col|where)/.test(data.name) ? data.name + '()' : data.name;
+        let sortText = name.startsWith(':-') ? 'yyyy' + name.slice(2) : 'yy' + name.replace(/^:/, '');
+        if (sortText.endsWith('()')) sortText = 'y' + sortText;
+        return {
+            label: name,
+            sortText,
+            documentation: getCSSDataDocumentation(data, {
+                generatedCSS: generateCSS([
+                    syntax + name.slice(1)
+                ], css),
+                docs: 'selectors'
+            }),
+            kind,
+            data
+        };
+    });
+    for(const selectorName in css.config.selectors){
+        if (selectorName.startsWith('::')) continue;
+        const selectorValue = css.config.selectors[selectorName];
+        const name = selectorName.endsWith('(') ? selectorName + ')' : selectorName;
+        const value = typeof selectorValue === 'string' ? selectorValue.endsWith('(') ? selectorValue + ')' : selectorValue : selectorValue;
+        const data = pseudoClassDataList.find((data)=>typeof value === 'string' ? value.startsWith(data.name) : false);
+        let sortText = name.startsWith(':-') ? 'yyyy' + name.slice(2) : 'yy' + name.replace(/^:/, '');
+        if (sortText.endsWith('()')) sortText = 'y' + sortText;
+        const completionItem = {
+            label: name,
+            documentation: getCSSDataDocumentation(data, {
+                generatedCSS: generateCSS([
+                    syntax + name.slice(1)
+                ], css),
+                docs: 'selectors'
+            }),
+            sortText,
+            kind,
+            detail: String(value),
+            data
+        };
+        completionItems.push(completionItem);
+    }
+    return sortCompletionItems(completionItems);
+}
+
+export { getPseudoClassCompletionItems as default };

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

@@ -0,0 +1,56 @@
+'use strict';
+
+var css = require('@master/css');
+var cssDataProvider = require('./css-data-provider.cjs');
+var vscodeLanguageserverProtocol = require('vscode-languageserver-protocol');
+var sortCompletionItems = require('./sort-completion-items.cjs');
+var getCssDataDocumentation = require('./get-css-data-documentation.cjs');
+
+const kind = vscodeLanguageserverProtocol.CompletionItemKind.Function;
+function getPseudoElementCompletionItems(css$1 = new css.MasterCSS(), syntax) {
+    const pseudoElementDataList = cssDataProvider.providePseudoElements();
+    const completionItems = pseudoElementDataList.map((data)=>{
+        // fix https://github.com/microsoft/vscode-custom-data/issues/78
+        const name = /::(?:part|slotted)/.test(data.name) ? data.name + '()' : data.name;
+        let sortText = name.startsWith('::-') ? 'zzzz' + name.slice(3) : 'zz' + name.replace(/^::/, '');
+        if (sortText.endsWith('()')) sortText = 'z' + sortText;
+        return {
+            label: name,
+            sortText,
+            documentation: getCssDataDocumentation.getCSSDataDocumentation(data, {
+                generatedCSS: css.generateCSS([
+                    syntax + name.slice(2)
+                ], css$1),
+                docs: 'selectors'
+            }),
+            kind,
+            data
+        };
+    });
+    for(const selectorName in css$1.config.selectors){
+        if (!selectorName.startsWith('::')) continue;
+        const selectorValue = css$1.config.selectors[selectorName];
+        const name = selectorName.endsWith('(') ? selectorName + ')' : selectorName;
+        const value = typeof selectorValue === 'string' ? selectorValue.endsWith('(') ? selectorValue + ')' : selectorValue : selectorValue;
+        const data = pseudoElementDataList.find((data)=>typeof value === 'string' ? value.startsWith(data.name) : false);
+        let sortText = name.startsWith('::-') ? 'zzzz' + name.slice(3) : 'zz' + name.replace(/^::/, '');
+        if (sortText.endsWith('()')) sortText = 'z' + sortText;
+        const completionItem = {
+            label: name,
+            documentation: getCssDataDocumentation.getCSSDataDocumentation(data, {
+                generatedCSS: css.generateCSS([
+                    syntax + name.slice(2)
+                ], css$1),
+                docs: 'selectors'
+            }),
+            sortText,
+            kind,
+            detail: String(value),
+            data
+        };
+        completionItems.push(completionItem);
+    }
+    return sortCompletionItems(completionItems);
+}
+
+module.exports = getPseudoElementCompletionItems;

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

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

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

@@ -0,0 +1,54 @@
+import { generateCSS, MasterCSS } from '@master/css';
+import cssDataProvider from './css-data-provider.mjs';
+import { CompletionItemKind } from 'vscode-languageserver-protocol';
+import sortCompletionItems from './sort-completion-items.mjs';
+import { getCSSDataDocumentation } from './get-css-data-documentation.mjs';
+
+const kind = CompletionItemKind.Function;
+function getPseudoElementCompletionItems(css = new MasterCSS(), syntax) {
+    const pseudoElementDataList = cssDataProvider.providePseudoElements();
+    const completionItems = pseudoElementDataList.map((data)=>{
+        // fix https://github.com/microsoft/vscode-custom-data/issues/78
+        const name = /::(?:part|slotted)/.test(data.name) ? data.name + '()' : data.name;
+        let sortText = name.startsWith('::-') ? 'zzzz' + name.slice(3) : 'zz' + name.replace(/^::/, '');
+        if (sortText.endsWith('()')) sortText = 'z' + sortText;
+        return {
+            label: name,
+            sortText,
+            documentation: getCSSDataDocumentation(data, {
+                generatedCSS: generateCSS([
+                    syntax + name.slice(2)
+                ], css),
+                docs: 'selectors'
+            }),
+            kind,
+            data
+        };
+    });
+    for(const selectorName in css.config.selectors){
+        if (!selectorName.startsWith('::')) continue;
+        const selectorValue = css.config.selectors[selectorName];
+        const name = selectorName.endsWith('(') ? selectorName + ')' : selectorName;
+        const value = typeof selectorValue === 'string' ? selectorValue.endsWith('(') ? selectorValue + ')' : selectorValue : selectorValue;
+        const data = pseudoElementDataList.find((data)=>typeof value === 'string' ? value.startsWith(data.name) : false);
+        let sortText = name.startsWith('::-') ? 'zzzz' + name.slice(3) : 'zz' + name.replace(/^::/, '');
+        if (sortText.endsWith('()')) sortText = 'z' + sortText;
+        const completionItem = {
+            label: name,
+            documentation: getCSSDataDocumentation(data, {
+                generatedCSS: generateCSS([
+                    syntax + name.slice(2)
+                ], css),
+                docs: 'selectors'
+            }),
+            sortText,
+            kind,
+            detail: String(value),
+            data
+        };
+        completionItems.push(completionItem);
+    }
+    return sortCompletionItems(completionItems);
+}
+
+export { getPseudoElementCompletionItems as default };