@master/css-language-server 2.0.0-beta.62

package/src/documentColorProvider.ts

@@ -0,0 +1,296 @@
+import {
+    TextDocuments,
+    ColorInformation,
+    Color,
+    DocumentColorParams,
+    Position,
+    ColorPresentationParams,
+    ColorPresentation,
+    TextEdit
+} from 'vscode-languageserver/node'
+import { TextDocument } from 'vscode-languageserver-textdocument'
+
+import MasterCSS from '@master/css'
+import { hexToRgb } from './utils/hex-to-rgb'
+import { instancePattern } from './utils/regex'
+
+
+export async function GetColorRender(DocumentColor: DocumentColorParams, documents: TextDocuments<TextDocument>): Promise<ColorInformation[]> {
+    const colors: ColorInformation[] = []
+    const documentUri = DocumentColor.textDocument.uri
+    const document = documents.get(documentUri)
+    const text = document?.getText() ?? ''
+
+    if (typeof document == undefined) {
+        return []
+    }
+    let classMatch: RegExpExecArray | null
+    const hexColorPattern = /(:\s*)'#([0-9a-fA-F]{6,8})'/g
+    let colorMatch: RegExpExecArray | null
+
+    const classPattern = new RegExp('(?<=colors:\\s*{\\s*.*)([^}]*)}','g')
+    while ((classMatch = classPattern.exec(text)) !== null) {
+                //#region  for rgb、hls
+                while ((colorMatch = hexColorPattern.exec(classMatch[0]))) {
+                    const colorInformation: ColorInformation = {
+                        range: {
+                            start: document?.positionAt(classMatch.index + colorMatch.index + colorMatch[1].length ) ?? Position.create(0, 0),
+                            end: document?.positionAt(classMatch.index + colorMatch.index + colorMatch[0].length -1) ?? Position.create(0, 0)
+                        },
+                        color: getColorValue(hexToRgb(colorMatch[2]))
+                    }
+                    colors.push(colorInformation)
+                }
+                //#endregion for rgb、hls
+    }
+    return colors
+}
+
+export async function GetDocumentColors(DocumentColor: DocumentColorParams, documents: TextDocuments<TextDocument>, classAttributes: string[], masterCss: MasterCSS = new MasterCSS()
+): Promise<ColorInformation[]> {
+    let colors: ColorInformation[] = []
+
+    const documentUri = DocumentColor.textDocument.uri
+    const document = documents.get(documentUri)
+    const text = document?.getText() ?? ''
+
+    if (typeof document == undefined) {
+        return []
+    }
+
+    const allMasterCssColorKeys = Object.keys(masterCss.colorsThemesMap)
+
+    let instanceMatch: RegExpExecArray | null
+    while ((instanceMatch = instancePattern.exec(text)) !== null) {
+        const instanceStartIndex = instanceMatch.index
+        const theme = masterCss.themeNames.find(x => instanceMatch?.[0]?.endsWith(`@${x}`)) ?? ''
+
+        const colorPattern = /(?<=[:;|])(?:#?\w+(?:-[\d]{1,2})?(?:\/.?[\d]*)?(?:\([^\s)]+\))?)/g
+        const rgbaColorPattern = /rgba?\(([\d.]+),([\d.]+),([\d.]+)(?:,([\d.]+))?\)/g
+        const hslaColorPattern = /hsla?\(([\d.]+),([\d.]+)%,([\d.]+)%(?:,([\d.]+))?\)/g
+        const hexColorPattern = /#([0-9a-fA-F]{6,8})/g
+        let colorMatch: RegExpExecArray | null
+        let colorMatch2: RegExpExecArray | null
+        let colorName: string
+        let colorNumber: number
+        let colorAlpha: number
+        //check color
+        while ((colorMatch = colorPattern.exec(instanceMatch[0])) !== null) {
+            //#region  for rgb、hls
+            if ((colorMatch2 = rgbaColorPattern.exec(colorMatch[0]))) {
+                const colorInformation: ColorInformation = {
+                    range: {
+                        start: document?.positionAt(instanceStartIndex + colorMatch.index) ?? Position.create(0, 0),
+                        end: document?.positionAt(instanceStartIndex + colorMatch.index + colorMatch[0].length) ?? Position.create(0, 0)
+                    },
+                    color: getColorValue({ red: Number(colorMatch2[1]), green: Number(colorMatch2[2]), blue: Number(colorMatch2[3]), alpha: colorMatch2[4] == undefined ? 1 : Number(colorMatch2[4]) })
+                }
+                colors.push(colorInformation)
+            }
+            else if ((colorMatch2 = hslaColorPattern.exec(colorMatch[0]))) {
+                const colorInformation: ColorInformation = {
+                    range: {
+                        start: document?.positionAt(instanceStartIndex + colorMatch.index) ?? Position.create(0, 0),
+                        end: document?.positionAt(instanceStartIndex + colorMatch.index + colorMatch[0].length) ?? Position.create(0, 0)
+                    },
+                    color: getColorValue(hslToRgb(Number(colorMatch2[1]), Number(colorMatch2[2]), Number(colorMatch2[3]), colorMatch2[4] == undefined ? 1 : Number(colorMatch2[4])))
+                }
+                colors.push(colorInformation)
+            }
+            else if ((colorMatch2 = hexColorPattern.exec(colorMatch[0]))) {
+                const colorInformation: ColorInformation = {
+                    range: {
+                        start: document?.positionAt(instanceStartIndex + colorMatch.index) ?? Position.create(0, 0),
+                        end: document?.positionAt(instanceStartIndex + colorMatch.index + colorMatch[0].length) ?? Position.create(0, 0)
+                    },
+                    color: getColorValue(hexToRgb(colorMatch2[1]))
+                }
+                colors.push(colorInformation)
+            }
+            //#endregion for rgb、hls
+
+            //#region for mastercss color
+            colorAlpha = 1
+            if (colorMatch[0].split('/').length == 2) {
+                colorAlpha = Number('0' + colorMatch[0].split('/')[1])
+            }
+            if (colorMatch[0].split('-').length == 1)//:black  black/.5
+            {
+                colorName = colorMatch[0].split('/')[0]
+                colorName = colorName.endsWith('_') ? colorName.replace('_', '') : colorName
+                if (allMasterCssColorKeys.find(x => x == colorName)) {
+                    const colorInformation: ColorInformation = {
+                        range: {
+                            start: document?.positionAt(instanceStartIndex + colorMatch.index) ?? Position.create(0, 0),
+                            end: document?.positionAt(instanceStartIndex + colorMatch.index + colorMatch[0].length) ?? Position.create(0, 0)
+                        },
+                        color: getColorsRGBA(colorName, '', colorAlpha, theme, masterCss)
+                    }
+                    colors.push(colorInformation)
+                }
+
+            }
+            else if (colorMatch[0].split('-').length == 2) { //:red-60 red-60/.5
+
+                colorName = colorMatch[0].split('-')[0]
+                colorNumber = Number(colorMatch[0].split('-')[1].split('/')[0])
+
+
+                if (allMasterCssColorKeys.find(x => x == colorName) && colorNumber > 0 && colorNumber < 100) {
+                    const colorInformation: ColorInformation = {
+                        range: {
+                            start: document?.positionAt(instanceStartIndex + colorMatch.index) ?? Position.create(0, 0),
+                            end: document?.positionAt(instanceStartIndex + colorMatch.index + colorMatch[0].length) ?? Position.create(0, 0)
+                        },
+                        color: getColorsRGBA(colorName, colorNumber, colorAlpha, theme, masterCss)
+                    }
+                    colors.push(colorInformation)
+                }
+            }
+
+            else if (colorMatch[0].split('-').length != 2) {
+                continue
+            }
+            //#endregion  for mastercss color
+        }
+    }
+    
+    const set = new Set()
+    colors = colors.filter(item => {
+        if (set.has(document?.offsetAt(item.range.start))) {
+          return false
+        } else {
+          set.add(document?.offsetAt(item.range.start))
+          return true
+        }
+      })
+
+    return colors
+}
+
+function getColorsRGBA(colorName: string, colorNumber: number | string, colorAlpha = 1, theme = '', masterCss: MasterCSS = new MasterCSS()): Color {
+    try {
+        const colorNumberMap = masterCss.colorsThemesMap[colorName]
+        const levelRgb = hexToRgb(colorNumberMap[colorNumber][theme] ?? colorNumberMap[colorNumber][''] ?? Object.values(colorNumberMap[colorNumber])[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 }
+    }
+}
+export interface HWBA { h: number; w: number; b: number; a: number; }
+
+export interface HSLA { h: number; s: number; l: number; a: number; }
+
+function toTwoDigitHex(n: number): string {
+    const r = n.toString(16)
+    return r.length !== 2 ? '0' + r : r
+}
+export function hslFromColor(rgba: Color): HSLA {
+    const r = rgba.red
+    const g = rgba.green
+    const b = rgba.blue
+    const a = rgba.alpha
+
+    const max = Math.max(r, g, b)
+    const min = Math.min(r, g, b)
+    let h = 0
+    let s = 0
+    const l = (min + max) / 2
+    const chroma = max - min
+
+    if (chroma > 0) {
+        s = Math.min((l <= 0.5 ? chroma / (2 * l) : chroma / (2 - (2 * l))), 1)
+
+        switch (max) {
+            case r: h = (g - b) / chroma + (g < b ? 6 : 0); break
+            case g: h = (b - r) / chroma + 2; break
+            case b: h = (r - g) / chroma + 4; break
+        }
+
+        h *= 60
+        h = Math.round(h)
+    }
+    return { h, s, l, a }
+}
+export function hwbFromColor(rgba: Color): HWBA {
+    const hsl = hslFromColor(rgba)
+    const white = Math.min(rgba.red, rgba.green, rgba.blue)
+    const black = 1 - Math.max(rgba.red, rgba.green, rgba.blue)
+
+    return {
+        h: hsl.h,
+        w: white,
+        b: black,
+        a: hsl.a
+    }
+}
+
+
+export function hslToRgb(h: number, s: number, l: number, alpha?: number): Color {
+    l /= 100
+    const k = (n: number) => (n + h / 30) % 12
+    const a = (s / 100) * Math.min(l, 1 - l)
+    const f = (n: number) =>
+        l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)))
+
+    return { red: 255 * f(0), green: 255 * f(8), blue: 255 * f(4), alpha: alpha ?? 1 }
+}
+
+export function getColorValue(color: Color): Color {
+    return { red: color.red / 255.0, green: color.green / 255.0, blue: color.blue / 255.0, alpha: color.alpha }
+}
+
+export function GetColorPresentation(params: ColorPresentationParams, isColorRender = false) {
+    const result: ColorPresentation[] = []
+    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: TextEdit.replace(range, 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: TextEdit.replace(range, 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: TextEdit.replace(range, label) })
+
+    const hsl = hslFromColor(color)
+    if (hsl.a === 1) {
+        label = `hsl(${hsl.h},${Math.round(hsl.s * 100)}%,${Math.round(hsl.l * 100)}%)`
+    } else {
+        label = `hsla(${hsl.h},${Math.round(hsl.s * 100)}%,${Math.round(hsl.l * 100)}%,${hsl.a})`
+    }
+    result.push({ label: label, textEdit: TextEdit.replace(range, label) })
+
+    // const hwb = hwbFromColor(color);
+    // if (hwb.a === 1) {
+    //     label = `hwb(${hwb.h} ${Math.round(hwb.w * 100)}% ${Math.round(hwb.b * 100)}%)`;
+    // } else {
+    //     label = `hwb(${hwb.h} ${Math.round(hwb.w * 100)}% ${Math.round(hwb.b * 100)}% / ${hwb.a})`;
+    // }
+    // result.push({ label: label, textEdit: TextEdit.replace(range, label) });
+
+    return result
+}

