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

package/dist/features/edit-syntax-colors.mjs

@@ -0,0 +1,17 @@
+import convertColorByToken from '../utils/convert-color-token.mjs';
+
+function editSyntaxColors(document, color, range) {
+    const colorPresentations = [];
+    const selectedColorToken = document.getText(range);
+    const targetColorToken = convertColorByToken(color, selectedColorToken, this.css);
+    if (targetColorToken) colorPresentations.push({
+        label: targetColorToken,
+        textEdit: {
+            range,
+            newText: targetColorToken
+        }
+    });
+    return colorPresentations;
+}
+
+export { editSyntaxColors as default };

package/dist/features/inspect-syntax.cjs

@@ -0,0 +1,70 @@
+'use strict';
+
+var getCssDataDocumentation = require('../utils/get-css-data-documentation.cjs');
+var css = require('@master/css');
+var cssDataProvider = require('../utils/css-data-provider.cjs');
+var getUtilityInfo = require('../utils/get-utility-info.cjs');
+
+function inspectSyntax(document, position) {
+    const classPosition = this.getClassPosition(document, position);
+    if (!classPosition) return;
+    const { token } = classPosition;
+    const range = {
+        start: document.positionAt(classPosition.range.start),
+        end: document.positionAt(classPosition.range.end)
+    };
+    const componentClasses = this.css.components[token];
+    if (componentClasses) {
+        const documentation = getCssDataDocumentation.getCSSDataDocumentation({}, {
+            generatedCSS: css.generateCSS([
+                token
+            ], this.css),
+            docs: '/guide/components'
+        });
+        if (documentation) {
+            return {
+                contents: {
+                    kind: documentation.kind,
+                    value: `(style) ` + componentClasses.join(' ') + '\n' + documentation.value
+                }
+            };
+        }
+    } else {
+        const rules = this.css.generate(token);
+        const rule = rules[0];
+        if (rule) {
+            if (rule.type === css.SyntaxRuleType.Utility) {
+                const { data, docs } = getUtilityInfo(rule.registeredSyntax, this.css);
+                const documentation = getCssDataDocumentation.getCSSDataDocumentation(data, {
+                    generatedCSS: css.generateCSS([
+                        token
+                    ], this.css),
+                    docs
+                });
+                if (documentation) {
+                    return {
+                        contents: documentation,
+                        range
+                    };
+                }
+            } else {
+                const nativeProperties = cssDataProvider.provideProperties();
+                const nativeCSSPropertyData = nativeProperties.find(({ name })=>name === rule.id);
+                const documentation = getCssDataDocumentation.getCSSDataDocumentation(nativeCSSPropertyData, {
+                    generatedCSS: css.generateCSS([
+                        token
+                    ], this.css),
+                    docs: '/reference/' + (css.isCoreRule(rule.id) && rule.id)
+                });
+                if (documentation) {
+                    return {
+                        contents: documentation,
+                        range
+                    };
+                }
+            }
+        }
+    }
+}
+
+module.exports = inspectSyntax;

package/dist/features/inspect-syntax.d.ts

@@ -0,0 +1,4 @@
+import type { Hover, HoverParams } from 'vscode-languageserver-protocol';
+import type CSSLanguageService from '../core';
+import type { TextDocument } from 'vscode-languageserver-textdocument';
+export default function inspectSyntax(this: CSSLanguageService, document: TextDocument, position: HoverParams['position']): Hover | undefined;

package/dist/features/inspect-syntax.mjs

