@master/css-language-service 2.0.0-rc.14 → 2.0.0-rc.16

package/dist/providers/completion.mjs

@@ -0,0 +1,283 @@
+import { masterCssOtherKeys, masterCssKeyValues, masterCssSelectors, masterCssElements, masterCssType, masterCssMedia, masterCssCommonValues } from '../constant.mjs';
+import { MasterCSS } from '@master/css';
+import { cssData } from 'vscode-css-languageservice/lib/umd/data/webCustomData';
+import { CSSDataProvider } from 'vscode-css-languageservice/lib/umd/languageFacts/dataProvider';
+
+let cssKeys = [];
+cssKeys = cssKeys.concat(masterCssOtherKeys);
+masterCssKeyValues.forEach((x)=>{
+    cssKeys = cssKeys.concat(x.key);
+});
+const masterCssKeys = [
+    ...new Set(cssKeys)
+];
+// temporary
+function checkConfigColorsBlock(document, position) {
+    const lineText = (document?.getText({
+        start: {
+            line: position.line,
+            character: 0
+        },
+        end: {
+            line: position.line,
+            character: position.character
+        }
+    }) ?? '').trim();
+    if ((lineText.match(/'|"|`/g)?.length ?? 0) % 2 === 0) {
+        return false;
+    }
+    for(let i = position.line; i > 0; i--){
+        const text = document.getText({
+            start: {
+                line: i - 1,
+                character: 0
+            },
+            end: {
+                line: i,
+                character: 0
+            }
+        });
+        if (text.includes('}')) {
+            return false;
+        } else if (text.includes('colors:')) {
+            return true;
+        }
+    }
+    return false;
+}
+function getLastInstance(lineText, position, language) {
+    const classPattern = /(?:[^"{'\s])+(?=>\s|\b)/g;
+    let classMatch;
+    let lastKey = '';
+    let triggerKey = lineText.charAt(lineText.length - 1);
+    let isStart = position.character == 1 || lineText.charAt(lineText.length - 2) === ' ' || lineText.charAt(lineText.length - 2) === '' || lineText.charAt(lineText.length - 2) === '"' || lineText.charAt(lineText.length - 2) === '\'' || lineText.charAt(lineText.length - 2) === '{';
+    if (lineText.match(classPattern) === null) {
+        return {
+            isInstance: false,
+            lastKey: '',
+            triggerKey: '',
+            isStart: false,
+            language: language
+        };
+    } else {
+        while((classMatch = classPattern.exec(lineText)) !== null){
+            lastKey = classMatch[0];
+        }
+    }
+    if (lineText.charAt(lineText.length - 2) === ':' && lineText.charAt(lineText.length - 1) === ':') {
+        triggerKey = '::';
+        isStart = false;
+    }
+    return {
+        isInstance: true,
+        lastKey: lastKey,
+        triggerKey: triggerKey,
+        isStart: isStart,
+        language: language
+    };
+}
+function getConfigColorsCompletionItem(css = new MasterCSS()) {
+    let masterStyleCompletionItem = [];
+    masterStyleCompletionItem = masterStyleCompletionItem.concat(getColorsItem(css));
+    return masterStyleCompletionItem;
+}
+function getCompletionItem(instance, triggerKey, isStart, language, css = new MasterCSS()) {
+    const cssDataProvider = new CSSDataProvider(cssData);
+    const cssProperties = cssDataProvider.provideProperties();
+    let masterStyleCompletionItem = [];
+    const haveValue = instance.split(':').length;
+    let key = instance.split(':')[0];
+    key = key.trim();
+    const instanceLength = instance.split(':|@').length;
+    const last = instance.split(':|@')[instanceLength - 1];
+    const mediaPattern = /[^\\s"]+@+([^\\s:"@]+)/g;
+    const elementsPattern = /[^\\s"]+::+([^\\s:"@]+)/g;
+    let isColorful = false;
+    const isMedia = !(mediaPattern.exec(instance) === null && triggerKey !== '@');
+    const isElements = !(elementsPattern.exec(instance) === null && triggerKey !== '::');
+    const masterCssKeyCompletionItems = [];
+    let masterCssValues = [];
+    const masterCustomSelectors = Object.keys(css.config?.selectors ?? {}).map((x)=>x.endsWith('(') ? `${x})` : x).filter((x)=>x.match(/:[^:]+/) && !masterCssSelectors.find((existedSelector)=>(typeof existedSelector === 'string' ? existedSelector : existedSelector.label) === `:${x}`)).map((x)=>{
+        x = x.substring(1);
+        if (x.endsWith(')')) {
+            return {
+                label: x,
+                kind: 3
+            };
+        }
+        return x;
+    });
+    const masterCustomElements = Object.keys(css.config?.selectors ?? {}).map((x)=>x.endsWith('(') ? `${x})` : x).filter((x)=>x.match(/::[^:]+/) && !masterCssElements.find((existedElement)=>(typeof existedElement === 'string' ? existedElement : existedElement.label) === `::${x}`)).map((x)=>{
+        x = x.substring(2);
+        if (x.endsWith(')')) {
+            return {
+                label: x,
+                kind: 3
+            };
+        }
+        return x;
+    });
+    masterCssKeyValues.forEach((x)=>{
+        const fullKey = x.key[0];
+        const originalCssProperty = cssProperties.find((x)=>x.name == fullKey);
+        const originalCssValues = originalCssProperty?.values ?? [];
+        for (const masterKey of x.key){
+            if (!masterCssKeyCompletionItems.find((existedValue)=>existedValue.label === masterKey + ':')) {
+                masterCssKeyCompletionItems.push({
+                    label: masterKey + ':',
+                    kind: 10,
+                    documentation: originalCssProperty?.description ?? '',
+                    command: {
+                        title: 'triggerSuggest',
+                        command: 'editor.action.triggerSuggest'
+                    }
+                });
+            }
+        }
+        if (x.key.includes(key)) {
+            // constant.ts custom values
+            masterCssValues = masterCssValues.concat(x.values.filter((cssValue)=>!masterCssValues.find((existedValue)=>(typeof existedValue === 'string' ? existedValue : existedValue.label) === (typeof cssValue === 'string' ? cssValue : cssValue.label))));
+            masterCssValues = masterCssValues.concat(originalCssValues.filter((cssValue, index)=>cssValue.description || !cssValue.description && originalCssValues.indexOf(cssValue) === index).map((cssValue)=>({
+                    label: cssValue.name.replace(/,\s/g, ',').replace(/\s/g, '|').replace(/["']/g, ''),
+                    kind: 10,
+                    documentation: cssValue?.description ?? ''
+                })).filter((cssValue)=>!masterCssValues.find((existedValue)=>(typeof existedValue === 'string' ? existedValue : existedValue.label) === (typeof cssValue === 'string' ? cssValue : cssValue.label))));
+            if (css.config?.variables?.[fullKey]) {
+                const masterCustomVariables = Object.keys(css.config?.variables[fullKey]);
+                masterCssValues = masterCssValues.concat(masterCustomVariables.filter((customValue)=>!masterCssValues.find((existedValue)=>(typeof existedValue === 'string' ? existedValue : existedValue.label) === customValue)));
+            }
+            if (x.colored) {
+                isColorful = true;
+                const needPushList = masterCssType.find((y)=>y.type === 'color')?.values.filter((z)=>!masterCssValues.find((a)=>(typeof a === 'string' ? a : a.label) === (typeof z === 'string' ? z : z.label)));
+                if (needPushList) {
+                    masterCssValues = masterCssValues.concat(needPushList);
+                }
+            }
+        }
+    });
+    if ((isStart == true || !masterCssKeys.includes(key)) && triggerKey !== '@' && triggerKey !== ':') {
+        masterStyleCompletionItem = masterStyleCompletionItem.concat(masterCssKeyCompletionItems);
+        masterStyleCompletionItem = masterStyleCompletionItem.concat(getReturnItem(Object.keys(css.config?.semantics ?? {}), 10));
+        if (language == 'tsx' || language == 'vue' || language == 'jsx') {
+            return HaveDash(key, masterStyleCompletionItem);
+        }
+        return masterStyleCompletionItem;
+    } else if (isStart == true) {
+        return [];
+    }
+    if (masterCssKeys.includes(key) && key !== null && isElements === true) {
+        masterStyleCompletionItem = masterStyleCompletionItem.concat(getReturnItem(masterCssElements, 10));
+        masterStyleCompletionItem = masterStyleCompletionItem.concat(getReturnItem(masterCustomElements, 10));
+        if ((language == 'tsx' || language == 'vue' || language == 'jsx') && triggerKey !== '@' && triggerKey !== ':') {
+            return HaveDash(last, masterStyleCompletionItem);
+        }
+        return masterStyleCompletionItem;
+    }
+    if (masterCssKeys.includes(key) && key !== null && isMedia === true) {
+        masterStyleCompletionItem = masterStyleCompletionItem.concat(getReturnItem(masterCssMedia, 10));
+        // todo: refactor theme
+        masterStyleCompletionItem = masterStyleCompletionItem.concat(getReturnItem([
+            'light',
+            'dark'
+        ], 10));
+        if ((language == 'tsx' || language == 'vue' || language == 'jsx') && triggerKey !== '@' && triggerKey !== ':') {
+            return HaveDash('@' + last, masterStyleCompletionItem);
+        }
+        return masterStyleCompletionItem;
+    }
+    if (Object.keys(css.config?.semantics ?? {}).includes(key) && !masterCssKeyValues.find((x)=>x.key.includes(key))) {
+        masterStyleCompletionItem = masterStyleCompletionItem.concat(getReturnItem(masterCssSelectors, 10));
+        masterStyleCompletionItem = masterStyleCompletionItem.concat(getReturnItem(masterCustomSelectors, 10));
+        if ((language == 'tsx' || language == 'vue' || language == 'jsx') && triggerKey !== '@' && triggerKey !== ':') {
+            return HaveDash(last, masterStyleCompletionItem);
+        }
+        return masterStyleCompletionItem;
+    } else if (masterCssKeys.includes(key) && haveValue <= 2 && !(haveValue == 2 && triggerKey === ':')) {
+        masterStyleCompletionItem = masterStyleCompletionItem.concat(getReturnItem(masterCssValues, 10));
+        masterStyleCompletionItem = masterStyleCompletionItem.concat(getReturnItem(masterCssCommonValues, 13).map((x)=>{
+            x.sortText = 'z' + x;
+            return x;
+        }));
+        if (isColorful) {
+            masterStyleCompletionItem = masterStyleCompletionItem.concat(getColorsItem(css));
+        }
+        if ((language == 'tsx' || language == 'vue' || language == 'jsx') && triggerKey !== '@' && triggerKey !== ':') {
+            return HaveDash(last, masterStyleCompletionItem);
+        }
+        return masterStyleCompletionItem;
+    }
+    if (masterCssKeys.includes(key) && (haveValue == 2 && triggerKey === ':' || haveValue >= 3) || masterCssKeyValues.find((x)=>x.values.includes(key))) {
+        masterStyleCompletionItem = masterStyleCompletionItem.concat(getReturnItem(masterCssSelectors, 3));
+        masterStyleCompletionItem = masterStyleCompletionItem.concat(getReturnItem(masterCustomSelectors, 10));
+    }
+    if ((language == 'tsx' || language == 'vue' || language == 'jsx') && triggerKey !== '@' && triggerKey !== ':') {
+        return HaveDash(last, masterStyleCompletionItem);
+    }
+    return masterStyleCompletionItem;
+}
+function getReturnItem(items, kind, insertText = '') {
+    const masterStyleCompletionItem = [];
+    items.forEach((x)=>{
+        if (typeof x === 'string') {
+            masterStyleCompletionItem.push({
+                label: x + insertText,
+                kind: kind,
+                insertText: x + insertText,
+                insertTextMode: 2,
+                command: insertText === ':' ? {
+                    title: 'triggerSuggest',
+                    command: 'editor.action.triggerSuggest'
+                } : undefined
+            });
+        } else {
+            masterStyleCompletionItem.push({
+                insertText: x.label + insertText,
+                insertTextMode: 2,
+                command: insertText === ':' ? {
+                    title: 'triggerSuggest',
+                    command: 'editor.action.triggerSuggest'
+                } : undefined,
+                ...x
+            });
+        }
+    });
+    return masterStyleCompletionItem;
+}
+function getColorsItem(css = new MasterCSS()) {
+    const masterStyleCompletionItem = [];
+    // todo: refactor css.variables
+    for(const eachVariableName in css.variables){
+        const eachVariable = css.variables[eachVariableName];
+        if (eachVariable.type === 'color') {
+            masterStyleCompletionItem.push({
+                label: eachVariableName,
+                documentation: eachVariable.value,
+                kind: 16,
+                sortText: eachVariableName
+            });
+        }
+    }
+    return masterStyleCompletionItem;
+}
+function HaveDash(str, itemList) {
+    const completionItem = [];
+    if (str.split('-').length - 1 <= 0) {
+        return itemList;
+    } else {
+        const start = str.split('-')[0] + '-';
+        itemList.map((x)=>{
+            if (x.label.includes(start)) {
+                completionItem.push({
+                    label: x.label,
+                    kind: x.kind,
+                    insertText: x.insertText?.substring(start.length),
+                    insertTextMode: x.insertTextMode,
+                    command: x.command
+                });
+            }
+        });
+        return completionItem;
+    }
+}
+
+export { checkConfigColorsBlock, getCompletionItem, getConfigColorsCompletionItem, getLastInstance, getReturnItem };

package/dist/providers/hover.cjs

@@ -0,0 +1,63 @@
+'use strict';
+
+var css = require('@master/css');
+var getCssEntryMarkdownDescription = require('../utils/get-css-entry-markdown-description.cjs');
+var beautifyCss = require('js-beautify/js/lib/beautify-css');
+var webCustomData = require('vscode-css-languageservice/lib/umd/data/webCustomData');
+var dataProvider = require('vscode-css-languageservice/lib/umd/languageFacts/dataProvider');
+
+function doHover(instance, range, config) {
+    const css$1 = new css.MasterCSS(config);
+    css$1.add(instance);
+    const contents = [];
+    if (css$1.text) {
+        const cssPreview = getCssPreview(instance, css$1.text);
+        if (cssPreview) {
+            contents.push(cssPreview);
+        }
+    }
+    const cssHoverInfo = getCssHoverInfo(instance, css$1.rules[0]);
+    if (cssHoverInfo) {
+        contents.push(cssHoverInfo);
+    }
+    return {
+        contents,
+        range: range
+    };
+}
+function getCssPreview(instance, renderText) {
+    return {
+        language: 'css',
+        value: beautifyCss.css_beautify(renderText, {
+            newline_between_rules: true,
+            end_with_newline: true
+        })
+    };
+}
+function getCssHoverInfo(instance, rule) {
+    const cssDataProvider = new dataProvider.CSSDataProvider(webCustomData.cssData);
+    const cssProperties = cssDataProvider.provideProperties();
+    let cssHoverInfo = null;
+    const fullKey = rule.id;
+    const originalCssProperty = cssProperties.find((x)=>x.name == fullKey);
+    if ([
+        css.Layer.Core,
+        css.Layer.CoreNative,
+        css.Layer.CoreShorthand,
+        css.Layer.CoreNativeShorthand
+    ].includes(rule.layer) && originalCssProperty) {
+        if (!originalCssProperty.references?.find((x)=>x.name === 'Master Reference')) {
+            originalCssProperty.references = [
+                ...originalCssProperty?.references ?? [],
+                {
+                    name: 'Master Reference',
+                    url: `https://rc.css.master.co/docs/${fullKey}`
+                }
+            ];
+        }
+        cssHoverInfo = getCssEntryMarkdownDescription.getCssEntryMarkdownDescription(originalCssProperty);
+    }
+    return cssHoverInfo;
+}
+
+exports.doHover = doHover;

package/dist/providers/hover.mjs

@@ -0,0 +1,61 @@
+import { MasterCSS, Layer } from '@master/css';
+import { getCssEntryMarkdownDescription } from '../utils/get-css-entry-markdown-description.mjs';
+import { css_beautify } from 'js-beautify/js/lib/beautify-css';
+import { cssData } from 'vscode-css-languageservice/lib/umd/data/webCustomData';
+import { CSSDataProvider } from 'vscode-css-languageservice/lib/umd/languageFacts/dataProvider';
+
+function doHover(instance, range, config) {
+    const css = new MasterCSS(config);
+    css.add(instance);
+    const contents = [];
+    if (css.text) {
+        const cssPreview = getCssPreview(instance, css.text);
+        if (cssPreview) {
+            contents.push(cssPreview);
+        }
+    }
+    const cssHoverInfo = getCssHoverInfo(instance, css.rules[0]);
+    if (cssHoverInfo) {
+        contents.push(cssHoverInfo);
+    }
+    return {
+        contents,
+        range: range
+    };
+}
+function getCssPreview(instance, renderText) {
+    return {
+        language: 'css',
+        value: css_beautify(renderText, {
+            newline_between_rules: true,
+            end_with_newline: true
+        })
+    };
+}
+function getCssHoverInfo(instance, rule) {
+    const cssDataProvider = new CSSDataProvider(cssData);
+    const cssProperties = cssDataProvider.provideProperties();
+    let cssHoverInfo = null;
+    const fullKey = rule.id;
+    const originalCssProperty = cssProperties.find((x)=>x.name == fullKey);
+    if ([
+        Layer.Core,
+        Layer.CoreNative,
+        Layer.CoreShorthand,
+        Layer.CoreNativeShorthand
+    ].includes(rule.layer) && originalCssProperty) {
+        if (!originalCssProperty.references?.find((x)=>x.name === 'Master Reference')) {
+            originalCssProperty.references = [
+                ...originalCssProperty?.references ?? [],
+                {
+                    name: 'Master Reference',
+                    url: `https://rc.css.master.co/docs/${fullKey}`
+                }
+            ];
+        }
+        cssHoverInfo = getCssEntryMarkdownDescription(originalCssProperty);
+    }
+    return cssHoverInfo;
+}
+
+export { doHover };

package/dist/settings.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+const settings = {
+    languages: [
+        'html',
+        'php',
+        'javascript',
+        'typescript',
+        'javascriptreact',
+        'typescriptreact',
+        'vue',
+        'svelte',
+        'rust'
+    ],
+    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]*)([^`]*)(`[^`]*`)'
+    ],
+    exclude: [
+        '**/.git/**',
+        '**/node_modules/**',
+        '**/.hg/**'
+    ],
+    suggestions: true,
+    inspect: true,
+    previewColors: true,
+    config: 'master.css'
+};
+
+exports.settings = settings;

package/dist/settings.mjs

@@ -0,0 +1,35 @@
+const settings = {
+    languages: [
+        'html',
+        'php',
+        'javascript',
+        'typescript',
+        'javascriptreact',
+        'typescriptreact',
+        'vue',
+        'svelte',
+        'rust'
+    ],
+    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]*)([^`]*)(`[^`]*`)'
+    ],
+    exclude: [
+        '**/.git/**',
+        '**/node_modules/**',
+        '**/.hg/**'
+    ],
+    suggestions: true,
+    inspect: true,
+    previewColors: true,
+    config: 'master.css'
+};
+
+export { settings };

package/dist/utils/get-css-entry-markdown-description.cjs

@@ -0,0 +1,77 @@
+'use strict';
+
+function getCssEntryMarkdownDescription(entry) {
+    if (!entry?.description || entry?.description === '') {
+        return '';
+    }
+    let result = '';
+    if (entry.status) {
+        result += getEntryStatus(entry.status);
+    }
+    if (typeof entry.description === 'string') {
+        result += textToMarkedString(entry.description);
+    } else {
+        result += entry.description.kind === 'markdown' ? entry.description.value : textToMarkedString(entry.description.value);
+    }
+    const browserLabel = getBrowserLabel(entry.browsers);
+    if (browserLabel) {
+        result += '\n\n(' + textToMarkedString(browserLabel) + ')';
+    }
+    if ('syntax' in entry && entry.syntax) {
+        result += `\n\nSyntax: ${textToMarkedString(entry.syntax)}`;
+    }
+    if (entry.references && entry.references.length > 0) {
+        if (result.length > 0) {
+            result += '\n\n';
+        }
+        result += entry.references.map((r)=>{
+            return `[${r.name}](${r.url})`;
+        }).join(' | ');
+    }
+    return result;
+}
+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 result = '';
+        const matches = b.match(/([A-Z]+)(\d+)?/) ?? '';
+        const name = matches[1];
+        const version = matches[2];
+        if (name in browserNames) {
+            result += browserNames[name];
+        }
+        if (version) {
+            result += ' ' + version;
+        }
+        return result;
+    }).join(', ');
+}
+
+exports.getCssEntryMarkdownDescription = getCssEntryMarkdownDescription;