package/src/hoverProvider.ts

@@ -0,0 +1,158 @@
+import {
+    TextDocuments,
+    TextDocumentPositionParams,
+    Hover
+} from 'vscode-languageserver/node'
+import { Range, TextDocument } from 'vscode-languageserver-textdocument'
+import MasterCSS, { render } from '@master/css'
+import { css_beautify } from 'js-beautify'
+
+
+export function GetHoverInstance(textDocumentPosition: TextDocumentPositionParams, documents: TextDocuments<TextDocument>) {
+    const documentUri = textDocumentPosition.textDocument.uri
+    const language = documentUri.substring(documentUri.lastIndexOf('.') + 1)
+    const position = textDocumentPosition.position
+
+    const classPattern = /(?:[^"{'\s])+(?=>\s|\b)/g
+    let classMatch: RegExpExecArray | null
+
+    const document = documents.get(documentUri)
+
+    let instanceRange =
+    {
+        start: { line: 0, character: 0 },
+        end: { line: 0, character: 0 },
+    }
+
+    const line = document?.getText({
+        start: { line: position.line, character: 0 },
+        end: { line: position.line + 1, character: 0 },
+    })
+
+    let lineText: string = line == null ? '' : line
+
+    const text = document?.getText({
+        start: { line: 0, character: 0 },
+        end: { line: position.line, character: position.character },
+    })
+
+    //#region is in class
+    const lastClass = text?.lastIndexOf('class') ?? -1
+    const lastclassName = text?.lastIndexOf('className') ?? -1
+    const tsxclassName = text?.lastIndexOf('className={') ?? -1
+
+    if (lastClass + lastclassName + tsxclassName == -1) {
+        return { isInstance: false, instance: '', range: instanceRange, language: language }
+    }
+
+    const tsxclassNameMode = tsxclassName >= (lastClass > lastclassName ? lastClass : lastclassName)
+    let textSub = text?.substring(lastClass > lastclassName ? lastClass : lastclassName)
+    textSub = textSub == null ? '' : textSub
+
+
+    let classQuoted = '', classIndexAddOne = '', classIndexAddTwo = ''
+
+
+    if (tsxclassNameMode) {
+        textSub = text?.substring(tsxclassName) == null ? '' : textSub
+        if (InCurlyBrackets(textSub) == false) {
+            return { isInstance: false, instance: '', range: instanceRange, language: language }
+        }
+    }
+    else {
+        if (lastClass > lastclassName) {
+            classIndexAddOne = textSub.substring(5).trimStart().charAt(0)
+            classIndexAddTwo = textSub.substring(5).trimStart().substring(1).trimStart().charAt(0)
+        }
+        else if (lastClass <= lastclassName) {
+            classIndexAddOne = textSub.substring(9).trimStart().charAt(0)
+            classIndexAddTwo = textSub.substring(9).trimStart().substring(1).trimStart().charAt(0)
+        }
+        classQuoted = classIndexAddOne + classIndexAddTwo
+        if (classQuoted != '=\'' && classQuoted != '=`' && classQuoted != '="') {
+            return { isInstance: false, instance: '', range: instanceRange, language: language }
+        }
+    }
+
+    const quotedSingle = textSub.split('\'').length - 1
+    const quotedDouble = textSub.split('"').length - 1
+    const quotedTemplate = textSub.split('`').length - 1
+    if (!tsxclassNameMode) {
+        if (classQuoted == '=\'' && quotedSingle >= 2) {
+            return { isInstance: false, instance: '', range: instanceRange, language: language }
+        }
+        else if (classQuoted == '="' && quotedDouble >= 2) {
+            return { isInstance: false, instance: '', range: instanceRange, language: language }
+        }
+        else if (classQuoted == '=`' && quotedTemplate >= 2) {
+            return { isInstance: false, instance: '', range: instanceRange, language: language }
+        }
+    }
+
+    if (!((quotedSingle > 0 || quotedDouble > 0 || quotedTemplate > 0) && (quotedSingle % 2 != 0 || quotedDouble % 2 != 0 || quotedTemplate % 2 != 0))) {
+        return { isInstance: false, instance: '', range: instanceRange, language: language }
+    }
+    //#endregion is in class
+    lineText = lineText.replace('[^\\S\\r\\n]+', ' ')
+
+    let instanceStart = lineText.substring(0, position.character).lastIndexOf(' ')
+    let instanceEnd = lineText.indexOf(' ', position.character)
+    instanceEnd = instanceEnd == -1 ? lineText.length - 1 : instanceEnd
+
+    if (tsxclassNameMode) {
+        instanceStart = instanceStart > lineText.substring(0, position.character).lastIndexOf('{') ? instanceStart : lineText.substring(0, position.character).lastIndexOf('{')
+        instanceEnd = instanceEnd < lineText.indexOf('}', position.character) ? instanceEnd : (lineText.indexOf('}', position.character)==-1?instanceEnd:lineText.indexOf('}', position.character))
+    }
+    else {
+        instanceStart = instanceStart > lineText.substring(0, position.character).lastIndexOf(classIndexAddTwo) ? instanceStart : lineText.substring(0, position.character).lastIndexOf(classIndexAddTwo)
+        instanceEnd = instanceEnd > lineText.indexOf(classIndexAddTwo, position.character)
+            && lineText.indexOf(classIndexAddTwo, position.character) != -1
+            ? lineText.indexOf(classIndexAddTwo, position.character)
+            : instanceEnd
+    }
+
+
+    instanceRange = {
+        start: { line: position.line, character: instanceStart + 1 },
+        end: { line: position.line, character: instanceEnd },
+    }
+    const instance = document?.getText(instanceRange) ?? ''
+
+    return { isInstance: true, instance: instance, range: instanceRange, language: language }
+}
+function InCurlyBrackets(text: string): boolean {
+    let curlybrackets = 0
+    for (let i = 0; i < text.length; i++) {
+        if (text.charAt(i) == '{') {
+            curlybrackets += 1
+        }
+        else if (text.charAt(i) == '}') {
+            curlybrackets -= 1
+            if (curlybrackets <= 0) {
+                return false
+            }
+        }
+    }
+    if (curlybrackets <= 0) {
+        return false
+    }
+    return true
+}
+
+export function doHover(instance: string, range: Range, masterCss: MasterCSS = new MasterCSS()): Hover | null {
+    const renderText = render(instance.split(' '), masterCss)
+    if (!renderText || renderText == ' ') {
+        return null
+    }
+
+    return {
+        contents: {
+            language: 'css',
+            value: css_beautify(renderText, {
+                newline_between_rules: true,
+                end_with_newline: true
+            })
+        },
+        range: range
+    }
+}

package/src/masterCss.ts

@@ -0,0 +1,80 @@
+import {
+    TextDocuments,
+    Position,
+} from 'vscode-languageserver/node'
+import { Range, TextDocument } from 'vscode-languageserver-textdocument'
+import { instancePattern } from './utils/regex'
+
+export function PositionCheck(documentUri: string, position: Position, documents: TextDocuments<TextDocument>, RegExpList: string[]) {
+    const result: {
+        IsMatch: boolean,
+        PositionIndex: number,
+        classStartIndex: number,
+        classEndIndex: number,
+        classString: string,
+        instance: { range: Range, instanceString: string },
+        instanceList: { range: Range, instanceString: string }[],
+    } = {
+        IsMatch: false,
+        PositionIndex: 0,
+        classStartIndex: 0,
+        classEndIndex: 0,
+        classString: '',
+        instance: { range: { start: Position.create(0, 0), end: Position.create(0, 0) }, instanceString: '' },
+        instanceList: [],
+    }
+
+    const document = documents.get(documentUri)
+    let text = document?.getText() ?? ''
+    const positionIndex = document?.offsetAt(position) ?? 0
+
+    const startIndex = document?.offsetAt({ line: position.line - 100, character: 0}) ?? 0
+    const endIndex = document?.offsetAt({ line: position.line + 100, character: 0 }) ?? undefined
+    text = text.substring(startIndex, endIndex)
+
+    let instanceMatch: RegExpExecArray | null
+    let classMatch: RegExpExecArray | null
+
+    result.PositionIndex = positionIndex
+
+    RegExpList.forEach(x => {
+        const classPattern = new RegExp(x, 'g')
+        
+        while ((classMatch = classPattern.exec(text)) !== null) {
+            if ((classMatch.index <= positionIndex && classMatch.index + classMatch[0].length - 1 >= positionIndex) == true) {
+                result.IsMatch = true
+                result.PositionIndex = positionIndex
+                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(
+                        {
+                            range: {
+                                start: document?.positionAt(classMatch.index + classMatch[1].length + instanceMatch.index) ?? Position.create(0, 0),
+                                end: document?.positionAt(classMatch.index + classMatch[1].length + instanceMatch.index + instanceMatch[0].length) ?? Position.create(0, 0)
+                            },
+                            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 = {
+                            range: {
+                                start: document?.positionAt(classMatch.index + classMatch[1].length + instanceMatch.index) ?? Position.create(0, 0),
+                                end: document?.positionAt(classMatch.index + classMatch[1].length + instanceMatch.index + instanceMatch[0].length) ?? Position.create(0, 0)
+                            },
+                            instanceString: instanceMatch[0]
+                        }
+                    }
+                }
+
+                return result
+            }
+            else if (classMatch.index > positionIndex) {
+                break
+            }
+        }
+    })
+    return result
+}