@master/css-language-service 0.0.0-site.1793659883.g69c9aebcf628

package/dist/features/suggest-syntax.js

@@ -0,0 +1,165 @@
+import { analyzeDocument, documentRequest } from "../document-analysis.js";
+import createCSSMarkdownDocumentation from "../utils/create-css-markdown-documentation.js";
+import { CompletionItemKind, InsertTextFormat } from "vscode-languageserver-protocol";
+// src/features/suggest-syntax.ts
+function sortCompletionItems(items) {
+	return items.sort((left, right) => (left.sortText || left.label).localeCompare(right.sortText || right.label, void 0, { numeric: true }));
+}
+function documentation(service, entry, className) {
+	const text = entry.documentationText || service.session.inspectClassName(className).text;
+	return text ? createCSSMarkdownDocumentation(text) : void 0;
+}
+function classCompletionItem(service, entry, label = entry.label, className = entry.label, generateDocumentation = false) {
+	return {
+		label,
+		kind: entry.kind === "property" ? CompletionItemKind.Property : entry.kind === "function" ? CompletionItemKind.Function : CompletionItemKind.Value,
+		insertText: entry.kind === "function" ? entry.insertText ?? `${label.slice(0, -2)}($0)` : void 0,
+		insertTextFormat: entry.kind === "function" ? InsertTextFormat.Snippet : void 0,
+		detail: entry.detail,
+		documentation: entry.documentationText || generateDocumentation ? documentation(service, entry, className) : void 0,
+		sortText: entry.sortText,
+		command: entry.triggerSuggest ? {
+			title: "Suggest",
+			command: "editor.action.triggerSuggest"
+		} : void 0
+	};
+}
+/**
+* Root candidates for the class typed so far. A `(property:` head also matches the
+* bare property name, and replaces the whole typed class so its parenthesis is
+* never doubled.
+*/
+function rootCompletionItems(service, entries, query, range) {
+	return sortCompletionItems(entries.filter(({ label }) => {
+		if (label.startsWith(":") || label.startsWith("@")) return false;
+		if (label.includes(":") && !label.endsWith(":")) return false;
+		return !query || label.startsWith(query) || label.startsWith("(") && label.startsWith(query, 1);
+	}).map((entry) => {
+		const item = classCompletionItem(service, entry);
+		if (range) {
+			item.filterText = entry.label.startsWith("(") && !query.startsWith("(") ? entry.label.slice(1) : entry.label;
+			item.textEdit = {
+				range,
+				newText: item.insertText ?? entry.label
+			};
+			item.insertText = void 0;
+		}
+		return item;
+	}));
+}
+/** Values of a `(property:` head; `suffix` is the text the head still lacks, such as its `)`. */
+function valueCompletionItems(service, entries, key, valuePrefix, range, suffix) {
+	const prefix = `(${key}:`;
+	return sortCompletionItems(entries.filter(({ kind, label }) => kind !== "property" && label.startsWith(prefix) && label.endsWith(")")).filter(({ label }) => valuePrefix.startsWith("-") || !label.slice(prefix.length).startsWith("-")).map((entry) => {
+		const value = entry.label.slice(prefix.length, -1);
+		const item = classCompletionItem(service, entry, value, entry.label, entry.label === "(font-style:italic)");
+		item.filterText = value;
+		item.textEdit = {
+			range,
+			newText: entry.kind === "function" ? `${value.slice(0, -1)}$0)${suffix}` : `${value}${suffix}`
+		};
+		item.insertText = void 0;
+		return item;
+	}));
+}
+const SELECTOR_TRIGGER = /(?:::?|[_>+~])$/u;
+const hasSyntaxError = (diagnostics) => Boolean(diagnostics?.some(({ code }) => code === "CLASS_SYNTAX_ERROR"));
+function selectorCompletionItems(service, entries, field) {
+	const elementOnly = field.endsWith("::");
+	const triggerLength = elementOnly ? 2 : field.endsWith(":") ? 1 : 0;
+	const byLabel = /* @__PURE__ */ new Map();
+	for (const entry of entries) {
+		if (!entry.label.startsWith(":")) continue;
+		if (elementOnly && !entry.label.startsWith("::")) continue;
+		const label = entry.label;
+		if (byLabel.has(label)) continue;
+		const insertText = triggerLength ? label.slice(triggerLength) : void 0;
+		const className = `${field}${triggerLength ? label.slice(triggerLength) : label}`;
+		const includeDocumentation = (/* @__PURE__ */ new Set([
+			":first-child",
+			":hover",
+			"::placeholder"
+		])).has(label);
+		byLabel.set(label, {
+			label,
+			insertText,
+			kind: CompletionItemKind.Function,
+			detail: entry.detail,
+			documentation: entry.documentationText || includeDocumentation ? documentation(service, entry, className) : void 0,
+			sortText: entry.sortText
+		});
+	}
+	return sortCompletionItems([...byLabel.values()]);
+}
+function queryCompletionItems(entries) {
+	return sortCompletionItems(entries.filter(({ label }) => label.startsWith("@")).map((entry) => ({
+		label: entry.label,
+		filterText: entry.label.slice(1),
+		insertText: entry.label.slice(1),
+		detail: entry.detail,
+		kind: entry.kind === "function" ? CompletionItemKind.Function : CompletionItemKind.Keyword,
+		sortText: entry.sortText
+	})));
+}
+function suggestSyntax(document, position, context) {
+	const offset = document.offsetAt(position);
+	const keyframe = analyzeDocument(this, document).keyframePositions.find(({ range }) => offset >= range.start && offset <= range.end);
+	if (keyframe) return this.session.completionIndex().keyframes.map((entry) => ({
+		label: entry.name,
+		kind: CompletionItemKind.Value,
+		documentation: createCSSMarkdownDocumentation(entry.text),
+		textEdit: {
+			range: {
+				start: document.positionAt(keyframe.range.start),
+				end: document.positionAt(keyframe.range.end)
+			},
+			newText: keyframe.raw ? entry.insertText : ` ${entry.insertText} `
+		}
+	}));
+	const classPosition = this.getClassPosition(document, position);
+	if (!classPosition) return;
+	const field = context?.triggerCharacter === " " ? "" : document.getText({
+		start: document.positionAt(classPosition.range.start),
+		end: position
+	});
+	const entries = this.session.completionIndex().classEntries;
+	if (!field || context?.triggerCharacter === " ") return rootCompletionItems(this, entries, "");
+	if (field.startsWith("@") || field.startsWith("~")) return [];
+	const typed = {
+		start: document.positionAt(classPosition.range.start),
+		end: position
+	};
+	const trigger = field.match(SELECTOR_TRIGGER)?.[0];
+	if (trigger && trigger.length < field.length) {
+		const head = this.session.inspectClassName(field.slice(0, -trigger.length));
+		if (head.kind !== "unknown" && !hasSyntaxError(head.diagnostics)) return selectorCompletionItems(this, entries, field);
+	}
+	if (field.startsWith("(")) {
+		const head = this.session.nativeDeclarationCompletion({
+			...documentRequest(this, document),
+			offset
+		});
+		if (head) {
+			if (head.kind === "none" || !head.range) return [];
+			const range = {
+				start: document.positionAt(head.range.start),
+				end: document.positionAt(head.range.end)
+			};
+			if (head.kind === "property") return rootCompletionItems(this, entries, `(${head.prefix}`, {
+				start: typed.start,
+				end: range.end
+			});
+			return valueCompletionItems(this, entries, head.property ?? "", head.prefix, range, head.suffix ?? "");
+		}
+	}
+	const inspection = this.session.inspectClassName(field);
+	if (hasSyntaxError(inspection.diagnostics)) return [];
+	const suffix = inspection.suffix ?? "";
+	if (suffix.includes("@")) {
+		if (field.endsWith("@")) return queryCompletionItems(entries);
+		return [];
+	}
+	if (suffix || inspection.kind === "declaration") return [];
+	return rootCompletionItems(this, entries, field, typed);
+}
+export { suggestSyntax as default };

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { MasterCSSLanguageServiceSettings, defaultLanguageServiceSettings } from "./settings.js";
+import inspectSyntax from "./features/inspect-syntax.js";
+import renderSyntaxColors from "./features/render-syntax-colors.js";
+import editSyntaxColors from "./features/edit-syntax-colors.js";
+import suggestSyntax from "./features/suggest-syntax.js";
+import { MasterCSSLanguageService, MasterCSSLanguageServiceOptions } from "./core.js";
+import { AT_TRIGGER_CHARACTER, INVOKED_TRIGGER_CHARACTERS, QUERY_TRIGGER_CHARACTERS, SELECTOR_TRIGGER_CHARACTERS, VALUE_TRIGGER_CHARACTERS } from "./common.js";
+export { AT_TRIGGER_CHARACTER, INVOKED_TRIGGER_CHARACTERS, MasterCSSLanguageService, type MasterCSSLanguageServiceOptions, type MasterCSSLanguageServiceSettings, QUERY_TRIGGER_CHARACTERS, SELECTOR_TRIGGER_CHARACTERS, VALUE_TRIGGER_CHARACTERS, defaultLanguageServiceSettings, editSyntaxColors, inspectSyntax, renderSyntaxColors, suggestSyntax };

