@master/css-language-service 2.0.0-rc.25 → 2.0.0-rc.27

package/dist/settings.mjs

@@ -1,35 +1,136 @@
-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
 };
 
-export { settings };
+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 };

package/dist/utils/convert-color-space.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+var culori = require('culori');
+
+function convertColorSpace(rgb, targetSpace) {
+    const alphaUsed = rgb.alpha !== 1;
+    const alphaToken = alphaUsed ? `/${rgb.alpha}` : '';
+    if (rgb.r === 0 && rgb.g === 0 && rgb.b === 0) return 'black' + alphaToken;
+    if (rgb.r === 1 && rgb.g === 1 && rgb.b === 1) return 'white' + alphaToken;
+    switch(targetSpace){
+        case 'hex':
+            return alphaUsed ? culori.serializeHex8(rgb) : culori.serializeHex(rgb);
+        case 'rgba':
+        case 'rgb':
+            return `rgb(${Math.round(rgb.r * 255)}|${Math.round(rgb.g * 255)}|${Math.round(rgb.b * 255)}${alphaToken})`;
+        case 'hsla':
+        case 'hsl':
+            const hsl = culori.modeHsl.fromMode.rgb(rgb);
+            return `hsl(${Math.round(hsl.h || 0)}|${Math.round(hsl.s * 100)}%|${Math.round(hsl.l * 100)}%${alphaToken})`;
+        case 'hwb':
+            const hwb = culori.modeHwb.fromMode.rgb(rgb);
+            return `hwb(${Math.round(hwb.h || 0)}|${Math.round(hwb.w * 100)}%|${Math.round(hwb.b * 100)}%${alphaToken})`;
+        case 'lab':
+            const lab = culori.modeLab.fromMode.rgb(rgb);
+            return `lab(${Math.round(lab.l)}%|${Math.round(lab.a)}|${Math.round(lab.b || 0)}${alphaToken})`;
+        case 'lch':
+            const lch = culori.modeLch.fromMode.rgb(rgb);
+            return `lch(${Math.round(lch.l)}%|${Math.round(lch.c)}|${Math.round(lch.h || 0)}${alphaToken})`;
+        case 'oklab':
+            const oklab = culori.modeOklab.fromMode.rgb(rgb);
+            return `oklab(${Math.round(oklab.l * 100)}%|${oklab.a.toFixed(4)}|${oklab.b.toFixed(4)}${alphaToken})`;
+        case 'oklch':
+            const oklch = culori.modeOklch.fromMode.rgb(rgb);
+            return `oklch(${Math.round(oklch.l * 100)}%|${oklch.c.toFixed(4)}|${Math.round(oklch.h || 0)}${alphaToken})`;
+    }
+    // color()
+    return culori.formatCss(rgb).replace(' / ', '/').replace(' ', '|');
+}
+
+module.exports = convertColorSpace;

package/dist/utils/convert-color-space.d.ts

@@ -0,0 +1,2 @@
+import { type Rgb } from 'culori';
+export default function convertColorSpace(rgb: Rgb, targetSpace: any): string | undefined;

package/dist/utils/convert-color-space.mjs

