@master/css-language-service 2.0.0-rc.73 → 2.0.0-rc.74

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

@@ -1,40 +1,43 @@
-import { type CompletionItem } from 'vscode-languageserver-protocol';
-import { type AtRule, type CSSLanguageRuntime, type MasterCSS } from '@master/css-language';
-import type { Variable } from '@master/css-language';
-export interface ClassCompletionEntry extends CompletionItem {
-    documentationClassName?: string;
+import { AtRule, CSSLanguageRuntime, MasterCSS, Variable } from "@master/css-language";
+import { CompletionItem } from "vscode-languageserver-protocol";
+
+//#region src/utils/completion-index.d.ts
+interface ClassCompletionEntry extends CompletionItem {
+  documentationClassName?: string;
 }
-export interface PatternValueCandidate {
-    value: string;
+interface PatternValueCandidate {
+  value: string;
 }
-export interface ScopedVariableCandidate {
-    name: string;
-    variable: Variable;
+interface ScopedVariableCandidate {
+  name: string;
+  variable: Variable;
 }
-export interface AnimationUtilityCandidate {
-    detailPrefix?: string;
+interface AnimationUtilityCandidate {
+  detailPrefix?: string;
 }
-export interface SelectorVariantCandidate {
-    token: string;
-    selector: string;
+interface SelectorVariantCandidate {
+  token: string;
+  selector: string;
 }
-export interface CompletionIndex {
-    runtime: CSSLanguageRuntime;
-    keyAliases: CSSLanguageRuntime['builtinKeyAliases'];
-    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][];
+interface CompletionIndex {
+  runtime: CSSLanguageRuntime;
+  keyAliases: CSSLanguageRuntime['builtinKeyAliases'];
+  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, runtime?: CSSLanguageRuntime): CompletionIndex;
-export declare function matchesIndexedName(field: string, name: string): boolean;
+declare function createCompletionIndex(css?: MasterCSS, runtime?: CSSLanguageRuntime): CompletionIndex;
+declare function matchesIndexedName(field: string, name: string): boolean;
+//#endregion
+export { AnimationUtilityCandidate, ClassCompletionEntry, CompletionIndex, PatternValueCandidate, ScopedVariableCandidate, SelectorVariantCandidate, createCompletionIndex, matchesIndexedName };

package/dist/utils/completion-index.js

@@ -0,0 +1,196 @@
+import sortCompletionItems from "./sort-completion-items.js";
+import getUtilityInfo from "./get-utility-info.js";
+import { createDefaultCSS, defaultCSSLanguageRuntime, getMdnPseudoClassNames, getMdnPseudoElementNames } from "@master/css-language";
+import { CompletionItemKind } from "vscode-languageserver-protocol";
+//#region src/utils/completion-index.ts
+const ANIMATION_REFERENCE_PROPERTIES = /* @__PURE__ */ 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, runtime) {
+	const completionItems = [];
+	const addedKeys = /* @__PURE__ */ new Set();
+	const addedCompletionLabels = /* @__PURE__ */ 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 === runtime.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" : void 0);
+	} 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(runtime.builtinKeyAliases)) addPropertyCompletionItem(key, canonicalKey);
+	for (const namespace of runtime.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 = /* @__PURE__ */ 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(runtime) {
+	const namespacesByProperty = /* @__PURE__ */ new Map();
+	for (const namespace of runtime.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(), runtime = defaultCSSLanguageRuntime) {
+	const componentNames = [];
+	const utilityNames = [];
+	const nativeUtilityKeys = /* @__PURE__ */ new Map();
+	const scopedVariablesByKey = /* @__PURE__ */ new Map();
+	const patternValuesByKey = /* @__PURE__ */ new Map();
+	const animationUtilitiesByKey = /* @__PURE__ */ new Map();
+	for (const utility of css.definedUtilities) {
+		const staticNames = utility.type === runtime.UtilityType.Semantic ? utilityNames : void 0;
+		for (const matcher of utility.matchers) if (matcher.type === "static") {
+			staticNames?.push(matcher.name);
+			if (utility.type === runtime.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 === runtime.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 : void 0;
+			for (const key of utility.keys) addMapValue(animationUtilitiesByKey, key, { detailPrefix });
+		}
+	}
+	return {
+		runtime,
+		keyAliases: runtime.builtinKeyAliases,
+		classEntries: collectClassEntries(css, runtime),
+		componentNames,
+		utilityNames,
+		nativeUtilityKeys,
+		scopedVariablesByKey,
+		patternValuesByKey,
+		animationUtilitiesByKey,
+		nativeVariableNamespacesByProperty: createNativeVariableNamespacesByProperty(runtime),
+		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);
+	return /\w/.test(lastCharacter) !== /\w/.test(nextCharacter);
+}
+//#endregion
+export { createCompletionIndex, matchesIndexedName };

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

@@ -1,4 +1,8 @@
-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;
+import { MasterCSS } from "@master/css-language";
+import { ColorPresentationParams } from "vscode-languageserver-protocol";
+
+//#region src/utils/convert-color-token.d.ts
+declare function convertColorByToken(color: ColorPresentationParams['color'], colorToken: string, css: MasterCSS): string | undefined;
+declare function normalizeCSSColorFunctionName(fn: string): string;
+//#endregion
+export { convertColorByToken as default, normalizeCSSColorFunctionName };

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

@@ -0,0 +1,47 @@
+import Color from "colorjs.io";
+//#region src/utils/convert-color-token.ts
+function convertColorByToken(color, colorToken, css) {
+	const valueComponent = css.generate("color:" + colorToken)[0]?.valueComponents[0];
+	let outputSpace = "srgb";
+	switch (valueComponent?.type) {
+		case "function":
+			outputSpace = valueComponent.name;
+			break;
+		case "variable":
+			outputSpace = String(valueComponent.variable?.value || "").match(/^([a-zA-Z][\w-]*)\(/)?.[1] || outputSpace;
+			break;
+		case "string":
+			outputSpace = "srgb";
+			break;
+	}
+	outputSpace = normalizeCSSColorFunctionName(outputSpace);
+	if (!outputSpace) return;
+	return new Color({
+		space: "srgb",
+		coords: [
+			color.red,
+			color.green,
+			color.blue
+		],
+		alpha: color.alpha
+	}).to(outputSpace).toString({
+		format: "css",
+		precision: 4,
+		inGamut: false
+	}).replace(" / ", "/").replaceAll(" ", "|");
+}
+function normalizeCSSColorFunctionName(fn) {
+	switch (fn) {
+		case "rgb":
+		case "rgba": return "srgb";
+		case "hsla": return "hsl";
+		case "display-p3":
+		case "p3": return "p3";
+		case "rec2020":
+		case "rec.2020": return "rec2020";
+		case "color": return "";
+		default: return fn;
+	}
+}
+//#endregion
+export { convertColorByToken as default, normalizeCSSColorFunctionName };

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

@@ -1,5 +1,8 @@
-export interface CSSMarkdownDocumentation {
-    kind: 'markdown';
-    value: string;
+//#region src/utils/create-css-markdown-documentation.d.ts
+interface CSSMarkdownDocumentation {
+  kind: 'markdown';
+  value: string;
 }
-export default function createCSSMarkdownDocumentation(css: string): CSSMarkdownDocumentation | undefined;
+declare function createCSSMarkdownDocumentation(css: string): CSSMarkdownDocumentation | undefined;
+//#endregion
+export { CSSMarkdownDocumentation, createCSSMarkdownDocumentation as default };

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

@@ -0,0 +1,13 @@
+import beautifyCSS from "./beautify-css.js";
+//#region src/utils/create-css-markdown-documentation.ts
+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```"
+	};
+}
+//#endregion
+export { createCSSMarkdownDocumentation as default };

package/dist/utils/create-doc.d.ts

@@ -1,16 +1,20 @@
-import { TextDocument } from 'vscode-languageserver-textdocument';
-export declare const languageIdOfExt: {
-    ts: string;
-    tsx: string;
-    js: string;
-    jsx: string;
-    css: string;
-    scss: string;
-    less: string;
-    html: string;
-    json: string;
-    vue: string;
-    svelte: string;
-    astro: string;
+import { TextDocument } from "vscode-languageserver-textdocument";
+
+//#region src/utils/create-doc.d.ts
+declare const languageIdOfExt: {
+  ts: string;
+  tsx: string;
+  js: string;
+  jsx: string;
+  css: string;
+  scss: string;
+  less: string;
+  html: string;
+  json: string;
+  vue: string;
+  svelte: string;
+  astro: string;
 };
-export default function createDoc(ext: keyof typeof languageIdOfExt, content: string): TextDocument;
+declare function createDoc(ext: keyof typeof languageIdOfExt, content: string): TextDocument;
+//#endregion
+export { createDoc as default, languageIdOfExt };

package/dist/utils/create-doc.js

@@ -0,0 +1,21 @@
+import { TextDocument } from "vscode-languageserver-textdocument";
+//#region src/utils/create-doc.ts
+const languageIdOfExt = {
+	ts: "typescript",
+	tsx: "typescriptreact",
+	js: "javascript",
+	jsx: "javascriptreact",
+	css: "css",
+	scss: "scss",
+	less: "less",
+	html: "html",
+	json: "json",
+	vue: "vue",
+	svelte: "svelte",
+	astro: "astro"
+};
+function createDoc(ext, content) {
+	return TextDocument.create(`file:///abc.${ext}`, languageIdOfExt[ext], 0, content);
+}
+//#endregion
+export { createDoc as default, languageIdOfExt };

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

@@ -1,4 +1,8 @@
-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[];
+import { MasterCSS } from "@master/css-language";
+import { CompletionItem } from "vscode-languageserver-protocol";
+import { CompletionIndex } from "./completion-index.js";
+
+//#region src/utils/get-class-completion-items.d.ts
+declare function getClassCompletionItems(css?: MasterCSS, completionIndex?: CompletionIndex): CompletionItem[];
+//#endregion
+export { getClassCompletionItems as default };

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

@@ -0,0 +1,15 @@
+import createCSSMarkdownDocumentation from "./create-css-markdown-documentation.js";
+import { createCompletionIndex } from "./completion-index.js";
+import { createDefaultCSS, generateCSS } from "@master/css-language";
+//#region src/utils/get-class-completion-items.ts
+function getClassCompletionItems(css = createDefaultCSS(), completionIndex = createCompletionIndex(css)) {
+	return completionIndex.classEntries.map((entry) => {
+		const { documentationClassName, ...completionItem } = entry;
+		return {
+			...completionItem,
+			...documentationClassName ? { documentation: createCSSMarkdownDocumentation(generateCSS([documentationClassName], css, completionIndex.runtime)) } : {}
+		};
+	});
+}
+//#endregion
+export { getClassCompletionItems as default };

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

@@ -1,3 +1,7 @@
-import { MasterCSS } from '@master/css-language';
-import { type CompletionItem } from 'vscode-languageserver-protocol';
-export default function getColorCompletionItems(css?: MasterCSS): CompletionItem[];
+import { MasterCSS } from "@master/css-language";
+import { CompletionItem } from "vscode-languageserver-protocol";
+
+//#region src/utils/get-color-completion-items.d.ts
+declare function getColorCompletionItems(css?: MasterCSS): CompletionItem[];
+//#endregion
+export { getColorCompletionItems as default };

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

@@ -0,0 +1,22 @@
+import sortCompletionItems from "./sort-completion-items.js";
+import { createDefaultCSS } from "@master/css-language";
+import { CompletionItemKind } from "vscode-languageserver-protocol";
+//#region src/utils/get-color-completion-items.ts
+function getColorCompletionItems(css = createDefaultCSS()) {
+	const completionItems = [];
+	css.variables.forEach((eachVariable, eachVariableName) => {
+		if (eachVariable.namespace?.startsWith("color")) {
+			const valueToken = eachVariable.value ?? eachVariable.name;
+			completionItems.push({
+				label: eachVariableName,
+				detail: String(valueToken),
+				documentation: String(valueToken),
+				kind: CompletionItemKind.Color,
+				sortText: eachVariableName.replace(/(.+?)-(\d+)/, (match, prefix, num) => prefix + "-" + ("00000" + num).slice(-5))
+			});
+		}
+	});
+	return sortCompletionItems(completionItems);
+}
+//#endregion
+export { getColorCompletionItems as default };

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

@@ -1 +1,4 @@
-export default function getPosition(searchString: string, text: string): import("vscode-languageserver-textdocument").Position;
+//#region src/utils/get-position.d.ts
+declare function getPosition(searchString: string, text: string): import("vscode-languageserver-textdocument").Position;
+//#endregion
+export { getPosition as default };

package/dist/utils/get-position.js

@@ -0,0 +1,9 @@
+import { TextDocument } from "vscode-languageserver-textdocument";
+//#region src/utils/get-position.ts
+function getPosition(searchString, text) {
+	const document = TextDocument.create("mockuri://test", "plaintext", 1, text);
+	const offset = text.indexOf(searchString);
+	return document.positionAt(offset);
+}
+//#endregion
+export { getPosition as default };

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

@@ -1,4 +1,8 @@
-import { MasterCSS } from '@master/css-language';
-import { type CompletionItem } from 'vscode-languageserver-protocol';
-import { type CompletionIndex } from './completion-index';
-export default function getPseudoClassCompletionItems(css: MasterCSS | undefined, syntax: string, completionIndex?: CompletionIndex): CompletionItem[];
+import { MasterCSS } from "@master/css-language";
+import { CompletionItem } from "vscode-languageserver-protocol";
+import { CompletionIndex } from "./completion-index.js";
+
+//#region src/utils/get-pseudo-class-completion-items.d.ts
+declare function getPseudoClassCompletionItems(css: MasterCSS | undefined, syntax: string, completionIndex?: CompletionIndex): CompletionItem[];
+//#endregion
+export { getPseudoClassCompletionItems as default };

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

@@ -0,0 +1,64 @@
+import createCSSMarkdownDocumentation from "./create-css-markdown-documentation.js";
+import sortCompletionItems from "./sort-completion-items.js";
+import { createCompletionIndex } from "./completion-index.js";
+import { createDefaultCSS, generateCSS } from "@master/css-language";
+import { CompletionItemKind } from "vscode-languageserver-protocol";
+//#region src/utils/get-pseudo-class-completion-items.ts
+const kind = CompletionItemKind.Function;
+const functionalPseudoClassNames = /* @__PURE__ */ 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: createCSSMarkdownDocumentation(generateCSS([syntax + name.slice(1)], css, completionIndex.runtime)),
+			kind
+		};
+	});
+	for (const { token: name, selector } of completionIndex.pseudoClassSelectors) {
+		if (name.startsWith("::")) continue;
+		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,
+			documentation: createCSSMarkdownDocumentation(generateCSS([syntax + label.slice(1)], css, completionIndex.runtime)),
+			sortText,
+			kind,
+			detail: String(value)
+		};
+		completionItems.push(completionItem);
+	}
+	return sortCompletionItems(completionItems);
+}
+//#endregion
+export { getPseudoClassCompletionItems as default };

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

@@ -1,4 +1,8 @@
-import { MasterCSS } from '@master/css-language';
-import { type CompletionItem } from 'vscode-languageserver-protocol';
-import { type CompletionIndex } from './completion-index';
-export default function getPseudoElementCompletionItems(css: MasterCSS | undefined, syntax: string, completionIndex?: CompletionIndex): CompletionItem[];
+import { MasterCSS } from "@master/css-language";
+import { CompletionItem } from "vscode-languageserver-protocol";
+import { CompletionIndex } from "./completion-index.js";
+
+//#region src/utils/get-pseudo-element-completion-items.d.ts
+declare function getPseudoElementCompletionItems(css: MasterCSS | undefined, syntax: string, completionIndex?: CompletionIndex): CompletionItem[];
+//#endregion
+export { getPseudoElementCompletionItems as default };

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

@@ -0,0 +1,39 @@
+import createCSSMarkdownDocumentation from "./create-css-markdown-documentation.js";
+import sortCompletionItems from "./sort-completion-items.js";
+import { createCompletionIndex } from "./completion-index.js";
+import { createDefaultCSS, generateCSS } from "@master/css-language";
+import { CompletionItemKind } from "vscode-languageserver-protocol";
+//#region src/utils/get-pseudo-element-completion-items.ts
+const kind = CompletionItemKind.Function;
+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: createCSSMarkdownDocumentation(generateCSS([syntax + name.slice(2)], css, completionIndex.runtime)),
+			kind
+		};
+	});
+	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;
+		let sortText = name.startsWith("::-") ? "zzzz" + name.slice(3) : "zz" + name.replace(/^::/, "");
+		if (sortText.endsWith("()")) sortText = "z" + sortText;
+		const completionItem = {
+			label: name,
+			documentation: createCSSMarkdownDocumentation(generateCSS([syntax + name.slice(2)], css, completionIndex.runtime)),
+			sortText,
+			kind,
+			detail: String(value)
+		};
+		completionItems.push(completionItem);
+	}
+	return sortCompletionItems(completionItems);
+}
+//#endregion
+export { getPseudoElementCompletionItems as default };

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

@@ -1,4 +1,8 @@
-import { MasterCSS } from '@master/css-language';
-import { CompletionItem } from 'vscode-languageserver-protocol';
-import { type CompletionIndex } from './completion-index';
-export default function getQueryCompletionItems(css: MasterCSS | undefined, triggerCharacter: string | undefined, syntax: string, completionIndex?: CompletionIndex): CompletionItem[];
+import { MasterCSS } from "@master/css-language";
+import { CompletionItem } from "vscode-languageserver-protocol";
+import { CompletionIndex } from "./completion-index.js";
+
+//#region src/utils/get-query-completion-items.d.ts
+declare function getQueryCompletionItems(css: MasterCSS | undefined, triggerCharacter: string | undefined, syntax: string, completionIndex?: CompletionIndex): CompletionItem[];
+//#endregion
+export { getQueryCompletionItems as default };