@master/css-language-service 2.0.0-rc.26 → 2.0.0-rc.28

package/dist/features/inspect-syntax.mjs

@@ -0,0 +1,68 @@
+import { getCSSDataDocumentation } from '../utils/get-css-data-documentation.mjs';
+import { generateCSS, Layer, 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 styleClasses = this.css.styles[token];
+    if (styleClasses) {
+        const documentation = getCSSDataDocumentation({}, {
+            generatedCSS: generateCSS([
+                token
+            ], this.css),
+            docs: 'styles'
+        });
+        if (documentation) {
+            return {
+                contents: {
+                    kind: documentation.kind,
+                    value: `(style) ` + styleClasses.join(' ') + '\n' + documentation.value
+                }
+            };
+        }
+    } else {
+        const rules = this.css.generate(token);
+        const rule = rules[0];
+        if (rule) {
+            if (rule.layer === Layer.Utility) {
+                const { data, docs } = getUtilityInfo(rule.RegisteredRule, 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: 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.layer !== css.Layer.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 { Layer } 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.layer !== Layer.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

@@ -1,21 +1,29 @@
 'use strict';
 
-var color = require('./providers/color.cjs');
-var completion = require('./providers/completion.cjs');
-var hover = require('./providers/hover.cjs');
-var positionCheck = require('./position-check.cjs');
+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.getColorPresentation = color.getColorPresentation;
-exports.getColorValue = color.getColorValue;
-exports.getDocumentColors = color.getDocumentColors;
-exports.checkConfigColorsBlock = completion.checkConfigColorsBlock;
-exports.getCompletionItem = completion.getCompletionItem;
-exports.getConfigColorsCompletionItem = completion.getConfigColorsCompletionItem;
-exports.getLastInstance = completion.getLastInstance;
-exports.getReturnItem = completion.getReturnItem;
-exports.doHover = hover.doHover;
-exports.positionCheck = positionCheck.positionCheck;
-exports.settings = settings.settings;
+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 * from './providers/color';
-export * from './providers/completion';
-export * from './providers/hover';
-export * from './position-check';
-export * 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

@@ -1,5 +1,7 @@
-export { getColorPresentation, getColorValue, getDocumentColors } from './providers/color.mjs';
-export { checkConfigColorsBlock, getCompletionItem, getConfigColorsCompletionItem, getLastInstance, getReturnItem } from './providers/completion.mjs';
-export { doHover } from './providers/hover.mjs';
-export { positionCheck } from './position-check.mjs';
-export { settings } from './settings.mjs';
+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

@@ -1,37 +1,138 @@
 'use strict';
 
-const settings = {
-    languages: [
-        'html',
-        'php',
-        'javascript',
-        'typescript',
-        'javascriptreact',
-        'typescriptreact',
-        'vue',
-        'svelte',
-        'rust'
+/* eslint-disable quotes */ /**
+ * @example styles https://regex101.com/r/HLPdsw/1
+ **/ const settings = {
+    includedLanguages: [
+        "html",
+        "php",
+        "javascript",
+        "typescript",
+        "javascriptreact",
+        "typescriptreact",
+        "vue",
+        "svelte",
+        "rust",
+        "astro",
+        "markdown",
+        "mdx",
+        "astro"
     ],
-    classMatch: [
-        '(class(?:Name)?\\s?=\\s?)((?:"[^"]+")|(?:\'[^\']+\')|(?:`[^`]+`))',
-        '(class(?:Name)?={)([^}]*)}',
-        '(?:(\\$|(?:(?:element|el|style)\\.[^\\s.`]+)`)([^`]+)`)',
-        '(style\\.(?:.*)\\()([^)]*)\\)',
-        '(classList.(?:add|remove|replace|replace|toggle)\\()([^)]*)\\)',
-        '(template\\s*\\:\\s*)((?:"[^"]+")|(?:\'[^\']+\')|(?:`[^`]+`))',
-        '(?<=styles\\s*(?:=|:)\\s*{[\\s\\S]*)([^\']*)(\'[^\']*\')',
-        '(?<=styles\\s*(?:=|:)\\s*{[\\s\\S]*)([^"]*)("[^"]*")',
-        '(?<=styles\\s*(?:=|:)\\s*{[\\s\\S]*)([^`]*)(`[^`]*`)'
+    classStrings: [
+        [
+            "\\sclass=",
+            "\""
+        ],
+        [
+            "\\sclass=",
+            "'"
+        ],
+        [
+            "\\sclassName=",
+            "\""
+        ],
+        [
+            "\\sclassName=",
+            "'"
+        ],
+        [
+            "\\sstyled(?:\\s+)?(?:\\.\\w+)?",
+            "`"
+        ],
+        [
+            "\\sstyles(?:\\s+)?(?::|=)(?:\\s+)?",
+            "\""
+        ],
+        [
+            "\\sstyles(?:\\s+)?(?::|=)(?:\\s+)?",
+            "'"
+        ],
+        [
+            "\\sstyles(?:\\s+)?(?::|=)(?:\\s+)?",
+            "`"
+        ]
+    ],
+    classAssignments: [
+        [
+            "\\sclassName=",
+            "{",
+            "}"
+        ],
+        [
+            "\\sclass=",
+            "{",
+            "}"
+        ],
+        [
+            "\\sclass:list=",
+            "{",
+            "}"
+        ],
+        [
+            "\\sstyles(?:\\s+)?(?::|=)(?:\\s+)?",
+            "{",
+            "}"
+        ],
+        [
+            "\\s:class=",
+            "\"",
+            "\""
+        ],
+        [
+            "\\sv-bind:class=",
+            "\"",
+            "\""
+        ],
+        [
+            "\\s[class]=",
+            "\"",
+            "\""
+        ],
+        [
+            "\\s[className]=",
+            "\"",
+            "\""
+        ],
+        [
+            "\\s[ngClass]=",
+            "\"",
+            "\""
+        ],
+        [
+            "\\sclsx",
+            "(",
+            ")"
+        ],
+        [
+            "\\scva",
+            "(",
+            ")"
+        ],
+        [
+            "\\.class",
+            "(",
+            ")"
+        ],
+        [
+            "\\sstyled(?:\\s+)?(?:\\.\\w+)?",
+            "(",
+            ")"
+        ],
+        [
+            "\\.classList(?:\\s+)?(?:\\.(add|remove|toggle|replace))",
+            "(",
+            ")"
+        ]
     ],
     exclude: [
-        '**/.git/**',
-        '**/node_modules/**',
-        '**/.hg/**'
+        "**/.git/**",
+        "**/node_modules/**",
+        "**/.hg/**"
     ],
-    suggestions: true,
-    inspect: true,
-    previewColors: true,
-    config: 'master.css'
+    suggestSyntax: true,
+    inspectSyntax: true,
+    renderSyntaxColors: true,
+    editSyntaxColors: true
 };
 
-exports.settings = settings;
+module.exports = settings;

package/dist/settings.d.ts

@@ -1,9 +1,17 @@
-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 type Settings = {
+    includedLanguages?: string[];
+    classStrings?: [string, string][];
+    classAssignments?: [string, string, string][];
+    exclude?: string[];
+    config?: Config;
+    suggestSyntax?: boolean;
+    inspectSyntax?: boolean;
+    renderSyntaxColors?: boolean;
+    editSyntaxColors?: boolean;
 };