@@ -0,0 +1,38 @@
+import { modeOklch, modeOklab, modeLch, modeLab, modeHwb, modeHsl, serializeHex8, serializeHex, formatCss } from 'culori';
+
+function convertColorSpace(rgb, targetSpace) {
+    const alphaUsed = rgb.alpha !== 1;
+    const alphaToken = alphaUsed ? `/${rgb.alpha}` : '';
+    if (rgb.r === 0 && rgb.g === 0 && rgb.b === 0) return 'black' + alphaToken;
+    if (rgb.r === 1 && rgb.g === 1 && rgb.b === 1) return 'white' + alphaToken;
+    switch(targetSpace){
+        case 'hex':
+            return alphaUsed ? serializeHex8(rgb) : serializeHex(rgb);
+        case 'rgba':
+        case 'rgb':
+            return `rgb(${Math.round(rgb.r * 255)}|${Math.round(rgb.g * 255)}|${Math.round(rgb.b * 255)}${alphaToken})`;
+        case 'hsla':
+        case 'hsl':
+            const hsl = modeHsl.fromMode.rgb(rgb);
+            return `hsl(${Math.round(hsl.h || 0)}|${Math.round(hsl.s * 100)}%|${Math.round(hsl.l * 100)}%${alphaToken})`;
+        case 'hwb':
+            const hwb = modeHwb.fromMode.rgb(rgb);
+            return `hwb(${Math.round(hwb.h || 0)}|${Math.round(hwb.w * 100)}%|${Math.round(hwb.b * 100)}%${alphaToken})`;
+        case 'lab':
+            const lab = modeLab.fromMode.rgb(rgb);
+            return `lab(${Math.round(lab.l)}%|${Math.round(lab.a)}|${Math.round(lab.b || 0)}${alphaToken})`;
+        case 'lch':
+            const lch = modeLch.fromMode.rgb(rgb);
+            return `lch(${Math.round(lch.l)}%|${Math.round(lch.c)}|${Math.round(lch.h || 0)}${alphaToken})`;
+        case 'oklab':
+            const oklab = modeOklab.fromMode.rgb(rgb);
+            return `oklab(${Math.round(oklab.l * 100)}%|${oklab.a.toFixed(4)}|${oklab.b.toFixed(4)}${alphaToken})`;
+        case 'oklch':
+            const oklch = modeOklch.fromMode.rgb(rgb);
+            return `oklch(${Math.round(oklch.l * 100)}%|${oklch.c.toFixed(4)}|${Math.round(oklch.h || 0)}${alphaToken})`;
+    }
+    // color()
+    return formatCss(rgb).replace(' / ', '/').replace(' ', '|');
+}
+
+export { convertColorSpace as default };

package/dist/utils/convert-color-token.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var convertColorSpace = require('./convert-color-space.cjs');
+
+function convertColorByToken(color, colorToken, css) {
+    const valueComponent = css.generate('color:' + colorToken)[0]?.valueComponents[0];
+    let outputColorSpace = 'hex';
+    switch(valueComponent?.type){
+        case 'function':
+            outputColorSpace = valueComponent.name;
+            break;
+        case 'variable':
+            outputColorSpace = valueComponent.variable?.space;
+            break;
+        case 'string':
+            outputColorSpace = 'hex';
+            break;
+    }
+    return convertColorSpace({
+        r: color.red,
+        g: color.green,
+        b: color.blue,
+        alpha: color.alpha,
+        mode: 'rgb'
+    }, outputColorSpace);
+}
+
+module.exports = convertColorByToken;

package/dist/utils/convert-color-token.d.ts

@@ -0,0 +1,3 @@
+import type { MasterCSS } from '@master/css';
+import type { ColorPresentationParams } from 'vscode-languageserver-protocol';
+export default function convertColorByToken(color: ColorPresentationParams['color'], colorToken: string, css: MasterCSS): string | undefined;

package/dist/utils/convert-color-token.mjs

@@ -0,0 +1,26 @@
+import convertColorSpace from './convert-color-space.mjs';
+
+function convertColorByToken(color, colorToken, css) {
+    const valueComponent = css.generate('color:' + colorToken)[0]?.valueComponents[0];
+    let outputColorSpace = 'hex';
+    switch(valueComponent?.type){
+        case 'function':
+            outputColorSpace = valueComponent.name;
+            break;
+        case 'variable':
+            outputColorSpace = valueComponent.variable?.space;
+            break;
+        case 'string':
+            outputColorSpace = 'hex';
+            break;
+    }
+    return convertColorSpace({
+        r: color.red,
+        g: color.green,
+        b: color.blue,
+        alpha: color.alpha,
+        mode: 'rgb'
+    }, outputColorSpace);
+}
+
+export { convertColorByToken as default };

