@master/css-language-service 2.0.0-rc.25 → 2.0.0-rc.27

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

@@ -0,0 +1,102 @@
+'use strict';
+
+var css = require('@master/css');
+var vscodeLanguageserverProtocol = require('vscode-languageserver-protocol');
+var sortCompletionItems = require('./sort-completion-items.cjs');
+var getCssDataDocumentation = require('./get-css-data-documentation.cjs');
+var cssDataProvider = require('./css-data-provider.cjs');
+
+function getQueryCompletionItems(css$1 = new css.MasterCSS(), triggerCharacter = css.AT_SIGN, syntax) {
+    const atDataList = cssDataProvider.provideAtDirectives();
+    const completionItems = [];
+    if (!css.QUERY_COMPARISON_OPERATORS.includes(triggerCharacter)) {
+        completionItems.push({
+            label: triggerCharacter + 'media()',
+            filterText: 'media()',
+            insertText: 'media()',
+            sortText: 'media()',
+            documentation: getCssDataDocumentation.getCSSDataDocumentation(atDataList.find(({ name })=>name === '@media'), {
+                generatedCSS: css.generateCSS([
+                    syntax + 'media()'
+                ], css$1),
+                docs: 'queries'
+            })
+        }, {
+            label: triggerCharacter + 'supports()',
+            filterText: 'supports()',
+            insertText: 'supports()',
+            sortText: 'supports()',
+            documentation: getCssDataDocumentation.getCSSDataDocumentation(atDataList.find(({ name })=>name === '@supports'), {
+                generatedCSS: css.generateCSS([
+                    syntax + 'supports()'
+                ], css$1),
+                docs: 'queries'
+            })
+        });
+    }
+    Object.entries(css$1.queries).forEach(([name, value])=>{
+        const completionItem = {
+            filterText: name,
+            insertText: name,
+            documentation: getCssDataDocumentation.getCSSDataDocumentation(undefined, {
+                generatedCSS: css.generateCSS([
+                    syntax + name
+                ], css$1),
+                docs: 'queries'
+            })
+        };
+        if ([
+            css.AT_SIGN,
+            ...css.QUERY_LOGICAL_OPERATORS
+        ].includes(triggerCharacter)) {
+            if (typeof value === 'number') {
+                completionItems.push({
+                    ...completionItem,
+                    label: triggerCharacter + name,
+                    sortText: String(value).padStart(8, '0'),
+                    filterText: name,
+                    insertText: name,
+                    documentation: getCssDataDocumentation.getCSSDataDocumentation(undefined, {
+                        generatedCSS: css.generateCSS([
+                            syntax + name
+                        ], css$1),
+                        docs: 'queries'
+                    }),
+                    detail: `screen width ${'>='} ${value}px`,
+                    kind: vscodeLanguageserverProtocol.CompletionItemKind.Keyword
+                });
+            } else {
+                completionItems.push({
+                    ...completionItem,
+                    label: triggerCharacter + name,
+                    detail: value,
+                    sortText: name,
+                    kind: vscodeLanguageserverProtocol.CompletionItemKind.Keyword
+                });
+            }
+        } else if (css.QUERY_COMPARISON_OPERATORS.includes(triggerCharacter)) {
+            if (typeof value === 'number') {
+                const prevComparisonCharacter = syntax.charAt(syntax.length - 2);
+                const comparisonCharacter = prevComparisonCharacter === '>' || prevComparisonCharacter === '<' ? prevComparisonCharacter + triggerCharacter : triggerCharacter;
+                completionItems.push({
+                    ...completionItem,
+                    label: comparisonCharacter + name,
+                    sortText: comparisonCharacter + String(value).padStart(8, '0'),
+                    filterText: name,
+                    insertText: name,
+                    documentation: getCssDataDocumentation.getCSSDataDocumentation(undefined, {
+                        generatedCSS: css.generateCSS([
+                            syntax + name
+                        ], css$1),
+                        docs: 'queries'
+                    }),
+                    detail: `screen width ${comparisonCharacter} ${value}px`,
+                    kind: vscodeLanguageserverProtocol.CompletionItemKind.Keyword
+                });
+            }
+        }
+    });
+    return sortCompletionItems(completionItems);
+}
+
+module.exports = getQueryCompletionItems;

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

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

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