package/dist/index.js

@@ -0,0 +1,8 @@
+import { defaultLanguageServiceSettings } from "./settings.js";
+import { AT_TRIGGER_CHARACTER, INVOKED_TRIGGER_CHARACTERS, QUERY_TRIGGER_CHARACTERS, SELECTOR_TRIGGER_CHARACTERS, VALUE_TRIGGER_CHARACTERS } from "./common.js";
+import inspectSyntax from "./features/inspect-syntax.js";
+import renderSyntaxColors from "./features/render-syntax-colors.js";
+import editSyntaxColors from "./features/edit-syntax-colors.js";
+import suggestSyntax from "./features/suggest-syntax.js";
+import { MasterCSSLanguageService } from "./core.js";
+export { AT_TRIGGER_CHARACTER, INVOKED_TRIGGER_CHARACTERS, MasterCSSLanguageService, QUERY_TRIGGER_CHARACTERS, SELECTOR_TRIGGER_CHARACTERS, VALUE_TRIGGER_CHARACTERS, defaultLanguageServiceSettings, editSyntaxColors, inspectSyntax, renderSyntaxColors, suggestSyntax };

package/dist/settings.d.ts

@@ -0,0 +1,21 @@
+import { MasterCSSManifest } from "@master/css-schema/manifest";
+/**
+ * @example styles https://regex101.com/r/HLPdsw/1
+ **/
+interface MasterCSSLanguageServiceSettings {
+  includedLanguages?: string[];
+  exclude?: string[];
+  manifest?: MasterCSSManifest;
+  classAttributes?: string[];
+  classFunctions?: string[];
+  classDeclarations?: string[];
+  classAttributeBindings?: Record<string, [string, string] | false>;
+  embeddedSyntaxHighlighting?: 'active' | 'always' | 'off';
+  suggestSyntax?: boolean;
+  inspectSyntax?: boolean;
+  renderSyntaxColors?: boolean;
+  editSyntaxColors?: boolean;
+  formatDirectives?: boolean;
+}
+declare const defaultLanguageServiceSettings: Readonly<MasterCSSLanguageServiceSettings>;
+export { MasterCSSLanguageServiceSettings, defaultLanguageServiceSettings };

