@master/css-language-service 2.0.0-rc.5 → 2.0.0-rc.50

package/dist/utils/query-syntax-completions.mjs

@@ -0,0 +1,113 @@
+import { CompletionItemKind } from 'vscode-languageserver-protocol';
+import getPseudoClassCompletionItems from './get-pseudo-class-completion-items.mjs';
+import getPseudoElementCompletionItems from './get-pseudo-element-completion-items.mjs';
+import { SELECTOR_SIGNS, ANIMATION_SIGN, TRANSITION_SIGN, AT_SIGN, QUERY_COMPARISON_OPERATORS, QUERY_LOGICAL_OPERATORS, generateCSS, MasterCSS } from '@master/css';
+import { GROUP_TRIGGER_CHARACTER, SELECTOR_TRIGGER_CHARACTERS } from '../common.mjs';
+import getMainCompletionItems from './get-main-completion-items.mjs';
+import getValueCompletionItems from './get-value-completion-items.mjs';
+import getQueryCompletionItems from './get-query-completion-items.mjs';
+import { getCSSDataDocumentation } from './get-css-data-documentation.mjs';
+
+function querySyntaxCompletions(q = '', css = new MasterCSS()) {
+    const fields = q.split(' ');
+    let field = fields[fields.length - 1];
+    const triggerCharacter = q.charAt(q.length - 1);
+    const invoked = triggerCharacter === ' ' || field.length === 0;
+    if (invoked || field === GROUP_TRIGGER_CHARACTER || triggerCharacter === ';') {
+        return getMainCompletionItems(css);
+    }
+    const isGroup = field.startsWith(GROUP_TRIGGER_CHARACTER);
+    if (isGroup) {
+        const declarationSeparatorMatches = Array.from(field.matchAll(/;(?=(?:[^'"]|'[^']*'|"[^"]*")*$)/g));
+        if (declarationSeparatorMatches.length) {
+            field = field.slice(declarationSeparatorMatches[declarationSeparatorMatches.length - 1].index + 1);
+        } else {
+            field = field.slice(1);
+        }
+    }
+    const signs = css.definedRules.filter(({ definition })=>definition.sign).map(({ definition })=>definition.sign);
+    const keyMatch = field.match(new RegExp(`^[^${signs}'":\\s]+:`));
+    const atMatches = Array.from(field.matchAll(/@(?=(?:[^'"]|'[^']*'|"[^"]*")*$)/g));
+    const valueSeparatorMatch = field.match(/\|(?=(?:[^'"]|'[^']*'|"[^"]*")*$)/g);
+    const atInvoked = atMatches.findIndex(({ index })=>index !== 0) !== -1;
+    const firstColonIndex = keyMatch ? keyMatch[0].length - 1 : -1;
+    const selectorInvokedRegex = new RegExp(`[${SELECTOR_SIGNS.join('')}](?=(?:[^'"]|'[^']*'|"[^"]*")*$)`);
+    const key = keyMatch ? keyMatch[0].slice(0, firstColonIndex) : undefined;
+    const componentNames = Object.keys(css.config.components || {});
+    const utilityNames = Object.keys(css.config.utilities || {});
+    const isStyle = !!componentNames.find((eachStyleName)=>new RegExp(`^${eachStyleName}(?:\\b|_)`).test(field));
+    const isUtility = !!utilityNames.find((eachUtilityName)=>new RegExp(`^${eachUtilityName}(?:\\b|_)`).test(field));
+    // check by utilities and components
+    if (!isStyle && !isUtility) {
+        if (key === undefined && !valueSeparatorMatch) {
+            /**
+             * The server capability sets '@' '~' as the trigger characters for at and adjacent selectors,
+             * but these two characters are also the prefix symbols of `animation` and `transition`,
+             * and should be filtered to prevent hints all completions items.
+             * @example class="@"
+             * @example class="~"
+             */ if (field.startsWith(ANIMATION_SIGN) || field.startsWith(TRANSITION_SIGN)) {
+                return getMainCompletionItems(css).filter((completionItem)=>completionItem.label.startsWith(field)).map((completionItem)=>({
+                        ...completionItem,
+                        label: completionItem.label.slice(1)
+                    }));
+            }
+            return getMainCompletionItems(css);
+        }
+        if (!atInvoked && !selectorInvokedRegex.test(field.slice(firstColonIndex + 1))) {
+            if (field.startsWith(ANIMATION_SIGN) && firstColonIndex === -1) {
+                return getValueCompletionItems(css, 'animation');
+            } else if (field.startsWith(TRANSITION_SIGN) && firstColonIndex === -1) {
+                return getValueCompletionItems(css, 'transition');
+            } else if (key && firstColonIndex !== -1) {
+                return getValueCompletionItems(css, key);
+            }
+        }
+    }
+    /**
+     * Not support conditional btn:hover and group
+     */ if (isStyle || isGroup) return;
+    if (atInvoked && [
+        AT_SIGN,
+        ...QUERY_COMPARISON_OPERATORS,
+        ...QUERY_LOGICAL_OPERATORS
+    ].includes(triggerCharacter)) {
+        return getQueryCompletionItems(css, triggerCharacter, field);
+    }
+    if (!atInvoked && SELECTOR_TRIGGER_CHARACTERS.includes(triggerCharacter)) {
+        const pseudoElementCompletionItems = getPseudoElementCompletionItems(css, field);
+        if (field.endsWith('::')) {
+            /**
+             * Consider trigger characters and fix insertText.
+             * @incorrect class="text:center::" -> class="text:center::::after"
+             * @correct class="text:center::" -> class="text:center::after"
+             */ pseudoElementCompletionItems.forEach((completionItem)=>completionItem.insertText = completionItem.label.slice(2));
+            return pseudoElementCompletionItems;
+        } else {
+            const completionItems = getPseudoClassCompletionItems(css, field);
+            completionItems.push(...pseudoElementCompletionItems);
+            /**
+             * Consider trigger characters and fix insertText.
+             * @incorrect class="text:center:" -> class="text:center::active"
+             * @correct class="text:center:" -> class="text:center:active"
+             */ if (triggerCharacter === ':') {
+                completionItems.forEach((completionItem)=>completionItem.insertText = completionItem.label.slice(1));
+            } else {
+                completionItems.push({
+                    label: '.<class>',
+                    insertText: '.',
+                    documentation: getCSSDataDocumentation(undefined, {
+                        generatedCSS: generateCSS([
+                            field + '.class'
+                        ], css),
+                        docs: '/guide/syntax#selectors'
+                    }),
+                    kind: CompletionItemKind.Class
+                });
+            }
+            return completionItems;
+        }
+    }
+}
+
+export { querySyntaxCompletions as default };

package/dist/utils/regex.cjs

@@ -0,0 +1,5 @@
+'use strict';
+
+const instancePattern = /[^\s:]+:\w*\(?((?<!\\)["'`])((?:\\\1|(?:(?!\1))\S)*)((?<!\\)\1)\)?|[^\s"'`]+/g;
+
+exports.instancePattern = instancePattern;

package/dist/utils/regex.mjs

@@ -0,0 +1,3 @@
+const instancePattern = /[^\s:]+:\w*\(?((?<!\\)["'`])((?:\\\1|(?:(?!\1))\S)*)((?<!\\)\1)\)?|[^\s"'`]+/g;
+
+export { instancePattern };

package/dist/utils/sort-completion-items.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+/* localeCompare equals to the real vscode completion items sorting */ function sortCompletionItems(items) {
+    return items.sort((a, b)=>{
+        const sortTextA = a.sortText || a.label;
+        const sortTextB = b.sortText || b.label;
+        return sortTextA.localeCompare(sortTextB);
+    });
+}
+
+module.exports = sortCompletionItems;

package/dist/utils/sort-completion-items.d.ts

@@ -0,0 +1,2 @@
+import type { CompletionItem } from 'vscode-languageserver-protocol';
+export default function sortCompletionItems(items: CompletionItem[]): CompletionItem[];

package/dist/utils/sort-completion-items.mjs

@@ -0,0 +1,9 @@
+/* localeCompare equals to the real vscode completion items sorting */ function sortCompletionItems(items) {
+    return items.sort((a, b)=>{
+        const sortTextA = a.sortText || a.label;
+        const sortTextB = b.sortText || b.label;
+        return sortTextA.localeCompare(sortTextB);
+    });
+}
+
+export { sortCompletionItems as default };

package/package.json

@@ -1 +1 @@
-{"name":"@master/css-language-service","scripts":{"build":"techor pack --platform node --declare","dev":"pnpm run build --watch","type-check":"tsc --noEmit","lint":"eslint src"},"description":"Master CSS Language Service","author":"Aoyue Design LLC.","license":"MIT","dependencies":{"@babel/parser":"^7.22.7","@master/css":"^2.0.0-rc.5","color-convert":"^2.0.1","js-beautify":"^1.14.7"},"devDependencies":{"@types/color-convert":"^2.0.0","vscode-css-languageservice":"^6.2.5","vscode-languageserver-types":"^3.17.3"},"main":"./dist/index.bundle.js","types":"./dist/index.d.ts","exports":{".":"./dist/index.bundle.js","./settings":"./dist/settings.bundle.js"},"typesVersions":{"*":{"./":["./dist/index.d.ts"],"./settings":["./dist/settings.d.ts"]}},"files":["dist"],"publishConfig":{"access":"public"},"version":"2.0.0-rc.5"}
+{"name":"@master/css-language-service","type":"module","scripts":{"build":"techor build \"src/**/*.ts\"","dev":"pnpm build --watch","type-check":"tsc --noEmit","lint":"eslint","test":"vitest"},"description":"Master CSS Language Service","author":"Aoyue Design LLC.","license":"MIT","repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/language-service"},"dependencies":{"@babel/parser":"^7.26.3","@master/css":"^2.0.0-rc.50","@techor/extend":"^3.1.7","color-convert":"^2.0.1","color-rgba":"^3.0.0","color-space":"^2.0.1","culori":"^4.0.1","js-beautify":"^1.15.1","lodash.escaperegexp":"^4.1.2","minimatch":"^10.0.1","pex-color":"^2.2.0","vscode-css-languageservice":"^6.3.2","vscode-languageserver-protocol":"^3.17.5","vscode-languageserver-textdocument":"^1.0.12"},"devDependencies":{"@types/chroma-js":"^2.4.5","@types/color-convert":"^2.0.4","@types/color-rgba":"^2.1.3","@types/culori":"^2.1.1","@types/lodash.escaperegexp":"^4.1.9","@types/vscode":"^1.96.0","shared":"^2.0.0-rc.50","vscode-languageserver":"^9.0.1"},"sideEffects":false,"main":"./dist/index.cjs","module":"./dist/index.mjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"}},"files":["dist"],"publishConfig":{"access":"public","provenance":true},"version":"2.0.0-rc.50"}

package/dist/constant.d.ts

@@ -1,33 +0,0 @@
-import type { CompletionItem } from 'vscode-languageserver-types';
-interface MasterCssKey {
-    key: string[];
-    colored: boolean;
-    values: Array<string | CompletionItem>;
-}
-export declare const masterCssSelectors: (string | {
-    label: string;
-    kind: number;
-})[];
-export declare const masterCssElements: (string | {
-    label: string;
-    kind: number;
-})[];
-export declare const masterCssMedia: (string | {
-    label: string;
-    kind: number;
-})[];
-export declare const masterCssOtherKeys: string[];
-export declare const masterCssCommonValues: (string | {
-    label: string;
-    kind: number;
-})[];
-export declare const commonUnit: any;
-export declare const masterCssKeyValues: MasterCssKey[];
-export declare const masterCssType: {
-    type: string;
-    values: (string | {
-        label: string;
-        kind: number;
-    })[];
-}[];
-export {};