@@ -0,0 +1,68 @@
+import { getCSSDataDocumentation } from '../utils/get-css-data-documentation.mjs';
+import { generateCSS, SyntaxRuleType, isCoreRule } from '@master/css';
+import cssDataProvider from '../utils/css-data-provider.mjs';
+import getUtilityInfo from '../utils/get-utility-info.mjs';
+
+function inspectSyntax(document, position) {
+    const classPosition = this.getClassPosition(document, position);
+    if (!classPosition) return;
+    const { token } = classPosition;
+    const range = {
+        start: document.positionAt(classPosition.range.start),
+        end: document.positionAt(classPosition.range.end)
+    };
+    const componentClasses = this.css.components[token];
+    if (componentClasses) {
+        const documentation = getCSSDataDocumentation({}, {
+            generatedCSS: generateCSS([
+                token
+            ], this.css),
+            docs: '/guide/components'
+        });
+        if (documentation) {
+            return {
+                contents: {
+                    kind: documentation.kind,
+                    value: `(style) ` + componentClasses.join(' ') + '\n' + documentation.value
+                }
+            };
+        }
+    } else {
+        const rules = this.css.generate(token);
+        const rule = rules[0];
+        if (rule) {
+            if (rule.type === SyntaxRuleType.Utility) {
+                const { data, docs } = getUtilityInfo(rule.registeredSyntax, this.css);
+                const documentation = getCSSDataDocumentation(data, {
+                    generatedCSS: generateCSS([
+                        token
+                    ], this.css),
+                    docs
+                });
+                if (documentation) {
+                    return {
+                        contents: documentation,
+                        range
+                    };
+                }
+            } else {
+                const nativeProperties = cssDataProvider.provideProperties();
+                const nativeCSSPropertyData = nativeProperties.find(({ name })=>name === rule.id);
+                const documentation = getCSSDataDocumentation(nativeCSSPropertyData, {
+                    generatedCSS: generateCSS([
+                        token
+                    ], this.css),
+                    docs: '/reference/' + (isCoreRule(rule.id) && rule.id)
+                });
+                if (documentation) {
+                    return {
+                        contents: documentation,
+                        range
+                    };
+                }
+            }
+        }
+    }
+}
+
+export { inspectSyntax as default };

package/dist/features/render-syntax-colors.cjs

@@ -0,0 +1,88 @@
+'use strict';
+
+var regex = require('../utils/regex.cjs');
+var culori = require('culori');
+var css = require('@master/css');
+
+async function renderSyntaxColors(document) {
+    const text = document.getText() ?? '';
+    const colorInformations = [];
+    for (const instanceMatch of text.matchAll(regex.instancePattern)){
+        if (instanceMatch.index === undefined) break;
+        const instanceStartIndex = instanceMatch.index;
+        const syntax = instanceMatch[0];
+        const rule = this.css.generate(syntax)[0];
+        if (rule && rule.type !== css.SyntaxRuleType.Utility) {
+            const keyTokenLength = rule.keyToken?.length ?? 0;
+            let currentLength = 0;
+            const resolveValueComponent = (valueComponent)=>{
+                if (valueComponent.text === undefined) return; // text is always existing, just for type
+                const startOffset = instanceStartIndex + keyTokenLength + currentLength;
+                // TODO: check number mt:30
+                const valueComponentTokenLength = valueComponent.token.length;
+                let color;
+                switch(valueComponent.type){
+                    case 'function':
+                        if ([
+                            'rgb',
+                            'rgba',
+                            'hsl',
+                            'hsla',
+                            'hwb',
+                            'lab',
+                            'lch',
+                            'oklab',
+                            'oklch',
+                            'color'
+                        ].includes(valueComponent.name)) {
+                            color = culori.parse(valueComponent.text);
+                        } else if (valueComponent.children.length) {
+                            currentLength += valueComponent.name.length + 1 // function name + '('
+                            ;
+                            valueComponent.children.forEach(resolveValueComponent);
+                        }
+                        break;
+                    case 'variable':
+                        if (valueComponent.variable?.type === 'color') {
+                            color = culori.parse(valueComponent.text);
+                        }
+                        break;
+                    case 'string':
+                        if (valueComponent.text !== '#' && valueComponent.text?.startsWith('#')) {
+                            color = culori.parse(valueComponent.text);
+                        }
+                        break;
+                }
+                // check if rgba is valid
+                if (color) {
+                    const rgbaColor = color.mode !== 'rgb' ? culori.converter('rgb')(color) : color;
+                    colorInformations.push({
+                        range: {
+                            start: document.positionAt(startOffset),
+                            end: document.positionAt(startOffset + valueComponentTokenLength)
+                        },
+                        color: {
+                            red: rgbaColor.r,
+                            green: rgbaColor.g,
+                            blue: rgbaColor.b,
+                            alpha: rgbaColor.alpha === undefined ? 1 : rgbaColor.alpha
+                        }
+                    });
+                }
+                currentLength += valueComponentTokenLength || 0;
+            };
+            rule.valueComponents.forEach(resolveValueComponent);
+        }
+    }
+    const colorIndexSet = new Set();
+    return colorInformations.filter((item)=>{
+        if (colorIndexSet.has(item.range.start)) {
+            return false;
+        } else {
+            colorIndexSet.add(item.range.start);
+            return true;
+        }
+    });
+}
+
+module.exports = renderSyntaxColors;