package/dist/settings.js

@@ -0,0 +1,64 @@
+import { CLASS_ATTRIBUTES, CLASS_DECLARATIONS, CLASS_FUNCTIONS } from "@master/css-tooling/language";
+// src/settings.ts
+const defaultLanguageServiceSettings = Object.freeze({
+	includedLanguages: Object.freeze([
+		"html",
+		"php",
+		"javascript",
+		"typescript",
+		"javascriptreact",
+		"typescriptreact",
+		"css",
+		"scss",
+		"less",
+		"vue",
+		"svelte",
+		"rust",
+		"astro",
+		"markdown",
+		"mdx",
+		"astro"
+	]),
+	/**
+	* @example <div class="a b">
+	* @example <div className="a b">
+	*/
+	classAttributes: Object.freeze([...CLASS_ATTRIBUTES]),
+	/**
+	* @example <div class={active ? 'a' : 'b'}>
+	* @example <div className={active ? 'a' : 'b'}>
+	*/
+	classAttributeBindings: Object.freeze({
+		"className": Object.freeze(["{", "}"]),
+		"class": Object.freeze(["{", "}"]),
+		"class:list": Object.freeze(["{", "}"]),
+		":class": Object.freeze(["\"", "\""]),
+		"v-bind:class": Object.freeze(["\"", "\""]),
+		"[class]": Object.freeze(["\"", "\""]),
+		"[className]": Object.freeze(["\"", "\""]),
+		"[ngClass]": Object.freeze(["\"", "\""])
+	}),
+	/**
+	* @example const classes = 'a b'
+	* @example { classes: { btn: 'a b' } }
+	*/
+	classDeclarations: Object.freeze([...CLASS_DECLARATIONS]),
+	/**
+	* @example clsx('a b')
+	* @example styled`a b`
+	* @example .classList.add('a')
+	*/
+	classFunctions: Object.freeze([...CLASS_FUNCTIONS]),
+	exclude: Object.freeze([
+		"**/.git/**",
+		"**/node_modules/**",
+		"**/.hg/**"
+	]),
+	suggestSyntax: true,
+	inspectSyntax: true,
+	renderSyntaxColors: true,
+	editSyntaxColors: true,
+	formatDirectives: true,
+	embeddedSyntaxHighlighting: "active"
+});
+export { defaultLanguageServiceSettings };