@@ -0,0 +1,100 @@
+import { QUERY_COMPARISON_OPERATORS, generateCSS, AT_SIGN, QUERY_LOGICAL_OPERATORS, MasterCSS } from '@master/css';
+import { CompletionItemKind } from 'vscode-languageserver-protocol';
+import sortCompletionItems from './sort-completion-items.mjs';
+import { getCSSDataDocumentation } from './get-css-data-documentation.mjs';
+import cssDataProvider from './css-data-provider.mjs';
+
+function getQueryCompletionItems(css = new MasterCSS(), triggerCharacter = AT_SIGN, syntax) {
+    const atDataList = cssDataProvider.provideAtDirectives();
+    const completionItems = [];
+    if (!QUERY_COMPARISON_OPERATORS.includes(triggerCharacter)) {
+        completionItems.push({
+            label: triggerCharacter + 'media()',
+            filterText: 'media()',
+            insertText: 'media()',
+            sortText: 'media()',
+            documentation: getCSSDataDocumentation(atDataList.find(({ name })=>name === '@media'), {
+                generatedCSS: generateCSS([
+                    syntax + 'media()'
+                ], css),
+                docs: 'queries'
+            })
+        }, {
+            label: triggerCharacter + 'supports()',
+            filterText: 'supports()',
+            insertText: 'supports()',
+            sortText: 'supports()',
+            documentation: getCSSDataDocumentation(atDataList.find(({ name })=>name === '@supports'), {
+                generatedCSS: generateCSS([
+                    syntax + 'supports()'
+                ], css),
+                docs: 'queries'
+            })
+        });
+    }
+    Object.entries(css.queries).forEach(([name, value])=>{
+        const completionItem = {
+            filterText: name,
+            insertText: name,
+            documentation: getCSSDataDocumentation(undefined, {
+                generatedCSS: generateCSS([
+                    syntax + name
+                ], css),
+                docs: 'queries'
+            })
+        };
+        if ([
+            AT_SIGN,
+            ...QUERY_LOGICAL_OPERATORS
+        ].includes(triggerCharacter)) {
+            if (typeof value === 'number') {
+                completionItems.push({
+                    ...completionItem,
+                    label: triggerCharacter + name,
+                    sortText: String(value).padStart(8, '0'),
+                    filterText: name,
+                    insertText: name,
+                    documentation: getCSSDataDocumentation(undefined, {
+                        generatedCSS: generateCSS([
+                            syntax + name
+                        ], css),
+                        docs: 'queries'
+                    }),
+                    detail: `screen width ${'>='} ${value}px`,
+                    kind: CompletionItemKind.Keyword
+                });
+            } else {
+                completionItems.push({
+                    ...completionItem,
+                    label: triggerCharacter + name,
+                    detail: value,
+                    sortText: name,
+                    kind: CompletionItemKind.Keyword
+                });
+            }
+        } else if (QUERY_COMPARISON_OPERATORS.includes(triggerCharacter)) {
+            if (typeof value === 'number') {
+                const prevComparisonCharacter = syntax.charAt(syntax.length - 2);
+                const comparisonCharacter = prevComparisonCharacter === '>' || prevComparisonCharacter === '<' ? prevComparisonCharacter + triggerCharacter : triggerCharacter;
+                completionItems.push({
+                    ...completionItem,
+                    label: comparisonCharacter + name,
+                    sortText: comparisonCharacter + String(value).padStart(8, '0'),
+                    filterText: name,
+                    insertText: name,
+                    documentation: getCSSDataDocumentation(undefined, {
+                        generatedCSS: generateCSS([
+                            syntax + name
+                        ], css),
+                        docs: 'queries'
+                    }),
+                    detail: `screen width ${comparisonCharacter} ${value}px`,
+                    kind: CompletionItemKind.Keyword
+                });
+            }
+        }
+    });
+    return sortCompletionItems(completionItems);
+}
+
+export { getQueryCompletionItems as default };

package/dist/utils/get-range.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+// todo: unstable range calculation
+function getRange(searchString, doc) {
+    const text = doc.getText();
+    const regex = new RegExp(`(\\b(?:className|class)\\s?=\\s?(['"\`]))(.*?)\\2`, 'g');
+    const classAttMatch = regex.exec(text);
+    if (classAttMatch) {
+        const attrIndex = classAttMatch.index + classAttMatch[1].length;
+        const className = classAttMatch[3];
+        const index = className.indexOf(searchString);
+        return {
+            start: doc.positionAt(attrIndex + index),
+            end: doc.positionAt(attrIndex + index + searchString.length)
+        };
+    } else {
+        throw new Error(`Cannot find ${searchString} in ${text}`);
+    }
+}
+
+module.exports = getRange;

