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

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

@@ -1,3 +1,4 @@
-import { MasterCSS } from '@master/css';
+import { MasterCSS } from '@master/css-language';
 import { type CompletionItem } from 'vscode-languageserver-protocol';
-export default function getPseudoElementCompletionItems(css: MasterCSS | undefined, syntax: string): CompletionItem[];
+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

@@ -1,50 +1,39 @@
-import { createCSS, generateCSS } from '@master/css';
-import cssDataProvider from './css-data-provider.mjs';
+import { generateCSS, createDefaultCSS } from '@master/css-language';
 import { CompletionItemKind } from 'vscode-languageserver-protocol';
 import sortCompletionItems from './sort-completion-items.mjs';
-import { getCSSDataDocumentation } from './get-css-data-documentation.mjs';
+import createCSSMarkdownDocumentation from './create-css-markdown-documentation.mjs';
+import { createCompletionIndex } from './completion-index.mjs';
 
 const kind = CompletionItemKind.Function;
-function getPseudoElementCompletionItems(css = createCSS(), 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;
+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: getCSSDataDocumentation(data, {
-                generatedCSS: generateCSS([
-                    syntax + name.slice(2)
-                ], css),
-                docs: '/guide/selectors'
-            }),
-            kind,
-            data
+            documentation: createCSSMarkdownDocumentation(generateCSS([
+                syntax + name.slice(2)
+            ], css)),
+            kind
         };
     });
-    for(const selectorName in css.config.selectors){
-        if (!selectorName.startsWith('::')) continue;
-        const selectorValue = css.config.selectors[selectorName];
+    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;
-        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: '/guide/selectors'
-            }),
+            documentation: createCSSMarkdownDocumentation(generateCSS([
+                syntax + name.slice(2)
+            ], css)),
             sortText,
             kind,
-            detail: String(value),
-            data
+            detail: String(value)
         };
         completionItems.push(completionItem);
     }

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

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

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

@@ -1,11 +1,10 @@
-import { createCSS, AT_SIGN, QUERY_COMPARISON_OPERATORS, generateCSS, QUERY_LOGICAL_OPERATORS, generateAt, parseAt, getSingleAtNumberRuleNode } from '@master/css';
+import { AT_SIGN, QUERY_COMPARISON_OPERATORS, generateCSS, QUERY_LOGICAL_OPERATORS, generateAt, parseAt, createDefaultCSS, getSingleAtNumberRuleNode } from '@master/css-language';
 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';
+import createCSSMarkdownDocumentation from './create-css-markdown-documentation.mjs';
+import { createCompletionIndex } from './completion-index.mjs';
 
-function getQueryCompletionItems(css = createCSS(), triggerCharacter = AT_SIGN, syntax) {
-    const atDataList = cssDataProvider.provideAtDirectives();
+function getQueryCompletionItems(css = createDefaultCSS(), triggerCharacter = AT_SIGN, syntax, completionIndex = createCompletionIndex(css)) {
     const completionItems = [];
     if (!QUERY_COMPARISON_OPERATORS.includes(triggerCharacter)) {
         [
@@ -18,12 +17,9 @@ function getQueryCompletionItems(css = createCSS(), triggerCharacter = AT_SIGN,
                 filterText: name + '()',
                 insertText: name + '()',
                 sortText: name + '()',
-                documentation: getCSSDataDocumentation(atDataList.find(({ name })=>name === '@' + name), {
-                    generatedCSS: generateCSS([
-                        syntax + name + '()'
-                    ], css),
-                    docs: '/guide/at'
-                })
+                documentation: createCSSMarkdownDocumentation(generateCSS([
+                    syntax + name + '()'
+                ], css))
             });
         });
     }
@@ -40,32 +36,26 @@ function getQueryCompletionItems(css = createCSS(), triggerCharacter = AT_SIGN,
                 insertText: token,
                 detail: text,
                 kind: CompletionItemKind.Keyword,
-                documentation: getCSSDataDocumentation(undefined, {
-                    generatedCSS: generateCSS([
-                        syntax + token
-                    ], css),
-                    docs: '/guide/at'
-                })
+                documentation: createCSSMarkdownDocumentation(generateCSS([
+                    syntax + token
+                ], css))
             });
             return true;
         }
     };