package/dist/shiki/hast.d.ts

@@ -0,0 +1,13 @@
+interface ShikiPosition {
+  line: number;
+  character: number;
+}
+interface ShikiDecoration {
+  start: number | ShikiPosition;
+  end: number | ShikiPosition;
+  tagName?: string;
+  properties?: Record<string, unknown>;
+  transform?: (element: unknown, type: 'wrapper' | 'line' | 'token') => unknown | undefined;
+}
+declare function applyClassAttributeValueWrappers(root: unknown, source: string, decorations: ShikiDecoration[], sourceLineNumbers?: WeakMap<object, number>): void;
+export { applyClassAttributeValueWrappers };

package/dist/shiki/hast.js

@@ -0,0 +1,174 @@
+// src/shiki/hast.ts
+function resolveClassNames(value) {
+	if (Array.isArray(value)) return value.flatMap(resolveClassNames);
+	return typeof value === "string" ? value.split(/\\s+/).filter(Boolean) : [];
+}
+function isHastElement(node) {
+	return Boolean(node && typeof node === "object" && node.type === "element");
+}
+function getHastText(node) {
+	if (!node || typeof node !== "object") return "";
+	if (node.type === "text") return node.value;
+	if (!isHastElement(node)) return "";
+	return (node.children ?? []).map(getHastText).join("");
+}
+function hasHastClass(element, className) {
+	return resolveClassNames(element.properties?.class).includes(className);
+}
+function collectCodeElements(node, codeElements = []) {
+	if (isHastElement(node) && node.tagName === "code") codeElements.push(node);
+	const children = node && typeof node === "object" && Array.isArray(node.children) ? node.children : [];
+	for (const child of children) collectCodeElements(child, codeElements);
+	return codeElements;
+}
+function createSourceLineRanges(source) {
+	const ranges = [];
+	let start = 0;
+	for (let index = 0; index < source.length; index++) {
+		if (source[index] !== "\n") continue;
+		ranges.push({
+			start,
+			end: index
+		});
+		start = index + 1;
+	}
+	ranges.push({
+		start,
+		end: source.length
+	});
+	return ranges;
+}
+function createHastText(value) {
+	return value ? {
+		type: "text",
+		value
+	} : void 0;
+}
+function cloneHastElement(element, children) {
+	return {
+		...element,
+		properties: element.properties ? { ...element.properties } : void 0,
+		children
+	};
+}
+function pushHastNode(target, node) {
+	if (node) target.push(node);
+}
+function pushHastElementSlice(target, element, children) {
+	if (children.length) target.push(cloneHastElement(element, children));
+}
+function splitHastNodeByRange(node, nodeStart, start, end) {
+	const before = [];
+	const inside = [];
+	const after = [];
+	const nodeTextLength = getHastText(node).length;
+	const nodeEnd = nodeStart + nodeTextLength;
+	if (nodeEnd <= start) {
+		before.push(node);
+		return {
+			before,
+			inside,
+			after,
+			length: nodeTextLength
+		};
+	}
+	if (nodeStart >= end) {
+		after.push(node);
+		return {
+			before,
+			inside,
+			after,
+			length: nodeTextLength
+		};
+	}
+	if (node.type === "text") {
+		const localStart = Math.max(0, start - nodeStart);
+		const localEnd = Math.min(node.value.length, end - nodeStart);
+		pushHastNode(before, createHastText(node.value.slice(0, localStart)));
+		pushHastNode(inside, createHastText(node.value.slice(localStart, localEnd)));
+		pushHastNode(after, createHastText(node.value.slice(localEnd)));
+		return {
+			before,
+			inside,
+			after,
+			length: nodeTextLength
+		};
+	}
+	if (start <= nodeStart && nodeEnd <= end) {
+		inside.push(node);
+		return {
+			before,
+			inside,
+			after,
+			length: nodeTextLength
+		};
+	}
+	const splitChildren = splitHastNodesByRange(node.children ?? [], Math.max(0, start - nodeStart), Math.min(nodeTextLength, end - nodeStart));
+	pushHastElementSlice(before, node, splitChildren.before);
+	pushHastElementSlice(inside, node, splitChildren.inside);
+	pushHastElementSlice(after, node, splitChildren.after);
+	return {
+		before,
+		inside,
+		after,
+		length: nodeTextLength
+	};
+}
+function splitHastNodesByRange(nodes, start, end) {
+	const before = [];
+	const inside = [];
+	const after = [];
+	let offset = 0;
+	for (const node of nodes) {
+		const splitNode = splitHastNodeByRange(node, offset, start, end);
+		before.push(...splitNode.before);
+		inside.push(...splitNode.inside);
+		after.push(...splitNode.after);
+		offset += splitNode.length;
+	}
+	return {
+		before,
+		inside,
+		after
+	};
+}
+function applyClassAttributeValueWrapperToLine(line, start, end, decoration) {
+	const splitChildren = splitHastNodesByRange(line.children ?? [], start, end);
+	if (!splitChildren.inside.length) return;
+	const wrapper = {
+		type: "element",
+		tagName: decoration.tagName ?? "span",
+		properties: { ...decoration.properties ?? {} },
+		children: splitChildren.inside
+	};
+	const transformedWrapper = decoration.transform?.(wrapper, "wrapper");
+	line.children = [
+		...splitChildren.before,
+		isHastElement(transformedWrapper) ? transformedWrapper : wrapper,
+		...splitChildren.after
+	];
+}
+function applyClassAttributeValueWrappers(root, source, decorations, sourceLineNumbers) {
+	if (!decorations.length) return;
+	const sourceLineRanges = createSourceLineRanges(source);
+	const codeElements = collectCodeElements(root);
+	for (const codeElement of codeElements) {
+		const lines = (codeElement.children ?? []).filter((child) => isHastElement(child) && hasHastClass(child, "line"));
+		const linesBySourceIndex = new Map(lines.map((line, index) => [(sourceLineNumbers?.get(line) ?? index + 1) - 1, line]));
+		for (const decoration of decorations) {
+			const { start, end } = decoration;
+			if (typeof start !== "number" || typeof end !== "number") continue;
+			for (let lineIndex = 0; lineIndex < sourceLineRanges.length; lineIndex++) {
+				const lineRange = sourceLineRanges[lineIndex];
+				if (end <= lineRange.start || start >= lineRange.end) continue;
+				const line = linesBySourceIndex.get(lineIndex);
+				if (!line) continue;
+				const visibleLineEnd = lineRange.start + getHastText(line).length;
+				const lineStart = Math.max(start, lineRange.start) - lineRange.start;
+				const lineEnd = Math.min(end, lineRange.end, visibleLineEnd) - lineRange.start;
+				if (lineStart < lineEnd) applyClassAttributeValueWrapperToLine(line, lineStart, lineEnd, decoration);
+			}
+		}
+	}
+}
+export { applyClassAttributeValueWrappers };