package/dist/features/render-syntax-colors.d.ts

@@ -0,0 +1,4 @@
+import type { ColorInformation } from 'vscode-languageserver-protocol';
+import CSSLanguageService from '../core';
+import type { TextDocument } from 'vscode-languageserver-textdocument';
+export default function renderSyntaxColors(this: CSSLanguageService, document: TextDocument): Promise<ColorInformation[] | undefined>;

package/dist/features/render-syntax-colors.mjs

@@ -0,0 +1,86 @@
+import { instancePattern } from '../utils/regex.mjs';
+import { parse, converter } from 'culori';
+import { SyntaxRuleType } from '@master/css';
+
+async function renderSyntaxColors(document) {
+    const text = document.getText() ?? '';
+    const colorInformations = [];
+    for (const instanceMatch of text.matchAll(instancePattern)){
+        if (instanceMatch.index === undefined) break;
+        const instanceStartIndex = instanceMatch.index;
+        const syntax = instanceMatch[0];
+        const rule = this.css.generate(syntax)[0];
+        if (rule && rule.type !== SyntaxRuleType.Utility) {
+            const keyTokenLength = rule.keyToken?.length ?? 0;
+            let currentLength = 0;
+            const resolveValueComponent = (valueComponent)=>{
+                if (valueComponent.text === undefined) return; // text is always existing, just for type
+                const startOffset = instanceStartIndex + keyTokenLength + currentLength;
+                // TODO: check number mt:30
+                const valueComponentTokenLength = valueComponent.token.length;
+                let color;
+                switch(valueComponent.type){
+                    case 'function':
+                        if ([
+                            'rgb',
+                            'rgba',
+                            'hsl',
+                            'hsla',
+                            'hwb',
+                            'lab',
+                            'lch',
+                            'oklab',
+                            'oklch',
+                            'color'
+                        ].includes(valueComponent.name)) {
+                            color = parse(valueComponent.text);
+                        } else if (valueComponent.children.length) {
+                            currentLength += valueComponent.name.length + 1 // function name + '('
+                            ;
+                            valueComponent.children.forEach(resolveValueComponent);
+                        }
+                        break;
+                    case 'variable':
+                        if (valueComponent.variable?.type === 'color') {
+                            color = parse(valueComponent.text);
+                        }
+                        break;
+                    case 'string':
+                        if (valueComponent.text !== '#' && valueComponent.text?.startsWith('#')) {
+                            color = parse(valueComponent.text);
+                        }
+                        break;
+                }
+                // check if rgba is valid
+                if (color) {
+                    const rgbaColor = color.mode !== 'rgb' ? converter('rgb')(color) : color;
+                    colorInformations.push({
+                        range: {
+                            start: document.positionAt(startOffset),
+                            end: document.positionAt(startOffset + valueComponentTokenLength)
+                        },
+                        color: {
+                            red: rgbaColor.r,
+                            green: rgbaColor.g,
+                            blue: rgbaColor.b,
+                            alpha: rgbaColor.alpha === undefined ? 1 : rgbaColor.alpha
+                        }
+                    });
+                }
+                currentLength += valueComponentTokenLength || 0;
+            };
+            rule.valueComponents.forEach(resolveValueComponent);
+        }
+    }
+    const colorIndexSet = new Set();
+    return colorInformations.filter((item)=>{
+        if (colorIndexSet.has(item.range.start)) {
+            return false;
+        } else {
+            colorIndexSet.add(item.range.start);
+            return true;
+        }
+    });
+}
+
+export { renderSyntaxColors as default };

package/dist/features/suggest-syntax.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+var querySyntaxCompletions = require('../utils/query-syntax-completions.cjs');
+
+function suggestSyntax(document, position, context) {
+    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);
+    }
+// todo
+// else if (isInstance === true && checkConfigColorsBlock(document, position) === true) {
+//     return getColorCompletionItems(this.css)
+// }
+}
+
+module.exports = suggestSyntax;

package/dist/features/suggest-syntax.d.ts

@@ -0,0 +1,4 @@
+import type { CompletionItem, CompletionParams } from 'vscode-languageserver-protocol';
+import type { TextDocument } from 'vscode-languageserver-textdocument';
+import CSSLanguageService from '../core';
+export default function suggestSyntax(this: CSSLanguageService, document: TextDocument, position: CompletionParams['position'], context: CompletionParams['context']): CompletionItem[] | undefined;

package/dist/features/suggest-syntax.mjs