package/dist/utils/get-css-entry-markdown-description.mjs

@@ -0,0 +1,75 @@
+function getCssEntryMarkdownDescription(entry) {
+    if (!entry?.description || entry?.description === '') {
+        return '';
+    }
+    let result = '';
+    if (entry.status) {
+        result += getEntryStatus(entry.status);
+    }
+    if (typeof entry.description === 'string') {
+        result += textToMarkedString(entry.description);
+    } else {
+        result += entry.description.kind === 'markdown' ? entry.description.value : textToMarkedString(entry.description.value);
+    }
+    const browserLabel = getBrowserLabel(entry.browsers);
+    if (browserLabel) {
+        result += '\n\n(' + textToMarkedString(browserLabel) + ')';
+    }
+    if ('syntax' in entry && entry.syntax) {
+        result += `\n\nSyntax: ${textToMarkedString(entry.syntax)}`;
+    }
+    if (entry.references && entry.references.length > 0) {
+        if (result.length > 0) {
+            result += '\n\n';
+        }
+        result += entry.references.map((r)=>{
+            return `[${r.name}](${r.url})`;
+        }).join(' | ');
+    }
+    return result;
+}
+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 result = '';
+        const matches = b.match(/([A-Z]+)(\d+)?/) ?? '';
+        const name = matches[1];
+        const version = matches[2];
+        if (name in browserNames) {
+            result += browserNames[name];
+        }
+        if (version) {
+            result += ' ' + version;
+        }
+        return result;
+    }).join(', ');
+}
+
+export { getCssEntryMarkdownDescription };

package/dist/utils/hex-to-rgb.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+function hexToRgb(hex) {
+    const aRgbHex = hex.replace('#', '').match(/.{1,2}/g);
+    return {
+        red: parseInt(aRgbHex?.[0] ?? '0', 16),
+        green: parseInt(aRgbHex?.[1] ?? '0', 16),
+        blue: parseInt(aRgbHex?.[2] ?? '0', 16),
+        alpha: parseInt(aRgbHex?.[3] ?? 'FF', 16)
+    };
+}
+
+exports.hexToRgb = hexToRgb;

package/dist/utils/hex-to-rgb.mjs

@@ -0,0 +1,11 @@
+function hexToRgb(hex) {
+    const aRgbHex = hex.replace('#', '').match(/.{1,2}/g);
+    return {
+        red: parseInt(aRgbHex?.[0] ?? '0', 16),
+        green: parseInt(aRgbHex?.[1] ?? '0', 16),
+        blue: parseInt(aRgbHex?.[2] ?? '0', 16),
+        alpha: parseInt(aRgbHex?.[3] ?? 'FF', 16)
+    };
+}
+
+export { hexToRgb };