package/dist/utils/create-doc.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vscodeLanguageserverTextdocument = require('vscode-languageserver-textdocument');
+
+const languageIdOfExt = {
+    ts: 'typescript',
+    tsx: 'typescriptreact',
+    js: 'javascript',
+    jsx: 'javascriptreact',
+    css: 'css',
+    scss: 'scss',
+    less: 'less',
+    html: 'html',
+    json: 'json',
+    vue: 'vue',
+    svelte: 'svelte',
+    astro: 'astro'
+};
+function createDoc(ext, content) {
+    return vscodeLanguageserverTextdocument.TextDocument.create(`file:///abc.${ext}`, languageIdOfExt[ext], 0, content);
+}
+
+exports.default = createDoc;
+exports.languageIdOfExt = languageIdOfExt;

package/dist/utils/create-doc.d.ts

@@ -0,0 +1,16 @@
+import { TextDocument } from 'vscode-languageserver-textdocument';
+export declare const languageIdOfExt: {
+    ts: string;
+    tsx: string;
+    js: string;
+    jsx: string;
+    css: string;
+    scss: string;
+    less: string;
+    html: string;
+    json: string;
+    vue: string;
+    svelte: string;
+    astro: string;
+};
+export default function createDoc(ext: keyof typeof languageIdOfExt, content: string): TextDocument;

package/dist/utils/create-doc.mjs

@@ -0,0 +1,21 @@
+import { TextDocument } from 'vscode-languageserver-textdocument';
+
+const languageIdOfExt = {
+    ts: 'typescript',
+    tsx: 'typescriptreact',
+    js: 'javascript',
+    jsx: 'javascriptreact',
+    css: 'css',
+    scss: 'scss',
+    less: 'less',
+    html: 'html',
+    json: 'json',
+    vue: 'vue',
+    svelte: 'svelte',
+    astro: 'astro'
+};
+function createDoc(ext, content) {
+    return TextDocument.create(`file:///abc.${ext}`, languageIdOfExt[ext], 0, content);
+}
+
+export { createDoc as default, languageIdOfExt };

package/dist/utils/css-data-provider.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var dataProvider = require('vscode-css-languageservice/lib/umd/languageFacts/dataProvider');
+var webCustomData = require('vscode-css-languageservice/lib/umd/data/webCustomData');
+
+// @ts-expect-error
+const cssDataProvider = new dataProvider.CSSDataProvider(webCustomData.cssData);
+
+module.exports = cssDataProvider;

package/dist/utils/css-data-provider.d.ts

@@ -0,0 +1,3 @@
+import type { ICSSDataProvider } from 'vscode-css-languageservice/lib/umd/cssLanguageTypes';
+declare const cssDataProvider: ICSSDataProvider;
+export default cssDataProvider;

package/dist/utils/css-data-provider.mjs

@@ -0,0 +1,7 @@
+import { CSSDataProvider } from 'vscode-css-languageservice/lib/umd/languageFacts/dataProvider';
+import { cssData } from 'vscode-css-languageservice/lib/umd/data/webCustomData';
+
+// @ts-expect-error
+const cssDataProvider = new CSSDataProvider(cssData);
+
+export { cssDataProvider as default };

package/dist/utils/find-matching-brackets.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+function findMatchingPairs(input, startIndex, start, end) {
+    let endIndex;
+    // {} [] ()
+    if (start !== end) {
+        let count = 1;
+        for(let i = startIndex; i < input.length; i++){
+            if (input[i] === start) {
+                count++;
+            } else if (input[i] === end) {
+                count--;
+                if (count === 0) {
+                    endIndex = i;
+                    break;
+                }
+            }
+        }
+    } else {
+        for(let i = startIndex; i < input.length; i++){
+            if (input[i] === start && input[i - 1] !== '\\') {
+                return i;
+            }
+        }
+    }
+    return endIndex;
+}
+
+module.exports = findMatchingPairs;

