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

package/dist/index.cjs

@@ -0,0 +1,21 @@
+'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');
+var settings = require('./settings.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;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-export { getDocumentColors, getColorValue, getColorPresentation } from './providers/color';
-export { checkConfigColorsBlock, getLastInstance, getConfigColorsCompletionItem, getCompletionItem, getReturnItem } from './providers/completion';
-export { doHover } from './providers/hover';
-export { positionCheck } from './position-check';
-export { settings } from './settings';
+export * from './providers/color';
+export * from './providers/completion';
+export * from './providers/hover';
+export * from './position-check';
+export * from './settings';

package/dist/index.mjs

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

package/dist/position-check.cjs

@@ -0,0 +1,57 @@
+'use strict';
+
+var regex = require('./utils/regex.cjs');
+
+function positionCheck(text, positionIndex, startIndex, RegExpList) {
+    const result = {
+        IsMatch: false,
+        classStartIndex: 0,
+        classEndIndex: 0,
+        classString: '',
+        instance: {
+            index: {
+                start: 0,
+                end: 0
+            },
+            instanceString: ''
+        },
+        instanceList: []
+    };
+    let instanceMatch;
+    let classMatch;
+    RegExpList.forEach((x)=>{
+        const classPattern = new RegExp(x, 'g');
+        while((classMatch = classPattern.exec(text)) !== null){
+            if ((classMatch.index <= positionIndex - startIndex && classMatch.index + classMatch[0].length - 1 >= positionIndex - startIndex) == true) {
+                result.IsMatch = true;
+                result.classStartIndex = classMatch.index;
+                result.classEndIndex = classMatch.index + classMatch[0].length - 1;
+                result.classString = classMatch[0];
+                while((instanceMatch = regex.instancePattern.exec(classMatch[2])) !== null){
+                    result.instanceList.push({
+                        index: {
+                            start: classMatch.index + classMatch[1].length + instanceMatch.index,
+                            end: classMatch.index + classMatch[1].length + instanceMatch.index + instanceMatch[0].length
+                        },
+                        instanceString: instanceMatch[0]
+                    });
+                    if ((classMatch.index + classMatch[1].length + instanceMatch.index <= positionIndex && classMatch.index + classMatch[1].length + instanceMatch.index + instanceMatch[0].length >= positionIndex) == true) {
+                        result.instance = {
+                            index: {
+                                start: classMatch.index + classMatch[1].length + instanceMatch.index,
+                                end: classMatch.index + classMatch[1].length + instanceMatch.index + instanceMatch[0].length
+                            },
+                            instanceString: instanceMatch[0]
+                        };
+                    }
+                }
+                return result;
+            } else if (classMatch.index > positionIndex - startIndex) {
+                break;
+            }
+        }
+    });
+    return result;
+}
+
+exports.positionCheck = positionCheck;

package/dist/position-check.mjs

@@ -0,0 +1,55 @@
+import { instancePattern } from './utils/regex.mjs';
+
+function positionCheck(text, positionIndex, startIndex, RegExpList) {
+    const result = {
+        IsMatch: false,
+        classStartIndex: 0,
+        classEndIndex: 0,
+        classString: '',
+        instance: {
+            index: {
+                start: 0,
+                end: 0
+            },
+            instanceString: ''
+        },
+        instanceList: []
+    };
+    let instanceMatch;
+    let classMatch;
+    RegExpList.forEach((x)=>{
+        const classPattern = new RegExp(x, 'g');
+        while((classMatch = classPattern.exec(text)) !== null){
+            if ((classMatch.index <= positionIndex - startIndex && classMatch.index + classMatch[0].length - 1 >= positionIndex - startIndex) == true) {
+                result.IsMatch = true;
+                result.classStartIndex = classMatch.index;
+                result.classEndIndex = classMatch.index + classMatch[0].length - 1;
+                result.classString = classMatch[0];
+                while((instanceMatch = instancePattern.exec(classMatch[2])) !== null){
+                    result.instanceList.push({
+                        index: {
+                            start: classMatch.index + classMatch[1].length + instanceMatch.index,
+                            end: classMatch.index + classMatch[1].length + instanceMatch.index + instanceMatch[0].length
+                        },
+                        instanceString: instanceMatch[0]
+                    });
+                    if ((classMatch.index + classMatch[1].length + instanceMatch.index <= positionIndex && classMatch.index + classMatch[1].length + instanceMatch.index + instanceMatch[0].length >= positionIndex) == true) {
+                        result.instance = {
+                            index: {
+                                start: classMatch.index + classMatch[1].length + instanceMatch.index,
+                                end: classMatch.index + classMatch[1].length + instanceMatch.index + instanceMatch[0].length
+                            },
+                            instanceString: instanceMatch[0]
+                        };
+                    }
+                }
+                return result;
+            } else if (classMatch.index > positionIndex - startIndex) {
+                break;
+            }
+        }
+    });
+    return result;
+}
+
+export { positionCheck };

package/dist/providers/color.cjs

@@ -0,0 +1,319 @@
+'use strict';
+
+var css = require('@master/css');
+var hexToRgb = require('../utils/hex-to-rgb.cjs');
+var regex = require('../utils/regex.cjs');
+var toTwoDigitHex = require('../utils/to-two-digit-hex.cjs');
+var colorConvert = require('color-convert');
+var oklabToRgb = require('../utils/oklab-to-rgb.cjs');
+var oklchToOklab = require('../utils/oklch-to-oklab.cjs');
+
+async function getDocumentColors(text, css$1 = new css.MasterCSS()) {
+    const colors = [];
+    let instanceMatch;
+    while((instanceMatch = regex.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$1);
+            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$1 = new css.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 = colorConvert.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 = colorConvert.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.oklchToOklab([
+            percentageConverter(colorMatch2[1]),
+            percentageConverter(colorMatch2[2], 0.4),
+            degConverter(colorMatch2[3])
+        ]);
+        const rgb = oklabToRgb.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 = colorConvert.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.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 = colorConvert.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 = colorConvert.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.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$1.variables){
+        const eachVariable = css$1.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$1);
+    }
+//#endregion  for mastercss color
+}
+function getColorsRGBA(colorName, colorAlpha = 1, theme = '', css$1 = new css.MasterCSS()) {
+    try {
+        // todo: refactor colorNumberMap
+        const colorNumberMap = css$1.variables[colorName];
+        const levelRgb = hexToRgb.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.toTwoDigitHex(red256)}${toTwoDigitHex.toTwoDigitHex(green256)}${toTwoDigitHex.toTwoDigitHex(blue256)}`;
+        } else {
+            label = `'#${toTwoDigitHex.toTwoDigitHex(red256)}${toTwoDigitHex.toTwoDigitHex(green256)}${toTwoDigitHex.toTwoDigitHex(blue256)}${toTwoDigitHex.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.toTwoDigitHex(red256)}${toTwoDigitHex.toTwoDigitHex(green256)}${toTwoDigitHex.toTwoDigitHex(blue256)}`;
+    } else {
+        label = `#${toTwoDigitHex.toTwoDigitHex(red256)}${toTwoDigitHex.toTwoDigitHex(green256)}${toTwoDigitHex.toTwoDigitHex(blue256)}${toTwoDigitHex.toTwoDigitHex(Math.round(color.alpha * 255))}`;
+    }
+    result.push({
+        label: label,
+        textEdit: {
+            range: range,
+            newText: label
+        }
+    });
+    const hsl = colorConvert.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;
+}
+
+exports.getColorPresentation = getColorPresentation;
+exports.getColorValue = getColorValue;
+exports.getDocumentColors = getDocumentColors;