-    css.atRules.forEach((atRule, token)=>{
+    for (const [token, atRule] of completionIndex.atRules){
         const completionItem = {
             filterText: token,
             insertText: token,
-            documentation: getCSSDataDocumentation(undefined, {
-                generatedCSS: generateCSS([
-                    syntax + token
-                ], css),
-                docs: '/guide/at'
-            })
+            documentation: createCSSMarkdownDocumentation(generateCSS([
+                syntax + token
+            ], css))
         };
         if ([
             AT_SIGN,
             ...QUERY_LOGICAL_OPERATORS
         ].includes(triggerCharacter)) {
-            if (handleNumberNodes(atRule, token)) return;
+            if (handleNumberNodes(atRule, token)) continue;
             const text = generateAt(parseAt(triggerCharacter + token, css));
             completionItems.push({
                 ...completionItem,
@@ -73,17 +63,14 @@ function getQueryCompletionItems(css = createCSS(), triggerCharacter = AT_SIGN,
                 detail: text,
                 sortText: CompletionItemKind.Keyword + token,
                 kind: CompletionItemKind.Keyword,
-                documentation: getCSSDataDocumentation(undefined, {
-                    generatedCSS: generateCSS([
-                        syntax + token
-                    ], css),
-                    docs: '/guide/at'
-                })
+                documentation: createCSSMarkdownDocumentation(generateCSS([
+                    syntax + token
+                ], css))
             });
         } else if (QUERY_COMPARISON_OPERATORS.includes(triggerCharacter)) {
             handleNumberNodes(atRule, token);
         }
-    });
+    }
     return sortCompletionItems(completionItems);
 }
 

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

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

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

@@ -1,29 +1,17 @@
-import { createCSS } from '@master/css';
-import cssDataProvider from './css-data-provider.mjs';
+import { getStaticUtilityDeclarations } from '@master/css-language';
 
-function getUtilityInfo(syntax, css = createCSS()) {
-    const nativeProperties = cssDataProvider.provideProperties();
-    const declarations = syntax.definition.declarations;
+function getUtilityInfo(utility) {
+    const declarations = getStaticUtilityDeclarations(utility);
     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;
-        }
+        detail = `${propName}: ${propValue}`;
     }
     return {
-        docs: '/reference/' + (data ? propName : 'utilities'),
-        data,
         detail
     };
 }

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

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

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

@@ -1,58 +1,78 @@
 import { CompletionItemKind } from 'vscode-languageserver-protocol';
-import cssDataProvider from './css-data-provider.mjs';
-import { createCSS, SyntaxRuleType, isCoreRule, generateCSS } from '@master/css';
-import { getCSSDataDocumentation } from './get-css-data-documentation.mjs';
+import { getMdnPropertySyntax, getMdnPropertyValueNames, generateCSS, createDefaultCSS } from '@master/css-language';
+import { builtinKeyAliases } from '@master/css-engine';
+import createCSSMarkdownDocumentation from './create-css-markdown-documentation.mjs';
 import sortCompletionItems from './sort-completion-items.mjs';
+import { createCompletionIndex } from './completion-index.mjs';
 
 const SCOPED_VARIABLE_PRIORITY = 'aaaa';
-const AMBIGUOUS_PRIORITY = 'bbbb';
 const NATIVE_PRIORITY = 'ccccc';
 const GLOBAL_VARIABLE_PRIORITY = 'zzzz';
