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

package/dist/providers/color.mjs

@@ -0,0 +1,315 @@
+import { MasterCSS } from '@master/css';
+import { hexToRgb } from '../utils/hex-to-rgb.mjs';
+import { instancePattern } from '../utils/regex.mjs';
+import { toTwoDigitHex } from '../utils/to-two-digit-hex.mjs';
+import { hsl, hwb, lch, lab, cmyk, rgb } from 'color-convert';
+import { oklabToRgb } from '../utils/oklab-to-rgb.mjs';
+import { oklchToOklab } from '../utils/oklch-to-oklab.mjs';
+
+async function getDocumentColors(text, css = new MasterCSS()) {
+    const colors = [];
+    let instanceMatch;
+    while((instanceMatch = instancePattern.exec(text)) !== null){
+        const instanceStartIndex = instanceMatch.index;
+        // todo: refactor theme
+        // const theme = css.themeNames.find(x => instanceMatch?.[0]?.endsWith(`@${x}`)) ?? ''
+        const theme = '';
+        const colorPattern = /(?<=[|:\s"'`]|^)(?:#?[\w-]+(?:-[\d]{1,2})?(?:\/.?[\d]*)?(?:\([^\s)]+\))?(?![:]))/g;
+        let colorMatch;
+        //check color
+        while((colorMatch = colorPattern.exec(instanceMatch[0])) !== null){
+            const colorValue = parseColorString(colorMatch[0], theme, css);
+            if (colorValue) {
+                const colorIndex = {
+                    index: {
+                        start: instanceStartIndex + colorMatch.index,
+                        end: instanceStartIndex + colorMatch.index + colorMatch[0].length
+                    },
+                    color: colorValue
+                };
+                colors.push(colorIndex);
+            }
+        }
+    }
+    return colors;
+}
+function percentageConverter(value, max = 1) {
+    if (value === 'none') {
+        return 0;
+    } else if (value.endsWith('%')) {
+        return max * Number(value.replace('%', '')) / 100;
+    } else {
+        return Number(value);
+    }
+}
+function degConverter(value) {
+    if (value === 'none') {
+        return 0;
+    } else if (value.endsWith('turn')) {
+        return Number(value.replace('turn', '')) * 360;
+    } else if (value.endsWith('grad')) {
+        return Number(value.replace('grad', '')) * 0.9;
+    } else if (value.endsWith('rad')) {
+        return Number(value.replace('rad', '')) * 57.2957795;
+    } else if (value.endsWith('deg')) {
+        return Number(value.replace('deg', ''));
+    } else {
+        return Number(value);
+    }
+}
+function parseColorString(colorString, theme, css = new MasterCSS()) {
+    const rgbaColorPattern = /rgb(?:a)?\(([\d.]+)[,|]([\d.]+)[,|]([\d.]+)(?:[,/]([\d.]+(?:%)?))?\)/g;
+    const hslaColorPattern = /hsl(?:a)?\(([\d.]+(?:deg|turn|grad|rad)?|none)[,|]([\d.]+%|none)[,|]([\d.]+%|none)(?:[,/]([\d.]+(?:%)?))?\)/g;
+    const hwbColorPattern = /hwb\(([\d.]+(?:deg|turn|grad|rad)?|none)[|]([\d.]+%|none)[|]([\d.]+%|none)(?:[/]([\d.]+(?:%)?))?\)/g;
+    const oklchColorPattern = /oklch\(([\d.]+(?:%)?|none)[|]([\d.]+(?:%)?|none)[|]([\d.]+(?:deg|turn|grad|rad)?|none)(?:[/]([\d.]+(?:%)?))?\)/g;
+    const lchColorPattern = /lch\(([\d.]+(?:%)?|none)[|]([\d.]+(?:%)?|none)[|]([\d.]+(?:deg|turn|grad|rad)?|none)(?:[/]([\d.]+(?:%)?))?\)/g;
+    const oklabColorPattern = /oklab\(([\d.]+(?:%)?|none)[|](-?[\d.]+(?:%)?|none)[|](-?[\d.]+(?:%)?|none)(?:[/]([\d.]+(?:%)?))?\)/g;
+    const labColorPattern = /lab\(([\d.]+(?:%)?|none)[|](-?[\d.]+(?:%)?|none)[|](-?[\d.]+(?:%)?|none)(?:[/]([\d.]+(?:%)?))?\)/g;
+    const cmykColorPattern = /device-cmyk\(([\d.]+(?:%)?|none)[|]([\d.]+(?:%)?|none)[|]([\d.]+(?:%)?|none)[|]([\d.]+(?:%)?|none)(?:[/]([\d.]+(?:%)?))?(?:,\w+\(.*\))?\)/g;
+    const hexColorPattern = /#([0-9a-fA-F]{6,8})/g;
+    const colorFunctionPattern = /color?\((?:srgb|srgb-linear|display-p3|a98-rgb|prophoto-rgb|rec2020|xyz|xyz-d50|xyz-d65)[|]([\d.]+)[|]([\d.]+)[|]([\d.]+)(?:[/]([\d.]+(?:%)?))?\)/g;
+    let colorMatch2;
+    //#region  for rgb、hls
+    if (colorMatch2 = rgbaColorPattern.exec(colorString)) {
+        return getColorValue({
+            red: Number(colorMatch2[1]),
+            green: Number(colorMatch2[2]),
+            blue: Number(colorMatch2[3]),
+            alpha: colorMatch2[4] == undefined ? 1 : percentageConverter(colorMatch2[4])
+        });
+    } else if (colorMatch2 = hslaColorPattern.exec(colorString)) {
+        const rgb = hsl.rgb([
+            degConverter(colorMatch2[1]),
+            percentageConverter(colorMatch2[2], 100),
+            percentageConverter(colorMatch2[3], 100)
+        ]);
+        return getColorValue({
+            red: rgb[0],
+            green: rgb[1],
+            blue: rgb[2],
+            alpha: colorMatch2[4] == undefined ? 1 : percentageConverter(colorMatch2[4])
+        });
+    } else if (colorMatch2 = hwbColorPattern.exec(colorString)) {
+        const rgb = hwb.rgb([
+            degConverter(colorMatch2[1]),
+            percentageConverter(colorMatch2[2], 100),
+            percentageConverter(colorMatch2[3], 100)
+        ]);
+        return getColorValue({
+            red: rgb[0],
+            green: rgb[1],
+            blue: rgb[2],
+            alpha: colorMatch2[4] == undefined ? 1 : percentageConverter(colorMatch2[4])
+        });
+    } else if (colorMatch2 = oklchColorPattern.exec(colorString)) {
+        const oklab = oklchToOklab([
+            percentageConverter(colorMatch2[1]),
+            percentageConverter(colorMatch2[2], 0.4),
+            degConverter(colorMatch2[3])
+        ]);
+        const rgb = oklabToRgb(oklab);
+        return getColorValue({
+            red: rgb[0],
+            green: rgb[1],
+            blue: rgb[2],
+            alpha: colorMatch2[4] == undefined ? 1 : percentageConverter(colorMatch2[4])
+        });
+    } else if (colorMatch2 = lchColorPattern.exec(colorString)) {
+        const rgb = lch.rgb([
+            percentageConverter(colorMatch2[1], 100),
+            percentageConverter(colorMatch2[2], 150),
+            degConverter(colorMatch2[3])
+        ]);
+        return getColorValue({
+            red: rgb[0],
+            green: rgb[1],
+            blue: rgb[2],
+            alpha: colorMatch2[4] == undefined ? 1 : percentageConverter(colorMatch2[4])
+        });
+    } else if (colorMatch2 = oklabColorPattern.exec(colorString)) {
+        const rgb = oklabToRgb([
+            percentageConverter(colorMatch2[1]),
+            percentageConverter(colorMatch2[2], 0.4),
+            percentageConverter(colorMatch2[3], 0.4)
+        ]);
+        return getColorValue({
+            red: rgb[0],
+            green: rgb[1],
+            blue: rgb[2],
+            alpha: colorMatch2[4] == undefined ? 1 : percentageConverter(colorMatch2[4])
+        });
+    } else if (colorMatch2 = labColorPattern.exec(colorString)) {
+        const rgb = lab.rgb([
+            percentageConverter(colorMatch2[1], 100),
+            percentageConverter(colorMatch2[2], 125),
+            percentageConverter(colorMatch2[3], 125)
+        ]);
+        return getColorValue({
+            red: rgb[0],
+            green: rgb[1],
+            blue: rgb[2],
+            alpha: colorMatch2[4] == undefined ? 1 : percentageConverter(colorMatch2[4])
+        });
+    } else if (colorMatch2 = cmykColorPattern.exec(colorString)) {
+        const rgb = cmyk.rgb([
+            percentageConverter(colorMatch2[1], 100),
+            percentageConverter(colorMatch2[2], 100),
+            percentageConverter(colorMatch2[3], 100),
+            percentageConverter(colorMatch2[4], 100)
+        ]);
+        return getColorValue({
+            red: rgb[0],
+            green: rgb[1],
+            blue: rgb[2],
+            alpha: colorMatch2[5] == undefined ? 1 : percentageConverter(colorMatch2[5])
+        });
+    } else if (colorMatch2 = hexColorPattern.exec(colorString)) {
+        return getColorValue(hexToRgb(colorMatch2[1]));
+    } else if (colorMatch2 = colorFunctionPattern.exec(colorString)) {
+        return getColorValue({
+            red: Number(colorMatch2[1]) * 255,
+            green: Number(colorMatch2[2]) * 255,
+            blue: Number(colorMatch2[3]) * 255,
+            alpha: colorMatch2[4] == undefined ? 1 : percentageConverter(colorMatch2[4])
+        });
+    }
+    //#endregion for rgb、hls
+    //#region for mastercss color
+    let colorAlpha = 1;
+    let colorName = colorString;
+    const allCSSColorNames = [];
+    // todo: refactor css.variables
+    for(const eachVariableName in css.variables){
+        const eachVariable = css.variables[eachVariableName];
+        if (eachVariable.type === 'color') allCSSColorNames.push(eachVariableName);
+    }
+    if (colorString.split('/').length == 2) {
+        colorAlpha = Number('0' + colorString.split('/')[1]);
+    }
+    if (colorString.split('-').length == 1) {
+        colorName = colorString.split('/')[0];
+        colorName = colorName.endsWith('_') ? colorName.replace('_', '') : colorName;
+    }
+    if (allCSSColorNames.find((x)=>x == colorName)) {
+        return getColorsRGBA(colorName, colorAlpha, theme, css);
+    }
+//#endregion  for mastercss color
+}
+function getColorsRGBA(colorName, colorAlpha = 1, theme = '', css = new MasterCSS()) {
+    try {
+        // todo: refactor colorNumberMap
+        const colorNumberMap = css.variables[colorName];
+        const levelRgb = hexToRgb(colorNumberMap[theme] ?? colorNumberMap[''] ?? Object.values(colorNumberMap)[0]);
+        return {
+            red: levelRgb.red / 255,
+            green: levelRgb.green / 255,
+            blue: levelRgb.blue / 255,
+            alpha: colorAlpha
+        };
+    } catch (ex) {
+        return {
+            red: 0,
+            green: 0,
+            blue: 0,
+            alpha: 1
+        };
+    }
+}
+function getColorValue(color) {
+    return {
+        red: color.red / 255.0,
+        green: color.green / 255.0,
+        blue: color.blue / 255.0,
+        alpha: color.alpha
+    };
+}
+function getColorPresentation(params, isColorRender = false) {
+    const result = [];
+    const color = params.color;
+    const range = params.range;
+    const red256 = Math.round(color.red * 255), green256 = Math.round(color.green * 255), blue256 = Math.round(color.blue * 255);
+    let label;
+    if (isColorRender) {
+        if (color.alpha === 1) {
+            label = `'#${toTwoDigitHex(red256)}${toTwoDigitHex(green256)}${toTwoDigitHex(blue256)}`;
+        } else {
+            label = `'#${toTwoDigitHex(red256)}${toTwoDigitHex(green256)}${toTwoDigitHex(blue256)}${toTwoDigitHex(Math.round(color.alpha * 255))}`;
+        }
+        result.push({
+            label: label,
+            textEdit: {
+                range: range,
+                newText: label
+            }
+        });
+        return result;
+    }
+    if (color.alpha === 1) {
+        label = `rgb(${red256},${green256},${blue256})`;
+    } else {
+        label = `rgba(${red256},${green256},${blue256},${color.alpha})`;
+    }
+    result.push({
+        label: label,
+        textEdit: {
+            range: range,
+            newText: label
+        }
+    });
+    if (color.alpha === 1) {
+        label = `#${toTwoDigitHex(red256)}${toTwoDigitHex(green256)}${toTwoDigitHex(blue256)}`;
+    } else {
+        label = `#${toTwoDigitHex(red256)}${toTwoDigitHex(green256)}${toTwoDigitHex(blue256)}${toTwoDigitHex(Math.round(color.alpha * 255))}`;
+    }
+    result.push({
+        label: label,
+        textEdit: {
+            range: range,
+            newText: label
+        }
+    });
+    const hsl = rgb.hsl(red256, green256, blue256);
+    if (color.alpha === 1) {
+        label = `hsl(${hsl[0]},${Math.round(hsl[1])}%,${Math.round(hsl[2])}%)`;
+    } else {
+        label = `hsla(${hsl[0]},${Math.round(hsl[1])}%,${Math.round(hsl[2])}%,${color.alpha})`;
+    }
+    result.push({
+        label: label,
+        textEdit: {
+            range: range,
+            newText: label
+        }
+    });
+    // const hwb = rgb.hwb(red256, green256, blue256)
+    // if (color.alpha === 1) {
+    //     label = `hwb(${hwb[0]}|${hwb[1]}%|${hwb[2]}%)`
+    // } else {
+    //     label = `hwb(${hwb[0]}|${hwb[1]}%|${hwb[2]}%/${color.alpha})`
+    // }
+    // result.push({ label: label, textEdit: { range: range, newText: label } })
+    // const lab = rgb.lab(red256, green256, blue256)
+    // if (color.alpha === 1) {
+    //     label = `lab(${lab[0]}%|${lab[1]}|${lab[2]})`
+    // } else {
+    //     label = `lab(${lab[0]}%|${lab[1]}|${lab[2]}/${color.alpha})`
+    // }
+    // result.push({ label: label, textEdit: { range: range, newText: label } })
+    // const lch = rgb.lch(red256, green256, blue256)
+    // if (color.alpha === 1) {
+    //     label = `lch(${lch[0]}%|${lch[1]}|${lch[2]})`
+    // } else {
+    //     label = `lch(${lch[0]}%|${lch[1]}|${lch[2]}/${color.alpha})`
+    // }
+    // result.push({ label: label, textEdit: { range: range, newText: label } })
+    // const cmyk = rgb.cmyk(red256, green256, blue256)
+    // if (color.alpha === 1) {
+    //     label = `device-cmyk(${cmyk[0]}%|${cmyk[1]}%|${cmyk[2]}%|${cmyk[3]}%)`
+    // } else {
+    //     label = `device-cmyk(${cmyk[0]}%|${cmyk[1]}%|${cmyk[2]}%|${cmyk[3]}%/${color.alpha})`
+    // }
+    // result.push({ label: label, textEdit: { range: range, newText: label } })
+    return result;
+}
+
+export { getColorPresentation, getColorValue, getDocumentColors };

package/dist/providers/completion.cjs

@@ -0,0 +1,289 @@
+'use strict';
+
+var constant = require('../constant.cjs');
+var css = require('@master/css');
+var webCustomData = require('vscode-css-languageservice/lib/umd/data/webCustomData');
+var dataProvider = require('vscode-css-languageservice/lib/umd/languageFacts/dataProvider');
+
+let cssKeys = [];
+cssKeys = cssKeys.concat(constant.masterCssOtherKeys);
+constant.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$1 = new css.MasterCSS()) {
+    let masterStyleCompletionItem = [];
+    masterStyleCompletionItem = masterStyleCompletionItem.concat(getColorsItem(css$1));
+    return masterStyleCompletionItem;
+}
+function getCompletionItem(instance, triggerKey, isStart, language, css$1 = new css.MasterCSS()) {
+    const cssDataProvider = new dataProvider.CSSDataProvider(webCustomData.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$1.config?.selectors ?? {}).map((x)=>x.endsWith('(') ? `${x})` : x).filter((x)=>x.match(/:[^:]+/) && !constant.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$1.config?.selectors ?? {}).map((x)=>x.endsWith('(') ? `${x})` : x).filter((x)=>x.match(/::[^:]+/) && !constant.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;
+    });
+    constant.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$1.config?.variables?.[fullKey]) {
+                const masterCustomVariables = Object.keys(css$1.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 = constant.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$1.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(constant.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(constant.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$1.config?.semantics ?? {}).includes(key) && !constant.masterCssKeyValues.find((x)=>x.key.includes(key))) {
+        masterStyleCompletionItem = masterStyleCompletionItem.concat(getReturnItem(constant.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(constant.masterCssCommonValues, 13).map((x)=>{
+            x.sortText = 'z' + x;
+            return x;
+        }));
+        if (isColorful) {
+            masterStyleCompletionItem = masterStyleCompletionItem.concat(getColorsItem(css$1));
+        }
+        if ((language == 'tsx' || language == 'vue' || language == 'jsx') && triggerKey !== '@' && triggerKey !== ':') {
+            return HaveDash(last, masterStyleCompletionItem);
+        }
+        return masterStyleCompletionItem;
+    }
+    if (masterCssKeys.includes(key) && (haveValue == 2 && triggerKey === ':' || haveValue >= 3) || constant.masterCssKeyValues.find((x)=>x.values.includes(key))) {
+        masterStyleCompletionItem = masterStyleCompletionItem.concat(getReturnItem(constant.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$1 = new css.MasterCSS()) {
+    const masterStyleCompletionItem = [];
+    // todo: refactor css.variables
+    for(const eachVariableName in css$1.variables){
+        const eachVariable = css$1.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;
+    }
+}
+
+exports.checkConfigColorsBlock = checkConfigColorsBlock;
+exports.getCompletionItem = getCompletionItem;
+exports.getConfigColorsCompletionItem = getConfigColorsCompletionItem;
+exports.getLastInstance = getLastInstance;
+exports.getReturnItem = getReturnItem;