package/dist/shiki/languages.d.ts

@@ -0,0 +1,8 @@
+declare const languageServiceLanguageIds: Record<string, string>;
+declare const cssDirectiveLanguageIds: Set<string>;
+declare const classAttributeValueWrappersKey = "__masterCSSClassAttributeValueWrappers";
+declare function isMasterCSSClassListLanguage(lang?: string): boolean;
+declare function getMasterCSSShikiLanguageId(lang?: string): string | undefined;
+declare function isMasterCSSShikiSupportedLanguage(lang?: string): boolean;
+declare function getLanguageServiceLanguageId(lang?: string): string | undefined;
+export { classAttributeValueWrappersKey, cssDirectiveLanguageIds, getLanguageServiceLanguageId, getMasterCSSShikiLanguageId, isMasterCSSClassListLanguage, isMasterCSSShikiSupportedLanguage, languageServiceLanguageIds };

package/dist/shiki/languages.js

@@ -0,0 +1,69 @@
+// src/shiki/languages.ts
+const shikiLanguageIds = {
+	html: "html",
+	"angular-html": "angular-html",
+	js: "javascript",
+	javascript: "javascript",
+	jsx: "jsx",
+	javascriptreact: "jsx",
+	ts: "typescript",
+	typescript: "typescript",
+	tsx: "tsx",
+	typescriptreact: "tsx",
+	css: "css",
+	scss: "scss",
+	less: "less",
+	postcss: "postcss",
+	vue: "vue",
+	svelte: "svelte",
+	astro: "astro",
+	md: "markdown",
+	markdown: "markdown",
+	mdx: "mdx"
+};
+const languageServiceLanguageIds = {
+	html: "html",
+	"angular-html": "html",
+	js: "javascript",
+	javascript: "javascript",
+	jsx: "javascriptreact",
+	javascriptreact: "javascriptreact",
+	ts: "typescript",
+	typescript: "typescript",
+	tsx: "typescriptreact",
+	typescriptreact: "typescriptreact",
+	css: "css",
+	scss: "scss",
+	less: "less",
+	postcss: "postcss",
+	vue: "vue",
+	svelte: "svelte",
+	astro: "astro",
+	md: "markdown",
+	markdown: "markdown",
+	mdx: "mdx"
+};
+const masterCSSClassListLanguageIds = /* @__PURE__ */ new Set(["mcss", "master-css"]);
+const cssDirectiveLanguageIds = /* @__PURE__ */ new Set([
+	"css",
+	"scss",
+	"less",
+	"postcss"
+]);
+const classAttributeValueWrappersKey = "__masterCSSClassAttributeValueWrappers";
+const masterCSSShikiSupportedLanguageIds = /* @__PURE__ */ new Set([...Object.keys(shikiLanguageIds), ...Object.values(shikiLanguageIds)]);
+function isMasterCSSClassListLanguage(lang) {
+	return Boolean(lang && masterCSSClassListLanguageIds.has(lang));
+}
+function getMasterCSSShikiLanguageId(lang) {
+	if (!lang) return;
+	return shikiLanguageIds[lang] ?? lang;
+}
+function isMasterCSSShikiSupportedLanguage(lang) {
+	const languageId = getMasterCSSShikiLanguageId(lang);
+	return Boolean(languageId && masterCSSShikiSupportedLanguageIds.has(languageId));
+}
+function getLanguageServiceLanguageId(lang) {
+	return lang ? languageServiceLanguageIds[lang] ?? lang : void 0;
+}
+export { classAttributeValueWrappersKey, cssDirectiveLanguageIds, getLanguageServiceLanguageId, getMasterCSSShikiLanguageId, isMasterCSSClassListLanguage, isMasterCSSShikiSupportedLanguage, languageServiceLanguageIds };