-function getValueCompletionItems(css = createCSS(), ruleKey) {
-    const nativeProperties = cssDataProvider.provideProperties();
+const ANIMATION_REFERENCE_PROPERTIES = new Set([
+    'animation',
+    'animation-name'
+]);
+function getNumericSortValue(variable, rootSize) {
+    if (variable.numeric) {
+        switch(variable.numeric.unit){
+            case 'rem':
+                return variable.numeric.value * rootSize;
+            case undefined:
+            case '':
+            case 'px':
+                return variable.numeric.value;
+        }
+    }
+    return typeof variable.value === 'number' ? variable.value : 0;
+}
+function getVariableKeyByNamespace(variableName, namespace) {
+    const negative = variableName.startsWith('-');
+    const positiveName = negative ? variableName.slice(1) : variableName;
+    if (positiveName !== namespace && !positiveName.startsWith(namespace + '-')) return;
+    const key = positiveName === namespace ? '' : positiveName.slice(namespace.length + 1);
+    return negative ? '-' + key : key;
+}
+function getValueCompletionItems(css = createDefaultCSS(), ruleKey, valuePrefix = '', completionIndex = createCompletionIndex(css)) {
     const completionItems = [];
-    const nativeKey = css.definedRules.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(eachNativePropertyData, {
-            generatedCSS: generateCSS([
-                ruleKey + ':' + appliedValue
-            ], css),
-            docs: '/reference/' + (eachNativePropertyData?.name || 'variables')
-        });
+    const addedLabels = new Set();
+    const canonicalRuleKey = builtinKeyAliases[ruleKey] || ruleKey;
+    const nativeUtilityKey = completionIndex.nativeUtilityKeys.get(canonicalRuleKey);
+    const nativeKey = nativeUtilityKey || (getMdnPropertySyntax(canonicalRuleKey) ? canonicalRuleKey : undefined);
+    const nativePropertyValues = getMdnPropertyValueNames(nativeKey);
+    const pushCompletionItem = (completionItem)=>{
+        completionItems.push(completionItem);
+        addedLabels.add(completionItem.label);
+    };
+    const generateVariableCompletionItem = (variable, { appliedValue, label, negative, scoped } = {})=>{
+        const nativePropertySyntax = getMdnPropertySyntax(variable.namespace) || getMdnPropertySyntax(nativeKey);
+        if (variable.type === 'number' && variable.name.startsWith('-') && nativePropertySyntax?.includes('absolute')) return;
+        const valueToken = appliedValue ?? (scoped ? variable.key : variable.name);
+        const documentation = createCSSMarkdownDocumentation(generateCSS([
+            ruleKey + ':' + valueToken
+        ], css));
+        const completionItemLabel = label ?? variable.name;
+        const conflicted = addedLabels.has(completionItemLabel);
         const completionItem = {
-            label: variable.name,
+            label: conflicted ? 'var(--' + completionItemLabel + ')' : completionItemLabel,
             kind: CompletionItemKind.Value
         };
-        const conflicted = completionItems.find(({ label })=>label === variable.name);
         if (conflicted) {
-            completionItem.label = '$(' + completionItem.label + ')';
-            completionItem.documentation = getCSSDataDocumentation(eachNativePropertyData, {
-                generatedCSS: generateCSS([
-                    ruleKey + ':' + completionItem.label
-                ], css),
-                docs: '/reference/' + (eachNativePropertyData?.name || 'variables')
-            });
+            completionItem.documentation = createCSSMarkdownDocumentation(generateCSS([
+                ruleKey + ':' + completionItem.label
+            ], css));
         } else {
-            completionItem.documentation = getCSSDataDocumentation(eachNativePropertyData, {
-                generatedCSS: generateCSS([
-                    ruleKey + ':' + appliedValue
-                ], css),
-                docs: '/reference/' + (eachNativePropertyData?.name || 'variables')
-            });
+            completionItem.documentation = createCSSMarkdownDocumentation(generateCSS([
+                ruleKey + ':' + valueToken
+            ], css));
         }
-        if (variable.type === 'color') {
+        if (variable.namespace?.startsWith('color')) {
             if (Object.keys(variable.modes || {}).length) {
                 completionItem.kind = CompletionItemKind.Color;
                 completionItem.detail = variable.name;
             } else {
                 // todo: packages/core 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;
+                const configKey = 'variables.' + (variable.namespace ? variable.namespace + '.' + variable.key : variable.name);
+                const valueToken = variable.value ?? variable.name;
                 // detail is shown in the detail pane
                 // todo: variable.token should be recorded as original config variable
                 completionItem.detail = String(configKey);
@@ -64,115 +84,117 @@ function getValueCompletionItems(css = createCSS(), ruleKey) {
                 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'));
+            const value = getNumericSortValue(variable, css.settings.rootSize);
+            const sortValue = negative ? -Math.abs(value) : value;
+            completionItem.sortText = (variable.namespace || '') + (sortValue >= 0 ? String(sortValue).padStart(10, '0') : '-' + String(Math.abs(sortValue)).padStart(10, '0'));
         } else {
             completionItem.detail = String(variable.value || variable.name);
         }
         return completionItem;
     };
-    for (const eachDefinedRule of css.definedRules){
-        /**
-         * Scoped variables
-         * @example box: + content -> box-sizing:content
-         */ if (eachDefinedRule.definition.key === ruleKey || eachDefinedRule.definition.subkey === ruleKey || eachDefinedRule.definition.aliasGroups?.includes(ruleKey)) {
-            eachDefinedRule.variables?.forEach((variable, variableName)=>{
-                if (completionItems.find(({ label })=>label === variableName)) return;
-                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);
-                }
-            });
+    const addScopedVariableCompletionItem = (variable, variableName)=>{
+        if (addedLabels.has(variableName)) return;
+        const completionItem = generateVariableCompletionItem(variable, {
+            scoped: true
+        });
+        if (completionItem) {
+            completionItem.label = variableName;
+            completionItem.sortText = SCOPED_VARIABLE_PRIORITY + (completionItem.sortText || variableName);
+            completionItem.detail = '(scope) ' + completionItem.detail;
+            pushCompletionItem(completionItem);
         }
-        /**
-         * @example animation:fade
-         */ if (eachDefinedRule.keys.includes(ruleKey) && eachDefinedRule.definition.includeAnimations) {
-            css.animations.forEach((_, animationName)=>{
-                const isNative = eachDefinedRule.definition.type && [
-                    SyntaxRuleType.Native,
-                    SyntaxRuleType.NativeShorthand
-                ].includes(eachDefinedRule.definition.type);
-                completionItems.push({
-                    label: animationName,
-                    kind: CompletionItemKind.Value,
-                    documentation: getCSSDataDocumentation(undefined, {
-                        generatedCSS: generateCSS([
-                            ruleKey + ':' + animationName
-                        ], css),
-                        docs: '/reference/' + isCoreRule(eachDefinedRule.id) && eachDefinedRule.id
-                    }),
-                    detail: isNative ? eachDefinedRule.id + ': ' + animationName : animationName
-                });
+        const negativeVariableName = '-' + variableName;
+        if (valuePrefix.startsWith('-') && variableName[0] !== '-' && variable.type === 'number' && !addedLabels.has(negativeVariableName)) {
+            const negativeCompletionItem = generateVariableCompletionItem(variable, {
+                appliedValue: negativeVariableName,
+                label: negativeVariableName,
+                negative: true,
+                scoped: true
             });
-        }
-        /**
-         * Ambiguous values
-         * @example text: -> center, left, right, justify
-         * @example t: -> center, left, right, justify
-         */ if (eachDefinedRule.definition.aliasGroups?.includes(ruleKey) && eachDefinedRule.definition.values?.length) {
-            const nativePropertyData = nativeProperties.find((x)=>x.name === eachDefinedRule.id);
-            for (const value of eachDefinedRule.definition.values){
-                if (typeof value !== 'string') continue;
-                const nativeValueData = nativePropertyData?.values?.find((x)=>x.name === value);
-                const isNative = eachDefinedRule.definition.type && [
-                    SyntaxRuleType.Native,
-                    SyntaxRuleType.NativeShorthand
-                ].includes(eachDefinedRule.definition.type);
-                completionItems.push({
-                    label: value,
-                    kind: CompletionItemKind.Value,
-                    sortText: AMBIGUOUS_PRIORITY + value,
-                    documentation: getCSSDataDocumentation({
-                        ...nativeValueData || {},
-                        // use nativePropertyData.reference because nativeValueData does not have references
-                        references: nativePropertyData?.references
-                    }, {
-                        generatedCSS: generateCSS([
-                            ruleKey + ':' + value
-                        ], css),
-                        docs: '/reference/' + isCoreRule(eachDefinedRule.id) && eachDefinedRule.id
-                    }),
-                    detail: isNative ? eachDefinedRule.id + ': ' + value : value
-                });
+            if (negativeCompletionItem) {
+                negativeCompletionItem.sortText = SCOPED_VARIABLE_PRIORITY + (negativeCompletionItem.sortText || negativeVariableName);
+                negativeCompletionItem.detail = '(scope) ' + negativeCompletionItem.detail;
+                pushCompletionItem(negativeCompletionItem);
             }
         }
+    };
+    /**
+     * Scoped variables
+     * @example box: + content -> box-sizing:content
+     */ for (const { name, variable } of completionIndex.scopedVariablesByKey.get(canonicalRuleKey) || []){
+        addScopedVariableCompletionItem(variable, name);
+    }
+    for (const { value } of completionIndex.patternValuesByKey.get(canonicalRuleKey) || []){
+        if (addedLabels.has(value)) continue;
+        pushCompletionItem({
+            label: value,
+            kind: CompletionItemKind.Value,
+            documentation: createCSSMarkdownDocumentation(generateCSS([
+                ruleKey + ':' + value
+            ], css)),
+            detail: canonicalRuleKey + ': ' + value
+        });
+    }
+    /**
+     * @example animation:fade|fast animate:fade animation-name:fade
+     */ for (const animationUtility of completionIndex.animationUtilitiesByKey.get(canonicalRuleKey) || []){
+        css.animations.forEach((_, animationName)=>{
+            pushCompletionItem({
+                label: animationName,
+                kind: CompletionItemKind.Value,
+                documentation: createCSSMarkdownDocumentation(generateCSS([
+                    ruleKey + ':' + animationName
+                ], css)),
+                detail: animationUtility.detailPrefix ? animationUtility.detailPrefix + ': ' + animationName : animationName
+            });
+        });
+    }
+    if (ANIMATION_REFERENCE_PROPERTIES.has(canonicalRuleKey)) {
+        css.animations.forEach((_, animationName)=>{
+            if (addedLabels.has(animationName)) return;
+            pushCompletionItem({
+                label: animationName,
+                kind: CompletionItemKind.Value,
+                documentation: createCSSMarkdownDocumentation(generateCSS([
+                    ruleKey + ':' + animationName
+                ], css)),
+                detail: canonicalRuleKey + ': ' + animationName
+            });
+        });
+    }
+    const usedKeys = new Set();
+    for (const variableNamespace of completionIndex.nativeVariableNamespacesByProperty.get(canonicalRuleKey) || []){
+        for (const variable of completionIndex.variables){
+            const variableName = getVariableKeyByNamespace(variable.name, variableNamespace);
+            if (variableName === undefined || usedKeys.has(variableName)) continue;
+            usedKeys.add(variableName);
+            addScopedVariableCompletionItem(variable, variableName);
+        }
     }
     /**
      * 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,
+        nativePropertyValues.forEach((value)=>{
+            if (addedLabels.has(value) || nativeKey === 'font' && typeof +value === 'number' || value.includes(' ')) return;
+            pushCompletionItem({
+                label: value,
                 kind: CompletionItemKind.Value,
-                sortText: NATIVE_PRIORITY + (value.name.startsWith('-') ? 'zz' + value.name.slice(1) : value.name),
-                documentation: getCSSDataDocumentation({
-                    ...value,
-                    // use nativePropertyData.reference because nativeValueData does not have references
-                    references: nativePropertyData?.references
-                }, {
-                    generatedCSS: generateCSS([
-                        ruleKey + ':' + value.name
-                    ], css),
-                    docs: '/reference/' + nativeKey
-                }),
-                detail: nativeKey + ': ' + value.name
+                sortText: NATIVE_PRIORITY + (value.startsWith('-') ? 'zz' + value.slice(1) : value),
+                documentation: createCSSMarkdownDocumentation(generateCSS([
+                    ruleKey + ':' + value
+                ], css)),
+                detail: nativeKey + ': ' + value
             });
         });
     }
     // global variables
-    css.variables.forEach((variable)=>{
+    completionIndex.variables.forEach((variable)=>{
         const completionItem = generateVariableCompletionItem(variable);
         if (completionItem) {
             completionItem.sortText = GLOBAL_VARIABLE_PRIORITY + (completionItem.sortText || completionItem.label);
             completionItem.detail = '(global) ' + completionItem.detail;
-            completionItems.push(completionItem);
+            pushCompletionItem(completionItem);
         }
     });
     return sortCompletionItems(completionItems);

package/dist/utils/query-syntax-completions.d.ts

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