package/dist/utils/get-range.d.ts

@@ -0,0 +1,2 @@
+import { TextDocument, Range } from 'vscode-languageserver-textdocument';
+export default function getRange(searchString: string, doc: TextDocument): Range;

package/dist/utils/get-range.mjs

@@ -0,0 +1,19 @@
+// todo: unstable range calculation
+function getRange(searchString, doc) {
+    const text = doc.getText();
+    const regex = new RegExp(`(\\b(?:className|class)\\s?=\\s?(['"\`]))(.*?)\\2`, 'g');
+    const classAttMatch = regex.exec(text);
+    if (classAttMatch) {
+        const attrIndex = classAttMatch.index + classAttMatch[1].length;
+        const className = classAttMatch[3];
+        const index = className.indexOf(searchString);
+        return {
+            start: doc.positionAt(attrIndex + index),
+            end: doc.positionAt(attrIndex + index + searchString.length)
+        };
+    } else {
+        throw new Error(`Cannot find ${searchString} in ${text}`);
+    }
+}
+
+export { getRange as default };

package/dist/utils/get-utility-info.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var cssDataProvider = require('./css-data-provider.cjs');
+
+function getUtilityInfo(EachRule, css = new MasterCSS()) {
+    const nativeProperties = cssDataProvider.provideProperties();
+    const declarations = EachRule.definition.declarations;
+    const propsLength = Object.keys(declarations || {}).length;
+    const propName = Object.keys(declarations || {})[0];
+    const propValue = declarations?.[propName];
+    let data;
+    let detail;
+    /**
+     * Remaps to native CSS properties when only one property is declared
+     * */ if (propsLength === 1) {
+        const nativeCSSPropertyData = nativeProperties.find(({ name })=>name === propName);
+        data = nativeCSSPropertyData?.values?.find(({ name })=>name === propValue || name.replace(/^-(ms|moz)-/, '') === propValue);
+        if (data) {
+            detail = `${propName}: ${propValue}`;
+        } else {
+            data = nativeCSSPropertyData;
+            detail = nativeCSSPropertyData?.syntax;
+        }
+    }
+    return {
+        docs: data ? propName : 'utilities',
+        data,
+        detail
+    };
+}
+
+module.exports = getUtilityInfo;

package/dist/utils/get-utility-info.d.ts

@@ -0,0 +1,7 @@
+import { RegisteredRule } from '@master/css';
+import type { IPropertyData } from 'vscode-css-languageservice';
+export default function getUtilityInfo(EachRule: RegisteredRule, css?: import("@master/css").MasterCSS): {
+    docs: string;
+    data: IPropertyData | undefined;
+    detail: string | undefined;
+};

package/dist/utils/get-utility-info.mjs

@@ -0,0 +1,30 @@
+import cssDataProvider from './css-data-provider.mjs';
+
+function getUtilityInfo(EachRule, css = new MasterCSS()) {
+    const nativeProperties = cssDataProvider.provideProperties();
+    const declarations = EachRule.definition.declarations;
+    const propsLength = Object.keys(declarations || {}).length;
+    const propName = Object.keys(declarations || {})[0];
+    const propValue = declarations?.[propName];
+    let data;
+    let detail;
+    /**
+     * Remaps to native CSS properties when only one property is declared
+     * */ if (propsLength === 1) {
+        const nativeCSSPropertyData = nativeProperties.find(({ name })=>name === propName);
+        data = nativeCSSPropertyData?.values?.find(({ name })=>name === propValue || name.replace(/^-(ms|moz)-/, '') === propValue);
+        if (data) {
+            detail = `${propName}: ${propValue}`;
+        } else {
+            data = nativeCSSPropertyData;
+            detail = nativeCSSPropertyData?.syntax;
+        }
+    }
+    return {
+        docs: data ? propName : 'utilities',
+        data,
+        detail
+    };
+}
+
+export { getUtilityInfo as default };

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