@@ -0,0 +1,18 @@
+import querySyntaxCompletions from '../utils/query-syntax-completions.mjs';
+
+function suggestSyntax(document, position, context) {
+    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);
+    }
+// todo
+// else if (isInstance === true && checkConfigColorsBlock(document, position) === true) {
+//     return getColorCompletionItems(this.css)
+// }
+}
+
+export { suggestSyntax as default };

package/dist/index.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('./core.cjs');
+var settings = require('./settings.cjs');
+var common = require('./common.cjs');
+var inspectSyntax = require('./features/inspect-syntax.cjs');
+var renderSyntaxColors = require('./features/render-syntax-colors.cjs');
+var editSyntaxColors = require('./features/edit-syntax-colors.cjs');
+var suggestSyntax = require('./features/suggest-syntax.cjs');
+
+
+
+exports.CSSLanguageService = core;
+exports.default = core;
+exports.settings = settings;
+exports.AT_TRIGGER_CHARACTER = common.AT_TRIGGER_CHARACTER;
+exports.DECLARATION_SEPARATOR_TRIGGER_CHARACTER = common.DECLARATION_SEPARATOR_TRIGGER_CHARACTER;
+exports.GROUP_TRIGGER_CHARACTER = common.GROUP_TRIGGER_CHARACTER;
+exports.INVOKED_TRIGGER_CHARACTERS = common.INVOKED_TRIGGER_CHARACTERS;
+exports.QUERY_TRIGGER_CHARACTERS = common.QUERY_TRIGGER_CHARACTERS;
+exports.SELECTOR_TRIGGER_CHARACTERS = common.SELECTOR_TRIGGER_CHARACTERS;
+exports.SERVER_CAPABILITIES = common.SERVER_CAPABILITIES;
+exports.VALUE_TRIGGER_CHARACTERS = common.VALUE_TRIGGER_CHARACTERS;
+exports.inspectSyntax = inspectSyntax;
+exports.renderSyntaxColors = renderSyntaxColors;
+exports.editSyntaxColors = editSyntaxColors;
+exports.suggestSyntax = suggestSyntax;

package/dist/index.d.ts

@@ -1,5 +1,7 @@
-export { getDocumentColors, getColorValue, getColorPresentation } from './providers/color';
-export { checkConfigColorsBlock, getLastInstance, getConfigColorsCompletionItem, getCompletionItem, getReturnItem } from './providers/completion';
-export { doHover } from './providers/hover';
-export { positionCheck } from './position-check';
-export { settings } from './settings';
+export { default, default as CSSLanguageService } from './core';
+export { default as settings, type Settings } from './settings';
+export * from './common';
+export { default as inspectSyntax } from './features/inspect-syntax';
+export { default as renderSyntaxColors } from './features/render-syntax-colors';
+export { default as editSyntaxColors } from './features/edit-syntax-colors';
+export { default as suggestSyntax } from './features/suggest-syntax';

package/dist/index.mjs

@@ -0,0 +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';

package/dist/settings.cjs

@@ -0,0 +1,84 @@
+'use strict';
+
+var css = require('@master/css');
+
+/**
+ * @example styles https://regex101.com/r/HLPdsw/1
+ **/ const settings = {
+    includedLanguages: [
+        "html",
+        "php",
+        "javascript",
+        "typescript",
+        "javascriptreact",
+        "typescriptreact",
+        "vue",
+        "svelte",
+        "rust",
+        "astro",
+        "markdown",
+        "mdx",
+        "astro"
+    ],
+    /**
+     * @example <div class="a b">
+     * @example <div className="a b">
+     */ classAttributes: css.CLASS_ATTRIBUTES,
+    /**
+     * @example <div class={active ? 'a' : 'b'}>
+     * @example <div className={active ? 'a' : 'b'}>
+     */ classAttributeBindings: {
+        "className": [
+            "{",
+            "}"
+        ],
+        "class": [
+            "{",
+            "}"
+        ],
+        "class:list": [
+            "{",
+            "}"
+        ],
+        ":class": [
+            "\"",
+            "\""
+        ],
+        "v-bind:class": [
+            "\"",
+            "\""
+        ],
+        "[class]": [
+            "\"",
+            "\""
+        ],
+        "[className]": [
+            "\"",
+            "\""
+        ],
+        "[ngClass]": [
+            "\"",
+            "\""
+        ]
+    },
+    /**
+     * @example const components = 'a b'
+     * @example { components: { btn: 'a b' } }
+     */ classDeclarations: css.CLASS_DECLARATIONS,
+    /**
+     * @example clsx('a b')
+     * @example styled`a b`
+     * @example .classList.add('a')
+     */ classFunctions: css.CLASS_FUNCTIONS,
+    exclude: [
+        "**/.git/**",
+        "**/node_modules/**",
+        "**/.hg/**"
+    ],
+    suggestSyntax: true,
+    inspectSyntax: true,
+    renderSyntaxColors: true,
+    editSyntaxColors: true
+};
+
+module.exports = settings;