package/dist/utils/find-matching-brackets.d.ts

@@ -0,0 +1 @@
+export default function findMatchingPairs(input: string, startIndex: number, start: string, end: string): number | undefined;

package/dist/utils/find-matching-brackets.mjs

@@ -0,0 +1,27 @@
+function findMatchingPairs(input, startIndex, start, end) {
+    let endIndex;
+    // {} [] ()
+    if (start !== end) {
+        let count = 1;
+        for(let i = startIndex; i < input.length; i++){
+            if (input[i] === start) {
+                count++;
+            } else if (input[i] === end) {
+                count--;
+                if (count === 0) {
+                    endIndex = i;
+                    break;
+                }
+            }
+        }
+    } else {
+        for(let i = startIndex; i < input.length; i++){
+            if (input[i] === start && input[i - 1] !== '\\') {
+                return i;
+            }
+        }
+    }
+    return endIndex;
+}
+
+export { findMatchingPairs as default };

package/dist/utils/get-color-completion-items.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+var css = require('@master/css');
+var vscodeLanguageserverProtocol = require('vscode-languageserver-protocol');
+var sortCompletionItems = require('./sort-completion-items.cjs');
+
+function getColorCompletionItems(css$1 = new css.MasterCSS()) {
+    const completionItems = [];
+    for(const eachVariableName in css$1.variables){
+        const eachVariable = css$1.variables[eachVariableName];
+        if (eachVariable.type === 'color') {
+            // todo: packages/css should support getTextByVariable(variable)
+            const valueToken = eachVariable.space && eachVariable.value ? `${eachVariable.space}(${eachVariable.value})` : eachVariable.value;
+            completionItems.push({
+                label: eachVariableName,
+                // detail is shown in the detail pane
+                // todo: eachVariable.token should be recorded as original config variable
+                detail: valueToken,
+                // documentation is shown in the hover
+                // todo: should convert and space to rgba
+                documentation: eachVariable.space && eachVariable.value ? `${eachVariable.space}(${eachVariable.value.split(' ').join(',')})` : eachVariable.value,
+                kind: vscodeLanguageserverProtocol.CompletionItemKind.Color,
+                sortText: eachVariableName.replace(/(.+?)-(\d+)/, (match, prefix, num)=>prefix + '-' + ('00000' + num).slice(-5))
+            });
+        }
+    }
+    return sortCompletionItems(completionItems);
+}
+
+module.exports = getColorCompletionItems;

package/dist/utils/get-color-completion-items.d.ts

@@ -0,0 +1,3 @@
+import { MasterCSS } from '@master/css';
+import { type CompletionItem } from 'vscode-languageserver-protocol';
+export default function getColorCompletionItems(css?: MasterCSS): CompletionItem[];

package/dist/utils/get-color-completion-items.mjs

@@ -0,0 +1,28 @@
+import { MasterCSS } from '@master/css';
+import { CompletionItemKind } from 'vscode-languageserver-protocol';
+import sortCompletionItems from './sort-completion-items.mjs';
+
+function getColorCompletionItems(css = new MasterCSS()) {
+    const completionItems = [];
+    for(const eachVariableName in css.variables){
+        const eachVariable = css.variables[eachVariableName];
+        if (eachVariable.type === 'color') {
+            // todo: packages/css should support getTextByVariable(variable)
+            const valueToken = eachVariable.space && eachVariable.value ? `${eachVariable.space}(${eachVariable.value})` : eachVariable.value;
+            completionItems.push({
+                label: eachVariableName,
+                // detail is shown in the detail pane
+                // todo: eachVariable.token should be recorded as original config variable
+                detail: valueToken,
+                // documentation is shown in the hover
+                // todo: should convert and space to rgba
+                documentation: eachVariable.space && eachVariable.value ? `${eachVariable.space}(${eachVariable.value.split(' ').join(',')})` : eachVariable.value,
+                kind: CompletionItemKind.Color,
+                sortText: eachVariableName.replace(/(.+?)-(\d+)/, (match, prefix, num)=>prefix + '-' + ('00000' + num).slice(-5))
+            });
+        }
+    }
+    return sortCompletionItems(completionItems);
+}
+
+export { getColorCompletionItems as default };