@@ -0,0 +1,185 @@
+'use strict';
+
+var vscodeLanguageserverProtocol = require('vscode-languageserver-protocol');
+var cssDataProvider = require('./css-data-provider.cjs');
+var css = require('@master/css');
+var getCssDataDocumentation = require('./get-css-data-documentation.cjs');
+var sortCompletionItems = require('./sort-completion-items.cjs');
+
+const SCOPED_VARIABLE_PRIORITY = 'aaaa';
+const AMBIGUOUS_PRIORITY = 'bbbb';
+const NATIVE_PRIORITY = 'ccccc';
+const GLOBAL_VARIABLE_PRIORITY = 'zzzz';
+function getValueCompletionItems(css$1 = new css.MasterCSS(), ruleKey) {
+    const nativeProperties = cssDataProvider.provideProperties();
+    const completionItems = [];
+    const nativeKey = css$1.Rules.find(({ keys })=>keys.includes(ruleKey))?.id;
+    const nativePropertyData = nativeProperties.find(({ name })=>name === nativeKey);
+    const generateVariableCompletionItem = (variable, { scoped } = {
+        scoped: false
+    })=>{
+        const eachNativePropertyData = nativeProperties.find((x)=>x.name === variable.group) || nativePropertyData;
+        const appliedValue = scoped ? variable.key : variable.name;
+        const documentation = getCssDataDocumentation.getCSSDataDocumentation(eachNativePropertyData, {
+            generatedCSS: css.generateCSS([
+                ruleKey + ':' + appliedValue
+            ], css$1),
+            docs: eachNativePropertyData?.name || 'variables'
+        });
+        const completionItem = {
+            label: variable.name,
+            kind: vscodeLanguageserverProtocol.CompletionItemKind.Value
+        };
+        const conflicted = completionItems.find(({ label })=>label === variable.name);
+        if (conflicted) {
+            completionItem.label = '$(' + completionItem.label + ')';
+            completionItem.documentation = getCssDataDocumentation.getCSSDataDocumentation(eachNativePropertyData, {
+                generatedCSS: css.generateCSS([
+                    ruleKey + ':' + completionItem.label
+                ], css$1),
+                docs: eachNativePropertyData?.name || 'variables'
+            });
+        } else {
+            completionItem.documentation = getCssDataDocumentation.getCSSDataDocumentation(eachNativePropertyData, {
+                generatedCSS: css.generateCSS([
+                    ruleKey + ':' + appliedValue
+                ], css$1),
+                docs: eachNativePropertyData?.name || 'variables'
+            });
+        }
+        if (variable.type === 'color') {
+            if (Object.keys(variable.modes || {}).length) {
+                completionItem.kind = vscodeLanguageserverProtocol.CompletionItemKind.Color;
+                completionItem.detail = variable.name;
+            } else {
+                // todo: packages/css should support getTextByVariable(variable)
+                const configKey = 'variables.' + (variable.group ? variable.group + '.' + variable.key : variable.name);
+                const valueToken = variable.space && variable.value ? `${variable.space}(${variable.value.split(' ').join(',')})` : variable.value;
+                // detail is shown in the detail pane
+                // todo: variable.token should be recorded as original config variable
+                completionItem.detail = String(configKey);
+                completionItem.documentation = {
+                    kind: 'markdown',
+                    value: valueToken + '\n\n' + documentation?.value
+                };
+                completionItem.kind = vscodeLanguageserverProtocol.CompletionItemKind.Color;
+                completionItem.sortText = 'color-' + variable.name.replace(/(.+?)-(\d+)/, (match, prefix, num)=>prefix + num.padStart(10, '0'));
+            }
+        } else if (variable.type === 'number') {
+            if (variable.name.startsWith('-') && eachNativePropertyData?.syntax?.includes('absolute')) return;
+            completionItem.detail = String(variable.name);
+            completionItem.sortText = (variable.group || '') + (variable.value >= 0 ? String(variable.value).padStart(10, '0') : '-' + String(Math.abs(variable.value)).padStart(10, '0'));
+        } else {
+            completionItem.detail = String(variable.value || variable.name);
+        }
+        return completionItem;
+    };
+    for (const EachRule of css$1.Rules){
+        /**
+         * Scoped variables
+         * @example box: + content -> box-sizing:content
+         */ if (EachRule.definition.key === ruleKey || EachRule.definition.subkey === ruleKey || EachRule.definition.ambiguousKeys?.includes(ruleKey)) {
+            for(const variableName in EachRule.variables){
+                if (completionItems.find(({ label })=>label === variableName)) continue;
+                const variable = EachRule.variables[variableName];
+                const completionItem = generateVariableCompletionItem(variable, {
+                    scoped: true
+                });
+                if (completionItem) {
+                    completionItem.label = variableName;
+                    completionItem.sortText = SCOPED_VARIABLE_PRIORITY + variableName;
+                    completionItem.detail = '(scope) ' + completionItem.detail;
+                    completionItems.push(completionItem);
+                }
+            }
+        }
+        /**
+         * @example animation:fade
+         */ if (EachRule.keys.includes(ruleKey) && EachRule.definition.includeAnimations) {
+            for(const animationName in css$1.animations){
+                const isNative = EachRule.definition.layer && [
+                    css.Layer.Native,
+                    css.Layer.NativeShorthand
+                ].includes(EachRule.definition.layer);
+                completionItems.push({
+                    label: animationName,
+                    kind: vscodeLanguageserverProtocol.CompletionItemKind.Value,
+                    documentation: getCssDataDocumentation.getCSSDataDocumentation(undefined, {
+                        generatedCSS: css.generateCSS([
+                            ruleKey + ':' + animationName
+                        ], css$1),
+                        docs: css.isCoreRule(EachRule.id) && EachRule.id
+                    }),
+                    detail: isNative ? EachRule.id + ': ' + animationName : animationName
+                });
+            }
+        }
+        /**
+         * Ambiguous values
+         * @example text: -> center, left, right, justify
+         * @example t: -> center, left, right, justify
+         */ if (EachRule.definition.ambiguousKeys?.includes(ruleKey) && EachRule.definition.ambiguousValues?.length) {
+            const nativePropertyData = nativeProperties.find((x)=>x.name === EachRule.id);
+            for (const ambiguousValue of EachRule.definition.ambiguousValues){
+                if (typeof ambiguousValue !== 'string') continue;
+                const nativeValueData = nativePropertyData?.values?.find((x)=>x.name === ambiguousValue);
+                const isNative = EachRule.definition.layer && [
+                    css.Layer.Native,
+                    css.Layer.NativeShorthand
+                ].includes(EachRule.definition.layer);
+                completionItems.push({
+                    label: ambiguousValue,
+                    kind: vscodeLanguageserverProtocol.CompletionItemKind.Value,
+                    sortText: AMBIGUOUS_PRIORITY + ambiguousValue,
+                    documentation: getCssDataDocumentation.getCSSDataDocumentation({
+                        ...nativeValueData || {},
+                        // use nativePropertyData.reference because nativeValueData does not have references
+                        references: nativePropertyData?.references
+                    }, {
+                        generatedCSS: css.generateCSS([
+                            ruleKey + ':' + ambiguousValue
+                        ], css$1),
+                        docs: css.isCoreRule(EachRule.id) && EachRule.id
+                    }),
+                    detail: isNative ? EachRule.id + ': ' + ambiguousValue : ambiguousValue
+                });
+            }
+        }
+    }
+    /**
+     * Native values
+     */ if (nativeKey) {
+        nativePropertyData?.values?.forEach((value)=>{
+            if (completionItems.find((x)=>x.label === value.name) || nativePropertyData.name === 'font' && typeof +value.name === 'number' || value.name.includes(' ')) return;
+            completionItems.push({
+                label: value.name,
+                kind: vscodeLanguageserverProtocol.CompletionItemKind.Value,
+                sortText: NATIVE_PRIORITY + (value.name.startsWith('-') ? 'zz' + value.name.slice(1) : value.name),
+                documentation: getCssDataDocumentation.getCSSDataDocumentation({
+                    ...value,
+                    // use nativePropertyData.reference because nativeValueData does not have references
+                    references: nativePropertyData?.references
+                }, {
+                    generatedCSS: css.generateCSS([
+                        ruleKey + ':' + value.name
+                    ], css$1),
+                    docs: nativeKey
+                }),
+                detail: nativeKey + ': ' + value.name
+            });
+        });
+    }
+    // global variables
+    for(const variableName in css$1.variables){
+        const variable = css$1.variables[variableName];
+        const completionItem = generateVariableCompletionItem(variable);
+        if (completionItem) {
+            completionItem.sortText = GLOBAL_VARIABLE_PRIORITY + (completionItem.sortText || completionItem.label);
+            completionItem.detail = '(global) ' + completionItem.detail;
+            completionItems.push(completionItem);
+        }
+    }
+    return sortCompletionItems(completionItems);
+}
+
+module.exports = getValueCompletionItems;

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

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