package/dist/settings.d.ts

@@ -1,9 +1,19 @@
-export declare const settings: {
-    languages: string[];
-    classMatch: string[];
-    exclude: string[];
-    suggestions: boolean;
-    inspect: boolean;
-    previewColors: boolean;
-    config: string;
-};
+import { Config } from '@master/css';
+/**
+ * @example styles https://regex101.com/r/HLPdsw/1
+ **/
+declare const settings: Settings;
+export default settings;
+export declare interface Settings {
+    includedLanguages?: string[];
+    classAttributes?: string[];
+    classFunctions?: string[];
+    classDeclarations?: string[];
+    classAttributeBindings?: Record<string, [string, string] | false>;
+    exclude?: string[];
+    config?: Config;
+    suggestSyntax?: boolean;
+    inspectSyntax?: boolean;
+    renderSyntaxColors?: boolean;
+    editSyntaxColors?: boolean;
+}

package/dist/settings.mjs

@@ -0,0 +1,82 @@
+import { CLASS_ATTRIBUTES, CLASS_DECLARATIONS, CLASS_FUNCTIONS } from '@master/css';
+
+/**
+ * @example styles https://regex101.com/r/HLPdsw/1
+ **/ const settings = {
+    includedLanguages: [
+        "html",
+        "php",
+        "javascript",
+        "typescript",
+        "javascriptreact",
+        "typescriptreact",
+        "vue",
+        "svelte",
+        "rust",
+        "astro",
+        "markdown",
+        "mdx",
+        "astro"
+    ],
+    /**
+     * @example <div class="a b">
+     * @example <div className="a b">
+     */ classAttributes: CLASS_ATTRIBUTES,
+    /**
+     * @example <div class={active ? 'a' : 'b'}>
+     * @example <div className={active ? 'a' : 'b'}>
+     */ classAttributeBindings: {
+        "className": [
+            "{",
+            "}"
+        ],
+        "class": [
+            "{",
+            "}"
+        ],
+        "class:list": [
+            "{",
+            "}"
+        ],
+        ":class": [
+            "\"",
+            "\""
+        ],
+        "v-bind:class": [
+            "\"",
+            "\""
+        ],
+        "[class]": [
+            "\"",
+            "\""
+        ],
+        "[className]": [
+            "\"",
+            "\""
+        ],
+        "[ngClass]": [
+            "\"",
+            "\""
+        ]
+    },
+    /**
+     * @example const components = 'a b'
+     * @example { components: { btn: 'a b' } }
+     */ classDeclarations: CLASS_DECLARATIONS,
+    /**
+     * @example clsx('a b')
+     * @example styled`a b`
+     * @example .classList.add('a')
+     */ classFunctions: CLASS_FUNCTIONS,
+    exclude: [
+        "**/.git/**",
+        "**/node_modules/**",
+        "**/.hg/**"
+    ],
+    suggestSyntax: true,
+    inspectSyntax: true,
+    renderSyntaxColors: true,
+    editSyntaxColors: true
+};
+
+export { settings as default };

package/dist/utils/beautify-css.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var beautifyCss = require('js-beautify/js/lib/beautify-css');
+
+// @ts-expect-error
+function beautifyCSS(text) {
+    return beautifyCss.css_beautify(text, {
+        newline_between_rules: false,
+        indent_size: 2
+    });
+}
+
+module.exports = beautifyCSS;

package/dist/utils/beautify-css.d.ts

@@ -0,0 +1 @@
+export default function beautifyCSS(text: string): any;

package/dist/utils/beautify-css.mjs

@@ -0,0 +1,11 @@
+import { css_beautify } from 'js-beautify/js/lib/beautify-css';
+
+// @ts-expect-error
+function beautifyCSS(text) {
+    return css_beautify(text, {
+        newline_between_rules: false,
+        indent_size: 2
+    });
+}
+
+export { beautifyCSS as default };