package/dist/utils/get-css-data-documentation.cjs

@@ -0,0 +1,90 @@
+'use strict';
+
+var beautifyCss = require('./beautify-css.cjs');
+var css = require('@master/css');
+
+function getCSSDataDocumentation(data, additional) {
+    const values = [];
+    const references = data?.references ? [
+        ...data.references
+    ] : [];
+    if (data?.status) {
+        values.push(getEntryStatus(data.status));
+    }
+    if (additional?.generatedCSS) {
+        values.push('```css\n' + beautifyCss(additional.generatedCSS) + '\n```');
+    }
+    if (data?.description) if (typeof data.description === 'string') {
+        values.push(textToMarkedString(data.description));
+    } else {
+        values.push(data.description.kind === 'markdown' ? data.description.value : textToMarkedString(data.description.value));
+    }
+    const browserLabel = getBrowserLabel(data?.browsers);
+    if (browserLabel) {
+        values.push('(' + textToMarkedString(browserLabel) + ')');
+    }
+    if (data && 'syntax' in data && data.syntax) {
+        values.push(`Syntax: ${textToMarkedString(data.syntax)}`);
+    }
+    // todo: can i use
+    if (additional?.docs) {
+        references.unshift({
+            name: 'Master CSS',
+            url: new URL(`/docs/${additional.docs}`, css.OFFICIAL_URL).href
+        });
+    }
+    if (references.length) {
+        values.push(references.map((r)=>{
+            return `[${r.name}](${r.url})`;
+        }).join(' | '));
+    }
+    return values?.length ? {
+        kind: 'markdown',
+        value: values.join('\n\n')
+    } : undefined;
+}
+const browserNames = {
+    E: 'Edge',
+    FF: 'Firefox',
+    S: 'Safari',
+    C: 'Chrome',
+    IE: 'IE',
+    O: 'Opera'
+};
+function getEntryStatus(status) {
+    switch(status){
+        case 'experimental':
+            return '⚠️ Property is experimental. Be cautious when using it.️\n\n';
+        case 'nonstandard':
+            return '🚨️ Property is nonstandard. Avoid using it.\n\n';
+        case 'obsolete':
+            return '🚨️️️ Property is obsolete. Avoid using it.\n\n';
+        default:
+            return '';
+    }
+}
+function textToMarkedString(text) {
+    text = text.replace(/[\\`*_{}[\]()#+\-.!]/g, '\\$&') // escape markdown syntax tokens: http://daringfireball.net/projects/markdown/syntax#backslash
+    ;
+    return text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+function getBrowserLabel(browsers = []) {
+    if (browsers.length === 0) {
+        return null;
+    }
+    return browsers.map((b)=>{
+        let value = '';
+        const matches = b.match(/([A-Z]+)(\d+)?/) ?? '';
+        const name = matches[1];
+        const version = matches[2];
+        if (name in browserNames) {
+            value += browserNames[name];
+        }
+        if (version) {
+            value += ' ' + version;
+        }
+        return value;
+    }).join(', ');
+}
+
+exports.getCSSDataDocumentation = getCSSDataDocumentation;

package/dist/utils/get-css-data-documentation.d.ts

@@ -0,0 +1,5 @@
+import type { IPropertyData, IValueData, MarkupContent } from 'vscode-css-languageservice';
+export declare function getCSSDataDocumentation(data?: IPropertyData | IValueData, additional?: {
+    generatedCSS?: string;
+    docs?: string | false;
+}): MarkupContent | undefined;