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

package/dist/features/suggest-syntax.mjs

@@ -1,13 +1,13 @@
 import querySyntaxCompletions from '../utils/query-syntax-completions.mjs';
 
-function suggestSyntax(document, position, context) {
+function suggestSyntax(document, position, context, completionIndex) {
     const classPosition = this.getClassPosition(document, position);
     if (classPosition !== undefined) {
         const q = context?.triggerCharacter === ' ' ? '' : document.getText({
             start: document.positionAt(classPosition.range.start),
             end: position
         });
-        return querySyntaxCompletions(q, this.css);
+        return querySyntaxCompletions(q, this.css, completionIndex);
     }
 // todo
 // else if (isInstance === true && checkConfigColorsBlock(document, position) === true) {

package/dist/index.mjs

@@ -1,7 +1,7 @@
 export { default as CSSLanguageService, default } from './core.mjs';
 export { default as settings } from './settings.mjs';
-export { AT_TRIGGER_CHARACTER, DECLARATION_SEPARATOR_TRIGGER_CHARACTER, GROUP_TRIGGER_CHARACTER, INVOKED_TRIGGER_CHARACTERS, QUERY_TRIGGER_CHARACTERS, SELECTOR_TRIGGER_CHARACTERS, SERVER_CAPABILITIES, VALUE_TRIGGER_CHARACTERS } from './common.mjs';
 export { default as inspectSyntax } from './features/inspect-syntax.mjs';
 export { default as renderSyntaxColors } from './features/render-syntax-colors.mjs';
 export { default as editSyntaxColors } from './features/edit-syntax-colors.mjs';
 export { default as suggestSyntax } from './features/suggest-syntax.mjs';
+export { AT_TRIGGER_CHARACTER, DECLARATION_SEPARATOR_TRIGGER_CHARACTER, GROUP_TRIGGER_CHARACTER, INVOKED_TRIGGER_CHARACTERS, QUERY_TRIGGER_CHARACTERS, SELECTOR_TRIGGER_CHARACTERS, VALUE_TRIGGER_CHARACTERS } from '@master/css-language';

package/dist/settings.d.ts

@@ -1,17 +1,14 @@
-import { Config } from '@master/css';
+import { type LanguageSettings } from '@master/css-language';
+import type { MasterCSSManifest } from '@master/css';
 /**
  * @example styles https://regex101.com/r/HLPdsw/1
  **/
 declare const settings: Settings;
 export default settings;
-export declare interface Settings {
+export declare interface Settings extends LanguageSettings {
     includedLanguages?: string[];
-    classAttributes?: string[];
-    classFunctions?: string[];
-    classDeclarations?: string[];
-    classAttributeBindings?: Record<string, [string, string] | false>;
     exclude?: string[];
-    config?: Config;
+    manifest?: MasterCSSManifest;
     suggestSyntax?: boolean;
     inspectSyntax?: boolean;
     renderSyntaxColors?: boolean;

package/dist/settings.mjs

@@ -1,4 +1,4 @@
-import { CLASS_FUNCTIONS, CLASS_DECLARATIONS, CLASS_ATTRIBUTES } from '@master/css';
+import { languageSettings } from '@master/css-language';
 
 /**
  * @example styles https://regex101.com/r/HLPdsw/1
@@ -10,6 +10,9 @@ import { CLASS_FUNCTIONS, CLASS_DECLARATIONS, CLASS_ATTRIBUTES } from '@master/c
         "typescript",
         "javascriptreact",
         "typescriptreact",
+        "css",
+        "scss",
+        "less",
         "vue",
         "svelte",
         "rust",
@@ -21,53 +24,20 @@ import { CLASS_FUNCTIONS, CLASS_DECLARATIONS, CLASS_ATTRIBUTES } from '@master/c
     /**
      * @example <div class="a b">
      * @example <div className="a b">
-     */ classAttributes: CLASS_ATTRIBUTES,
+     */ classAttributes: languageSettings.classAttributes,
     /**
      * @example <div class={active ? 'a' : 'b'}>
      * @example <div className={active ? 'a' : 'b'}>
-     */ classAttributeBindings: {
-        "className": [
-            "{",
-            "}"
-        ],
-        "class": [
-            "{",
-            "}"
-        ],
-        "class:list": [
-            "{",
-            "}"
-        ],
-        ":class": [
-            "\"",
-            "\""
-        ],
-        "v-bind:class": [
-            "\"",
-            "\""
-        ],
-        "[class]": [
-            "\"",
-            "\""
-        ],
-        "[className]": [
-            "\"",
-            "\""
-        ],
-        "[ngClass]": [
-            "\"",
-            "\""
-        ]
-    },
+     */ classAttributeBindings: languageSettings.classAttributeBindings,
     /**
-     * @example const components = 'a b'
-     * @example { components: { btn: 'a b' } }
-     */ classDeclarations: CLASS_DECLARATIONS,
+     * @example const classes = 'a b'
+     * @example { classes: { btn: 'a b' } }
+     */ classDeclarations: languageSettings.classDeclarations,
     /**
      * @example clsx('a b')
      * @example styled`a b`
      * @example .classList.add('a')
-     */ classFunctions: CLASS_FUNCTIONS,
+     */ classFunctions: languageSettings.classFunctions,
     exclude: [
         "**/.git/**",
         "**/node_modules/**",
@@ -76,7 +46,8 @@ import { CLASS_FUNCTIONS, CLASS_DECLARATIONS, CLASS_ATTRIBUTES } from '@master/c
     suggestSyntax: true,
     inspectSyntax: true,
     renderSyntaxColors: true,
-    editSyntaxColors: true
+    editSyntaxColors: true,
+    embeddedSyntaxHighlighting: 'active'
 };
 
 export { settings as default };

package/dist/utils/beautify-css.mjs

@@ -1,4 +1,4 @@
-import { css_beautify } from 'js-beautify/js/lib/beautify-css';
+import { css_beautify } from 'js-beautify/js/lib/beautify-css.js';
 
 // @ts-expect-error
 function beautifyCSS(text) {

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

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

package/dist/utils/completion-index.mjs

@@ -0,0 +1,268 @@
+import { CompletionItemKind } from 'vscode-languageserver-protocol';
+import { builtinNativeValueNamespaces, builtinKeyAliases } from '@master/css-engine';
+import { UtilityType, getMdnPseudoElementNames, getMdnPseudoClassNames, createDefaultCSS } from '@master/css-language';
+import getUtilityInfo from './get-utility-info.mjs';
+import sortCompletionItems from './sort-completion-items.mjs';
+
+const ANIMATION_REFERENCE_PROPERTIES = new Set([
+    'animation',
+    'animation-name'
+]);
+function utilityMayReferenceAnimations(utility) {
+    const emit = utility.emit;
+    switch(emit.type){
+        case 'declarations':
+            return emit.declarations.some((property)=>ANIMATION_REFERENCE_PROPERTIES.has(property));
+        case 'property':
+            return ANIMATION_REFERENCE_PROPERTIES.has(emit.property);
+        case 'template':
+            return Object.keys(emit.declarations).some((property)=>ANIMATION_REFERENCE_PROPERTIES.has(property));
+        case 'static':
+            return emit.rules.some((rule)=>Object.keys(rule.declarations).some((property)=>ANIMATION_REFERENCE_PROPERTIES.has(property)));
+        default:
+            return false;
+    }
+}
+function isPureNativePropertyUtility(utility) {
+    return utility.emit.type === 'property' && utility.id === utility.emit.property && utility.name === utility.emit.property;
+}
+function addMapValue(map, key, value) {
+    const values = map.get(key);
+    if (values) {
+        values.push(value);
+    } else {
+        map.set(key, [
+            value
+        ]);
+    }
+}
+function collectClassEntries(css) {
+    const completionItems = [];
+    const addedKeys = new Set();
+    const addedCompletionLabels = new Set();
+    const propertyCompletionItem = {
+        kind: CompletionItemKind.Property,
+        command: {
+            title: 'triggerSuggest',
+            command: 'editor.action.triggerSuggest'
+        }
+    };
+    const addPropertyCompletionItem = (key, detail)=>{
+        const label = key + ':';
+        if (addedCompletionLabels.has(label)) return;
+        addedCompletionLabels.add(label);
+        completionItems.push({
+            ...propertyCompletionItem,
+            ...detail ? {
+                detail
+            } : {},
+            label,
+            sortText: key
+        });
+    };
+    const addSemanticCompletionItem = (label, detail)=>{
+        if (addedCompletionLabels.has(label)) return;
+        addedCompletionLabels.add(label);
+        completionItems.push({
+            label,
+            kind: CompletionItemKind.Value,
+            documentationClassName: label,
+            ...detail ? {
+                detail
+            } : {}
+        });
+    };
+    for (const eachDefinedUtility of css.definedUtilities){
+        if (eachDefinedUtility.type === UtilityType.Semantic) {
+            const isComponent = eachDefinedUtility.layer === 'components';
+            const { detail } = getUtilityInfo(eachDefinedUtility);
+            for (const matcher of eachDefinedUtility.matchers){
+                if (matcher.type === 'static') {
+                    addSemanticCompletionItem(matcher.name, isComponent ? 'component' : detail);
+                } else if (matcher.type === 'pattern') {
+                    for (const value of matcher.values){
+                        addSemanticCompletionItem(matcher.prefix + value, isComponent ? 'component' : undefined);
+                    }
+                }
+            }
+        } else {
+            for (const matcher of eachDefinedUtility.matchers){
+                if (matcher.type !== 'pattern') continue;
+                for (const value of matcher.values){
+                    addSemanticCompletionItem(matcher.prefix + value);
+                }
+            }
+            eachDefinedUtility.keys?.forEach((key)=>{
+                addedKeys.delete(key);
+                addPropertyCompletionItem(key);
+            });
+            if (eachDefinedUtility.aliasGroups?.length) {
+                for (const aliasGroup of eachDefinedUtility.aliasGroups){
+                    if (addedKeys.has(aliasGroup)) {
+                        continue;
+                    }
+                    addedKeys.add(aliasGroup);
+                }
+            }
+        }
+    }
+    for (const [key, canonicalKey] of Object.entries(builtinKeyAliases)){
+        addPropertyCompletionItem(key, canonicalKey);
+    }
+    for (const namespace of builtinNativeValueNamespaces){
+        for (const property of namespace.properties){
+            addPropertyCompletionItem(property);
+        }
+    }
+    addedKeys.forEach((aliasGroup)=>{
+        /**
+         * Ambiguous keys are added to the completion list
+         * @example text: t:
+         */ if (addedCompletionLabels.has(aliasGroup + ':')) return;
+        completionItems.push({
+            ...propertyCompletionItem,
+            detail: 'ambiguous key',
+            label: aliasGroup + ':',
+            sortText: aliasGroup
+        });
+    });
+    return sortCompletionItems(completionItems);
+}
+function createPseudoClassSelectors(css) {
+    const selectors = new Map([
+        [
+            ':of',
+            ':of'
+        ]
+    ]);
+    for (const [token, branches] of css.variants){
+        const selector = branches.find((branch)=>branch.selector)?.selector;
+        if (selector && token.startsWith(':') && !token.startsWith('::')) {
+            selectors.set(token, selector);
+        }
+    }
+    return Array.from(selectors, ([token, selector])=>({
+            token,
+            selector
+        }));
+}
+function createPseudoElementSelectors(css) {
+    const selectors = [];
+    for (const [token, branches] of css.variants){
+        const selector = branches.find((branch)=>branch.selector)?.selector;
+        if (selector && token.startsWith('::')) {
+            selectors.push({
+                token,
+                selector
+            });
+        }
+    }
+    return selectors;
+}
+function createNativeVariableNamespacesByProperty() {
+    const namespacesByProperty = new Map();
+    for (const namespace of builtinNativeValueNamespaces){
+        const variableNamespaces = (namespace.variableAliasRefs || []).map((ref)=>ref[0] === '=' || ref[0] === '~' ? ref.slice(1) : '').filter(Boolean);
+        if (!variableNamespaces.length) continue;
+        for (const property of namespace.properties){
+            const namespaces = namespacesByProperty.get(property);
+            if (namespaces) {
+                namespaces.push(...variableNamespaces);
+            } else {
+                namespacesByProperty.set(property, [
+                    ...variableNamespaces
+                ]);
+            }
+        }
+    }
+    return namespacesByProperty;
+}
+function createCompletionIndex(css = createDefaultCSS()) {
+    const componentNames = [];
+    const utilityNames = [];
+    const nativeUtilityKeys = new Map();
+    const scopedVariablesByKey = new Map();
+    const patternValuesByKey = new Map();
+    const animationUtilitiesByKey = new Map();
+    for (const utility of css.definedUtilities){
+        const staticNames = utility.type === UtilityType.Semantic ? utilityNames : undefined;
+        for (const matcher of utility.matchers){
+            if (matcher.type === 'static') {
+                staticNames?.push(matcher.name);
+                if (utility.type === UtilityType.Semantic && utility.layer === 'components') {
+                    componentNames.push(matcher.name);
+                }
+            } else if (matcher.type === 'pattern') {
+                const patternNames = matcher.values.map((value)=>matcher.prefix + value);
+                utilityNames.push(...patternNames);
+                if (utility.type === UtilityType.Semantic && utility.layer === 'components') {
+                    componentNames.push(...patternNames);
+                }
+                if (matcher.prefix.endsWith(':')) {
+                    const key = matcher.prefix.slice(0, -1);
+                    for (const value of matcher.values){
+                        addMapValue(patternValuesByKey, key, {
+                            value
+                        });
+                    }
+                }
+            }
+        }
+        for (const key of utility.keys || []){
+            if (!nativeUtilityKeys.has(key)) {
+                nativeUtilityKeys.set(key, utility.emit.type === 'property' ? utility.emit.property : utility.id);
+            }
+        }
+        if (utility.variables?.size) {
+            const keys = new Set([
+                utility.key,
+                utility.subkey,
+                ...utility.keys || [],
+                ...utility.aliasGroups || []
+            ].filter((key)=>Boolean(key)));
+            for (const key of keys){
+                utility.variables.forEach((variable, name)=>{
+                    addMapValue(scopedVariablesByKey, key, {
+                        name,
+                        variable
+                    });
+                });
+            }
+        }
+        if (utility.keys?.length && utilityMayReferenceAnimations(utility)) {
+            const detailPrefix = isPureNativePropertyUtility(utility) ? utility.id : undefined;
+            for (const key of utility.keys){
+                addMapValue(animationUtilitiesByKey, key, {
+                    detailPrefix
+                });
+            }
+        }
+    }
+    return {
+        classEntries: collectClassEntries(css),
+        componentNames,
+        utilityNames,
+        nativeUtilityKeys,
+        scopedVariablesByKey,
+        patternValuesByKey,
+        animationUtilitiesByKey,
+        nativeVariableNamespacesByProperty: createNativeVariableNamespacesByProperty(),
+        variables: Array.from(css.variables.values()),
+        pseudoClassNames: getMdnPseudoClassNames(),
+        pseudoClassSelectors: createPseudoClassSelectors(css),
+        pseudoElementNames: getMdnPseudoElementNames(),
+        pseudoElementSelectors: createPseudoElementSelectors(css),
+        atRules: Array.from(css.atRules.entries())
+    };
+}
+function matchesIndexedName(field, name) {
+    if (!field.startsWith(name)) return false;
+    const nextCharacter = field.charAt(name.length);
+    if (nextCharacter === '_') return true;
+    const lastCharacter = name.charAt(name.length - 1);
+    const lastIsWord = /\w/.test(lastCharacter);
+    const nextIsWord = /\w/.test(nextCharacter);
+    return lastIsWord !== nextIsWord;
+}
+
+export { createCompletionIndex, matchesIndexedName };

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

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

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

@@ -8,7 +8,7 @@ function convertColorByToken(color, colorToken, css) {
             outputSpace = valueComponent.name;
             break;
         case 'variable':
-            outputSpace = valueComponent.variable?.space;
+            outputSpace = String(valueComponent.variable?.value || '').match(/^([a-zA-Z][\w-]*)\(/)?.[1] || outputSpace;
             break;
         case 'string':
             outputSpace = 'srgb';

package/dist/utils/create-css-markdown-documentation.d.ts

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

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

@@ -0,0 +1,15 @@
+import beautifyCSS from './beautify-css.mjs';
+
+function createCSSMarkdownDocumentation(css) {
+    if (!css) return;
+    const cssLines = beautifyCSS(css).split('\n');
+    if (cssLines[0] === '') {
+        cssLines.shift();
+    }
+    return {
+        kind: 'markdown',
+        value: '```css\n' + cssLines.join('\n') + '\n```'
+    };
+}
+
+export { createCSSMarkdownDocumentation as default };

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

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

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

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

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

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

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

@@ -1,21 +1,18 @@
-import { createCSS } from '@master/css';
+import { createDefaultCSS } from '@master/css-language';
 import { CompletionItemKind } from 'vscode-languageserver-protocol';
 import sortCompletionItems from './sort-completion-items.mjs';
 
-function getColorCompletionItems(css = createCSS()) {
+function getColorCompletionItems(css = createDefaultCSS()) {
     const completionItems = [];
     css.variables.forEach((eachVariable, eachVariableName)=>{
-        if (eachVariable.type === 'color') {
-            // todo: packages/core should support getTextByVariable(variable)
-            const valueToken = eachVariable.space && eachVariable.value ? `${eachVariable.space}(${eachVariable.value})` : eachVariable.value;
+        if (eachVariable.namespace?.startsWith('color')) {
+            const valueToken = eachVariable.value ?? eachVariable.name;
             completionItems.push({
                 label: eachVariableName,
                 // detail is shown in the detail pane
-                // todo: eachVariable.token should be recorded as original config variable
-                detail: valueToken,
+                detail: String(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,
+                documentation: String(valueToken),
                 kind: CompletionItemKind.Color,
                 sortText: eachVariableName.replace(/(.+?)-(\d+)/, (match, prefix, num)=>prefix + '-' + ('00000' + num).slice(-5))
             });

package/dist/utils/get-pseudo-class-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 getPseudoClassCompletionItems(css: MasterCSS | undefined, syntax: string): CompletionItem[];
+import { type CompletionIndex } from './completion-index';
+export default function getPseudoClassCompletionItems(css: MasterCSS | undefined, syntax: string, completionIndex?: CompletionIndex): CompletionItem[];

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

@@ -1,61 +1,64 @@
-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 getPseudoClassCompletionItems(css = createCSS(), 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;
+const functionalPseudoClassNames = new Set([
+    ':current',
+    ':dir',
+    ':has',
+    ':has-slotted',
+    ':host',
+    ':host-context',
+    ':is',
+    ':lang',
+    ':local-link',
+    ':not',
+    ':nth',
+    ':nth-child',
+    ':nth-col',
+    ':nth-last',
+    ':nth-last-child',
+    ':nth-last-col',
+    ':nth-last-of-type',
+    ':nth-of-type',
+    ':of',
+    ':state',
+    ':where'
+]);
+function normalizeFunctionalPseudoClass(name) {
+    return functionalPseudoClassNames.has(name) ? name + '()' : name;
+}
+function getPseudoClassCompletionItems(css = createDefaultCSS(), syntax, completionIndex = createCompletionIndex(css)) {
+    const completionItems = completionIndex.pseudoClassNames.map((pseudoClassName)=>{
+        const name = normalizeFunctionalPseudoClass(pseudoClassName);
         let sortText = name.startsWith(':-') ? 'yyyy' + name.slice(2) : 'yy' + name.replace(/^:/, '');
         if (sortText.endsWith('()')) sortText = 'y' + sortText;
         return {
             label: name,
             sortText,
-            documentation: getCSSDataDocumentation(data, {
-                generatedCSS: generateCSS([
-                    syntax + name.slice(1)
-                ], css),
-                docs: '/guide/selectors'
-            }),
-            kind,
-            data
+            documentation: createCSSMarkdownDocumentation(generateCSS([
+                syntax + name.slice(1)
+            ], css)),
+            kind
         };
     });
-    const selectors = {
-        ...css.config.selectors,
-        ':of': ':of'
-    };
-    for(const name in selectors){
+    for (const { token: name, selector } of completionIndex.pseudoClassSelectors){
         if (name.startsWith('::')) continue;
-        const value = selectors[name];
-        const data = pseudoClassDataList.find((data)=>value.startsWith(data.name));
-        let sortText = name.startsWith(':-') ? 'yyyy' + name.slice(2) : 'yy' + name.replace(/^:/, '');
+        const value = selector.replace(/&/g, '');
+        const label = normalizeFunctionalPseudoClass(name);
+        let sortText = label.startsWith(':-') ? 'yyyy' + label.slice(2) : 'yy' + label.replace(/^:/, '');
         if (sortText.endsWith('()')) sortText = 'y' + sortText;
         const completionItem = {
-            label: name,
-            documentation: getCSSDataDocumentation(data, {
-                generatedCSS: generateCSS([
-                    syntax + name.slice(1)
-                ], css),
-                docs: '/guide/selectors'
-            }),
+            label,
+            documentation: createCSSMarkdownDocumentation(generateCSS([
+                syntax + label.slice(1)
+            ], css)),
             sortText,
             kind,
-            detail: String(value),
-            data
+            detail: String(value)
         };
         completionItems.push(completionItem);
     }