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

package/README.md

@@ -91,6 +91,20 @@ const semanticTokens = languageService.renderSemanticTokensAtPosition(textDocume
 
 CSS directive syntax in CSS-family documents is highlighted by the shared TextMate grammar. Semantic tokens are only added for directive class-list spans such as bare `@compose` preludes and quoted `@safelist` strings.
 
+### Directive formatting
+
+```ts
+const edits = languageService.formatDirectives(textDocument)
+```
+
+Directive formatting returns LSP text edits for Master CSS directive source. It supports CSS, SCSS, and LESS documents, plus CSS-family `<style>` blocks in Vue, Svelte, and Astro documents. The formatter repairs directive class-list important markers such as `bg:transparent !` to `bg:transparent!` and does not change compiler semantics or generated CSS.
+
+Pass an LSP range as the second argument for range formatting:
+
+```ts
+const edits = languageService.formatDirectives(textDocument, range)
+```
+
 ## Settings
 
 ```js
@@ -109,6 +123,7 @@ import { settings } from '@master/css-language-service'
 | `inspectSyntax` | `boolean` | `true` | Enables hover inspection and generated CSS previews. |
 | `renderSyntaxColors` | `boolean` | `true` | Enables color rendering. |
 | `editSyntaxColors` | `boolean` | `true` | Enables color editing. |
+| `formatDirectives` | `boolean` | `true` | Enables Master CSS directive formatting. |
 | `embeddedSyntaxHighlighting` | `'active' \| 'always' \| 'off'` | `'active'` | Controls embedded semantic token highlighting. |
 
 Use `@master/css-language` directly for browser helpers, Shiki integration, TextMate grammar assets, and raw class-position scanning.

package/dist/core.d.ts

@@ -6,6 +6,7 @@ import { Settings } 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 formatDirectives from "./features/format-directives.js";
 import renderSemanticTokens$1, { renderSemanticTokensAtPosition as renderSemanticTokensAtPosition$1 } from "./features/render-semantic-tokens.js";
 import suggestSyntax from "./features/suggest-syntax.js";
 
@@ -25,6 +26,7 @@ declare class CSSLanguageService extends EventEmitter {
   inspectSyntax(...params: Parameters<typeof inspectSyntax>): import("vscode-languageserver-protocol").Hover | undefined;
   renderSyntaxColors(...params: Parameters<typeof renderSyntaxColors>): Promise<import("vscode-languageserver-protocol").ColorInformation[] | undefined> | undefined;
   editSyntaxColors(...params: Parameters<typeof editSyntaxColors>): import("vscode-languageserver-protocol").ColorPresentation[] | undefined;
+  formatDirectives(...params: Parameters<typeof formatDirectives>): import("vscode-languageserver-protocol").TextEdit[] | undefined;
   renderSemanticTokens(...params: Parameters<typeof renderSemanticTokens$1>): import("vscode-languageserver-protocol").SemanticTokens | undefined;
   renderSemanticTokensAtPosition(...params: Parameters<typeof renderSemanticTokensAtPosition$1>): import("vscode-languageserver-protocol").SemanticTokens | undefined;
   suggestSyntax(document: Parameters<typeof suggestSyntax>[0], position: Parameters<typeof suggestSyntax>[1], context: Parameters<typeof suggestSyntax>[2]): import("vscode-languageserver-protocol").CompletionItem[] | undefined;

package/dist/core.js

@@ -2,6 +2,7 @@ import settings 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 formatDirectives from "./features/format-directives.js";
 import renderSemanticTokens$1, { renderSemanticTokensAtPosition as renderSemanticTokensAtPosition$1 } from "./features/render-semantic-tokens.js";
 import { createCompletionIndex } from "./utils/completion-index.js";
 import suggestSyntax from "./features/suggest-syntax.js";
@@ -40,6 +41,9 @@ var CSSLanguageService = class extends EventEmitter {
 	editSyntaxColors(...params) {
 		if (this.settings.editSyntaxColors && this.isDocumentAccepted(params[0])) return editSyntaxColors?.call(this, ...params);
 	}
+	formatDirectives(...params) {
+		if (this.settings.formatDirectives && this.isDocumentAccepted(params[0])) return formatDirectives?.call(this, ...params);
+	}
 	renderSemanticTokens(...params) {
 		if (this.isDocumentAccepted(params[0])) return renderSemanticTokens$1?.call(this, ...params);
 	}

package/dist/features/format-directives.d.ts

@@ -0,0 +1,7 @@
+import { Range, TextEdit } from "vscode-languageserver-protocol";
+import { TextDocument } from "vscode-languageserver-textdocument";
+
+//#region src/features/format-directives.d.ts
+declare function formatDirectives(document: TextDocument, range?: Range): TextEdit[] | undefined;
+//#endregion
+export { formatDirectives as default };

package/dist/features/format-directives.js

@@ -0,0 +1,72 @@
+import { formatMasterCSSDirectives } from "@master/css-language";
+//#region src/features/format-directives.ts
+const CSS_FORMAT_LANGUAGE_IDS = /* @__PURE__ */ new Set([
+	"css",
+	"scss",
+	"less"
+]);
+const SFC_FORMAT_LANGUAGE_IDS = /* @__PURE__ */ new Set([
+	"vue",
+	"svelte",
+	"astro"
+]);
+const STYLE_BLOCK_RE = /<style\b([^>]*)>([\s\S]*?)<\/style>/gi;
+function getSFCStyleLanguage(attributes) {
+	const match = /\blang\s*=\s*(?:"([^"]+)"|'([^']+)'|([^\s>]+))/i.exec(attributes);
+	return (match?.[1] || match?.[2] || match?.[3] || "css").toLowerCase();
+}
+function toOffsetRange(document, range) {
+	if (!range) return;
+	return {
+		start: document.offsetAt(range.start),
+		end: document.offsetAt(range.end)
+	};
+}
+function intersects(a, b) {
+	return a.start < b.end && b.start < a.end;
+}
+function toTextEdit(document, edit) {
+	return {
+		range: {
+			start: document.positionAt(edit.start),
+			end: document.positionAt(edit.end)
+		},
+		newText: edit.newText
+	};
+}
+function collectCSSDocumentFormatEdits(document, range) {
+	return formatMasterCSSDirectives(document.getText(), { range: toOffsetRange(document, range) }).map(toTextEdit.bind(void 0, document));
+}
+function collectSFCFormatEdits(document, range) {
+	const source = document.getText();
+	const offsetRange = toOffsetRange(document, range);
+	const edits = [];
+	STYLE_BLOCK_RE.lastIndex = 0;
+	for (const match of source.matchAll(STYLE_BLOCK_RE)) {
+		const styleLanguage = getSFCStyleLanguage(match[1]);
+		if (!CSS_FORMAT_LANGUAGE_IDS.has(styleLanguage)) continue;
+		const styleText = match[2];
+		const styleStart = (match.index || 0) + match[0].indexOf(styleText);
+		const styleEnd = styleStart + styleText.length;
+		if (offsetRange && !intersects(offsetRange, {
+			start: styleStart,
+			end: styleEnd
+		})) continue;
+		const relativeRange = offsetRange ? {
+			start: Math.max(offsetRange.start, styleStart) - styleStart,
+			end: Math.min(offsetRange.end, styleEnd) - styleStart
+		} : void 0;
+		for (const edit of formatMasterCSSDirectives(styleText, { range: relativeRange })) edits.push({
+			start: styleStart + edit.start,
+			end: styleStart + edit.end,
+			newText: edit.newText
+		});
+	}
+	return edits.map(toTextEdit.bind(void 0, document));
+}
+function formatDirectives(document, range) {
+	if (CSS_FORMAT_LANGUAGE_IDS.has(document.languageId)) return collectCSSDocumentFormatEdits(document, range);
+	if (SFC_FORMAT_LANGUAGE_IDS.has(document.languageId)) return collectSFCFormatEdits(document, range);
+}
+//#endregion
+export { formatDirectives as default };

package/dist/settings.d.ts

@@ -14,6 +14,7 @@ declare interface Settings extends LanguageSettings {
   inspectSyntax?: boolean;
   renderSyntaxColors?: boolean;
   editSyntaxColors?: boolean;
+  formatDirectives?: boolean;
 }
 //#endregion
 export { Settings, settings as default };

package/dist/settings.js

@@ -52,6 +52,7 @@ const settings = {
 	inspectSyntax: true,
 	renderSyntaxColors: true,
 	editSyntaxColors: true,
+	formatDirectives: true,
 	embeddedSyntaxHighlighting: "active"
 };
 //#endregion

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

@@ -24,10 +24,14 @@ function getVariableKeyByNamespace(variableName, namespace) {
 	const key = positiveName === namespace ? "" : positiveName.slice(namespace.length + 1);
 	return negative ? "-" + key : key;
 }
+function uniqueKeys(...keys) {
+	return [...new Set(keys)];
+}
 function getValueCompletionItems(css = createDefaultCSS(), ruleKey, valuePrefix = "", completionIndex = createCompletionIndex(css)) {
 	const completionItems = [];
 	const addedLabels = /* @__PURE__ */ new Set();
 	const canonicalRuleKey = completionIndex.keyAliases[ruleKey] || ruleKey;
+	const valueLookupKeys = uniqueKeys(ruleKey, canonicalRuleKey);
 	const nativeKey = completionIndex.nativeUtilityKeys.get(canonicalRuleKey) || (getMdnPropertySyntax(canonicalRuleKey) ? canonicalRuleKey : void 0);
 	const nativePropertyValues = getMdnPropertyValueNames(nativeKey);
 	const pushCompletionItem = (completionItem) => {
@@ -97,14 +101,14 @@ function getValueCompletionItems(css = createDefaultCSS(), ruleKey, valuePrefix
 	* 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) || []) {
+	for (const valueLookupKey of valueLookupKeys) for (const { name, variable } of completionIndex.scopedVariablesByKey.get(valueLookupKey) || []) addScopedVariableCompletionItem(variable, name);
+	for (const valueLookupKey of valueLookupKeys) for (const { value } of completionIndex.patternValuesByKey.get(valueLookupKey) || []) {
 		if (addedLabels.has(value)) continue;
 		pushCompletionItem({
 			label: value,
 			kind: CompletionItemKind.Value,
 			documentation: createCSSMarkdownDocumentation(generateCSS([ruleKey + ":" + value], css, completionIndex.runtime)),
-			detail: canonicalRuleKey + ": " + value
+			detail: valueLookupKey + ": " + value
 		});
 	}
 	/**
@@ -128,7 +132,7 @@ function getValueCompletionItems(css = createDefaultCSS(), ruleKey, valuePrefix
 		});
 	});
 	const usedKeys = /* @__PURE__ */ new Set();
-	for (const variableNamespace of completionIndex.nativeVariableNamespacesByProperty.get(canonicalRuleKey) || []) for (const variable of completionIndex.variables) {
+	for (const valueLookupKey of valueLookupKeys) for (const variableNamespace of completionIndex.nativeVariableNamespacesByProperty.get(valueLookupKey) || []) for (const variable of completionIndex.variables) {
 		const variableName = getVariableKeyByNamespace(variable.name, variableNamespace);
 		if (variableName === void 0 || usedKeys.has(variableName)) continue;
 		usedKeys.add(variableName);

package/package.json

@@ -16,14 +16,14 @@
     "minimatch": "^10.2.5",
     "vscode-languageserver-protocol": "^3.18.0",
     "vscode-languageserver-textdocument": "^1.0.12",
-    "@master/css": "^2.0.0-rc.74",
-    "@master/css-engine": "^2.0.0-rc.74",
-    "@master/css-language": "^2.0.0-rc.74"
+    "@master/css": "^2.0.0-rc.76",
+    "@master/css-engine": "^2.0.0-rc.76",
+    "@master/css-language": "^2.0.0-rc.76"
   },
   "devDependencies": {
     "@types/vscode": "^1.125.0",
     "vscode-languageserver": "^10.0.0",
-    "@master/css-schema": "^2.0.0-rc.74"
+    "@master/css-schema": "^2.0.0-rc.76"
   },
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -50,7 +50,7 @@
     "access": "public",
     "provenance": true
   },
-  "version": "2.0.0-rc.74",
+  "version": "2.0.0-rc.76",
   "scripts": {
     "build": "tsdown --config ../../shared/tsdown-package.config.ts",
     "dev": "tsdown --config ../../shared/tsdown-package.config.ts --watch",