vscode-css-languageservice 6.3.3-0 → 6.3.3-2

package/lib/esm/languageFacts/colors.js

@@ -126,8 +126,32 @@ export const colorFunctions = [
         insertText: 'color-mix(in ${1|hsl,hwb,lch,oklch|} ${2|shorter hue,longer hue,increasing hue,decreasing hue|}, ${3:color} ${4:percentage}, ${5:color} ${6:percentage})',
         desc: l10n.t('Mix two colors together in a polar color space.')
     },
+    {
+        label: 'lab',
+        func: 'lab($lightness $channel_a $channel_b $alpha)',
+        insertText: 'lab(${1:lightness} ${2:a} ${3:b} ${4:alpha})',
+        desc: l10n.t('css.builtin.lab', 'Creates a Color from Lightness, Channel a, Channel b and alpha values.')
+    },
+    {
+        label: 'lab relative',
+        func: 'lab(from $color $lightness $channel_a $channel_b $alpha)',
+        insertText: 'lab(from ${1:color} ${2:lightness} ${3:channel_a} ${4:channel_b} ${5:alpha})',
+        desc: l10n.t('css.builtin.lab', 'Creates a Color from Lightness, Channel a, Channel b and alpha values of another Color.')
+    },
+    {
+        label: 'lch',
+        func: 'lch($lightness $chrome $hue $alpha)',
+        insertText: 'lch(${1:lightness} ${2:chrome} ${3:hue} ${4:alpha})',
+        desc: l10n.t('css.builtin.lab', 'Creates a Color from Lightness, Chroma, Hue and alpha values.')
+    },
+    {
+        label: 'lch relative',
+        func: 'lch(from $color $lightness $chrome $hue $alpha)',
+        insertText: 'lch(from ${1:color} ${2:lightness} ${3:chrome} ${4:hue} ${5:alpha})',
+        desc: l10n.t('css.builtin.lab', 'Creates a Color from Lightness, Chroma, Hue and alpha values of another Color.')
+    }
 ];
-const colorFunctionNameRegExp = /^(rgb|rgba|hsl|hsla|hwb)$/i;
+const colorFunctionNameRegExp = /^(rgb|rgba|hsl|hsla|hwb|lab|lch)$/i;
 export const colors = {
     aliceblue: '#f0f8ff',
     antiquewhite: '#faebd7',
@@ -284,7 +308,7 @@ export const colorKeywords = {
     'transparent': 'Fully transparent. This keyword can be considered a shorthand for rgba(0,0,0,0) which is its computed value.',
 };
 const colorKeywordsRegExp = new RegExp(`^(${Object.keys(colorKeywords).join('|')})$`, "i");
-function getNumericValue(node, factor) {
+function getNumericValue(node, factor, lowerLimit = 0, upperLimit = 1) {
     const val = node.getText();
     const m = val.match(/^([-+]?[0-9]*\.?[0-9]+)(%?)$/);
     if (m) {
@@ -292,7 +316,7 @@ function getNumericValue(node, factor) {
             factor = 100.0;
         }
         const result = parseFloat(m[1]) / factor;
-        if (result >= 0 && result <= 1) {
+        if (result >= lowerLimit && result <= upperLimit) {
             return result;
         }
     }
@@ -511,6 +535,163 @@ export function hwbFromColor(rgba) {
         a: hsl.a
     };
 }
+export function xyzFromLAB(lab) {
+    const xyz = {
+        x: 0,
+        y: 0,
+        z: 0,
+        alpha: lab.alpha ?? 1
+    };
+    xyz.y = (lab.l + 16.0) / 116.0;
+    xyz.x = (lab.a / 500.0) + xyz.y;
+    xyz.z = xyz.y - (lab.b / 200.0);
+    let key;
+    for (key in xyz) {
+        let pow = xyz[key] * xyz[key] * xyz[key];
+        if (pow > 0.008856) {
+            xyz[key] = pow;
+        }
+        else {
+            xyz[key] = (xyz[key] - 16.0 / 116.0) / 7.787;
+        }
+    }
+    xyz.x = xyz.x * 95.047;
+    xyz.y = xyz.y * 100.0;
+    xyz.z = xyz.z * 108.883;
+    return xyz;
+}
+export function xyzToRGB(xyz) {
+    const x = xyz.x / 100;
+    const y = xyz.y / 100;
+    const z = xyz.z / 100;
+    const r = 3.2406254773200533 * x - 1.5372079722103187 * y - 0.4986285986982479 * z;
+    const g = -0.9689307147293197 * x + 1.8757560608852415 * y + 0.041517523842953964 * z;
+    const b = 0.055710120445510616 * x + -0.2040210505984867 * y + 1.0569959422543882 * z;
+    const compand = (c) => {
+        return c <= 0.0031308 ?
+            12.92 * c :
+            Math.min(1.055 * Math.pow(c, 1 / 2.4) - 0.055, 1);
+    };
+    return {
+        red: Math.round(compand(r) * 255.0),
+        blue: Math.round(compand(b) * 255.0),
+        green: Math.round(compand(g) * 255.0),
+        alpha: xyz.alpha
+    };
+}
+export function RGBtoXYZ(rgba) {
+    let r = rgba.red, g = rgba.green, b = rgba.blue;
+    if (r > 0.04045) {
+        r = Math.pow((r + 0.055) / 1.055, 2.4);
+    }
+    else {
+        r = r / 12.92;
+    }
+    if (g > 0.04045) {
+        g = Math.pow((g + 0.055) / 1.055, 2.4);
+    }
+    else {
+        g = g / 12.92;
+    }
+    if (b > 0.04045) {
+        b = Math.pow((b + 0.055) / 1.055, 2.4);
+    }
+    else {
+        b = b / 12.92;
+    }
+    r = r * 100;
+    g = g * 100;
+    b = b * 100;
+    //Observer = 2°, Illuminant = D65
+    const x = r * 0.4124 + g * 0.3576 + b * 0.1805;
+    const y = r * 0.2126 + g * 0.7152 + b * 0.0722;
+    const z = r * 0.0193 + g * 0.1192 + b * 0.9505;
+    return { x, y, z, alpha: rgba.alpha };
+}
+export function XYZtoLAB(xyz, round = true) {
+    const ref_X = 95.047, ref_Y = 100.000, ref_Z = 108.883;
+    let x = xyz.x / ref_X, y = xyz.y / ref_Y, z = xyz.z / ref_Z;
+    if (x > 0.008856) {
+        x = Math.pow(x, 1 / 3);
+    }
+    else {
+        x = (7.787 * x) + (16 / 116);
+    }
+    if (y > 0.008856) {
+        y = Math.pow(y, 1 / 3);
+    }
+    else {
+        y = (7.787 * y) + (16 / 116);
+    }
+    if (z > 0.008856) {
+        z = Math.pow(z, 1 / 3);
+    }
+    else {
+        z = (7.787 * z) + (16 / 116);
+    }
+    const l = (116 * y) - 16, a = 500 * (x - y), b = 200 * (y - z);
+    if (round) {
+        return {
+            l: Math.round((l + Number.EPSILON) * 100) / 100,
+            a: Math.round((a + Number.EPSILON) * 100) / 100,
+            b: Math.round((b + Number.EPSILON) * 100) / 100,
+            alpha: xyz.alpha
+        };
+    }
+    else {
+        return {
+            l, a, b,
+            alpha: xyz.alpha
+        };
+    }
+}
+export function labFromColor(rgba, round = true) {
+    const xyz = RGBtoXYZ(rgba);
+    const lab = XYZtoLAB(xyz, round);
+    return lab;
+}
+export function lchFromColor(rgba) {
+    const lab = labFromColor(rgba, false);
+    const c = Math.sqrt(Math.pow(lab.a, 2) + Math.pow(lab.b, 2));
+    let h = Math.atan2(lab.b, lab.a) * (180 / Math.PI);
+    while (h < 0) {
+        h = h + 360;
+    }
+    return {
+        l: Math.round((lab.l + Number.EPSILON) * 100) / 100,
+        c: Math.round((c + Number.EPSILON) * 100) / 100,
+        h: Math.round((h + Number.EPSILON) * 100) / 100,
+        alpha: lab.alpha
+    };
+}
+export function colorFromLAB(l, a, b, alpha = 1.0) {
+    const lab = {
+        l,
+        a,
+        b,
+        alpha
+    };
+    const xyz = xyzFromLAB(lab);
+    const rgb = xyzToRGB(xyz);
+    return {
+        red: (rgb.red >= 0 ? (rgb.red <= 255 ? rgb.red : 255) : 0) / 255.0,
+        green: (rgb.green >= 0 ? (rgb.green <= 255 ? rgb.green : 255) : 0) / 255.0,
+        blue: (rgb.blue >= 0 ? (rgb.blue <= 255 ? rgb.blue : 255) : 0) / 255.0,
+        alpha
+    };
+}
+export function labFromLCH(l, c, h, alpha = 1.0) {
+    return {
+        l: l,
+        a: c * Math.cos(h * (Math.PI / 180)),
+        b: c * Math.sin(h * (Math.PI / 180)),
+        alpha: alpha
+    };
+}
+export function colorFromLCH(l, c, h, alpha = 1.0) {
+    const lab = labFromLCH(l, c, h, alpha);
+    return colorFromLAB(lab.l, lab.a, lab.b, alpha);
+}
 export function getColorValue(node) {
     if (node.type === nodes.NodeType.HexColorValue) {
         const text = node.getText();
@@ -560,6 +741,20 @@ export function getColorValue(node) {
                 const b = getNumericValue(colorValues[2], 100.0);
                 return colorFromHWB(h, w, b, alpha);
             }
+            else if (name === 'lab') {
+                // Reference: https://mina86.com/2021/srgb-lab-lchab-conversions/
+                const l = getNumericValue(colorValues[0], 100.0);
+                // Since these two values can be negative, a lower limit of -1 has been added
+                const a = getNumericValue(colorValues[1], 125.0, -1);
+                const b = getNumericValue(colorValues[2], 125.0, -1);
+                return colorFromLAB(l * 100, a * 125, b * 125, alpha);
+            }
+            else if (name === 'lch') {
+                const l = getNumericValue(colorValues[0], 100.0);
+                const c = getNumericValue(colorValues[1], 230.0);
+                const h = getAngle(colorValues[2]);
+                return colorFromLCH(l * 100, c * 230, h, alpha);
+            }
         }
         catch (e) {
             // parse error on numeric value

package/lib/esm/parser/cssNodes.js

@@ -99,6 +99,8 @@ export var NodeType;
     NodeType[NodeType["PropertyAtRule"] = 86] = "PropertyAtRule";
     NodeType[NodeType["Container"] = 87] = "Container";
     NodeType[NodeType["ModuleConfig"] = 88] = "ModuleConfig";
+    NodeType[NodeType["SelectorList"] = 89] = "SelectorList";
+    NodeType[NodeType["StartingStyleAtRule"] = 90] = "StartingStyleAtRule";
 })(NodeType || (NodeType = {}));
 export var ReferenceType;
 (function (ReferenceType) {
@@ -910,6 +912,14 @@ export class PropertyAtRule extends BodyDeclaration {
         return this.name;
     }
 }
+export class StartingStyleAtRule extends BodyDeclaration {
+    constructor(offset, length) {
+        super(offset, length);
+    }
+    get type() {
+        return NodeType.StartingStyleAtRule;
+    }
+}
 export class Document extends BodyDeclaration {
     constructor(offset, length) {
         super(offset, length);

package/lib/esm/parser/cssParser.js

@@ -277,6 +277,7 @@ export class Parser {
             || this._parseNamespace()
             || this._parseDocument()
             || this._parseContainer(isNested)
+            || this._parseStartingStyleAtRule(isNested)
             || this._parseUnknownAtRule();
     }
     _tryParseRuleset(isNested) {
@@ -311,6 +312,7 @@ export class Parser {
             || this._parseSupports(true)
             || this._parseLayer(true)
             || this._parseContainer(true)
+            || this._parseStartingStyleAtRule(true)
             || this._parseUnknownAtRule();
     }
     _parseRuleSetDeclaration() {
@@ -771,6 +773,26 @@ export class Parser {
         }
         return this._parseBody(node, this._parseDeclaration.bind(this));
     }
+    _parseStartingStyleAtRule(isNested = false) {
+        if (!this.peekKeyword("@starting-style")) {
+            return null;
+        }
+        const node = this.create(nodes.StartingStyleAtRule);
+        this.consumeToken(); // @starting-style
+        return this._parseBody(node, this._parseStartingStyleDeclaration.bind(this, isNested));
+    }
+    // this method is the same as ._parseContainerDeclaration()
+    // which is the same as ._parseMediaDeclaration(),
+    // _parseSupportsDeclaration, and ._parseLayerDeclaration()
+    _parseStartingStyleDeclaration(isNested = false) {
+        if (isNested) {
+            // if nested, the body can contain rulesets, but also declarations
+            return this._tryParseRuleset(true)
+                || this._tryToParseDeclaration()
+                || this._parseStylesheetStatement(true);
+        }
+        return this._parseStylesheetStatement(false);
+    }
     _parseLayer(isNested = false) {
         // @layer layer-name {rules}
         // @layer layer-name;
@@ -1510,7 +1532,7 @@ export class Parser {
         if (node) {
             if (!this.hasWhitespace() && this.accept(TokenType.ParenthesisL)) {
                 const tryAsSelector = () => {
-                    const selectors = this.create(nodes.Node);
+                    const selectors = this.createNode(nodes.NodeType.SelectorList);
                     if (!selectors.addChild(this._parseSelector(true))) {
                         return null;
                     }
@@ -1524,8 +1546,11 @@ export class Parser {
                 };
                 let hasSelector = node.addChild(this.try(tryAsSelector));
                 if (!hasSelector) {
-                    if (node.addChild(this._parseBinaryExpr()) &&
-                        this.acceptIdent('of') &&
+                    // accept the <an+b> syntax (not a proper expression) https://drafts.csswg.org/css-syntax/#anb
+                    while (!this.peekIdent('of') && (node.addChild(this._parseTerm()) || node.addChild(this._parseOperator()))) {
+                        // loop
+                    }
+                    if (this.acceptIdent('of') &&
                         !node.addChild(this.try(tryAsSelector))) {
                         return this.finish(node, ParseError.SelectorExpected);
                     }

package/lib/esm/parser/cssScanner.js

@@ -393,15 +393,21 @@ export class Scanner {
         return false;
     }
     _number() {
-        let npeek = 0, ch;
-        if (this.stream.peekChar() === _DOT) {
-            npeek = 1;
+        let npeek = 0;
+        let hasDot = false;
+        const peekFirst = this.stream.peekChar();
+        if (peekFirst === _PLS || peekFirst === _MIN) {
+            npeek++;
         }
-        ch = this.stream.peekChar(npeek);
+        if (this.stream.peekChar(npeek) === _DOT) {
+            npeek++;
+            hasDot = true;
+        }
+        const ch = this.stream.peekChar(npeek);
         if (ch >= _0 && ch <= _9) {
             this.stream.advance(npeek + 1);
             this.stream.advanceWhileChar((ch) => {
-                return ch >= _0 && ch <= _9 || npeek === 0 && ch === _DOT;
+                return ch >= _0 && ch <= _9 || !hasDot && ch === _DOT;
             });
             return true;
         }

package/lib/esm/services/cssNavigation.js

@@ -7,7 +7,7 @@ import { DocumentHighlightKind, Location, Range, SymbolKind, TextEdit, FileType
 import * as l10n from '@vscode/l10n';
 import * as nodes from '../parser/cssNodes';
 import { Symbols } from '../parser/cssSymbolScope';
-import { getColorValue, hslFromColor, hwbFromColor } from '../languageFacts/facts';
+import { getColorValue, hslFromColor, hwbFromColor, labFromColor, lchFromColor } from '../languageFacts/facts';
 import { startsWith } from '../utils/strings';
 import { dirname, joinPath } from '../utils/resources';
 const startsWithSchemeRegex = /^\w+:\/\//;
@@ -304,6 +304,22 @@ export class CSSNavigation {
             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) });
+        const lab = labFromColor(color);
+        if (lab.alpha === 1) {
+            label = `lab(${lab.l}% ${lab.a} ${lab.b})`;
+        }
+        else {
+            label = `lab(${lab.l}% ${lab.a} ${lab.b} / ${lab.alpha})`;
+        }
+        result.push({ label: label, textEdit: TextEdit.replace(range, label) });
+        const lch = lchFromColor(color);
+        if (lab.alpha === 1) {
+            label = `lch(${lch.l}% ${lch.c} ${lch.h})`;
+        }
+        else {
+            label = `lch(${lch.l}% ${lch.c} ${lch.h} / ${lch.alpha})`;
+        }
+        result.push({ label: label, textEdit: TextEdit.replace(range, label) });
         return result;
     }
     prepareRename(document, position, stylesheet) {

package/lib/esm/services/selectorPrinting.js

@@ -423,9 +423,10 @@ export class SelectorPrinting {
                             /* The specificity of the :nth-child(An+B [of S]?) pseudo-class is the specificity of a single pseudo-class plus, if S is specified, the specificity of the most specific complex selector in S */
                             // https://www.w3.org/TR/selectors-4/#the-nth-child-pseudo
                             specificity.attr++;
-                            // 23 = Binary Expression.
-                            if (childElements.length === 3 && childElements[1].type === 23) {
-                                let mostSpecificListItem = calculateMostSpecificListItem(childElements[2].getChildren());
+                            const lastChild = childElements[childElements.length - 1];
+                            if (childElements.length > 2 && lastChild.type === nodes.NodeType.SelectorList) {
+                                // e.g :nth-child(-n+3 of li.important)
+                                let mostSpecificListItem = calculateMostSpecificListItem(lastChild.getChildren());
                                 specificity.id += mostSpecificListItem.id;
                                 specificity.attr += mostSpecificListItem.attr;
                                 specificity.tag += mostSpecificListItem.tag;

package/lib/umd/languageFacts/colors.js

@@ -24,6 +24,15 @@
     exports.hslFromColor = hslFromColor;
     exports.colorFromHWB = colorFromHWB;
     exports.hwbFromColor = hwbFromColor;
+    exports.xyzFromLAB = xyzFromLAB;
+    exports.xyzToRGB = xyzToRGB;
+    exports.RGBtoXYZ = RGBtoXYZ;
+    exports.XYZtoLAB = XYZtoLAB;
+    exports.labFromColor = labFromColor;
+    exports.lchFromColor = lchFromColor;
+    exports.colorFromLAB = colorFromLAB;
+    exports.labFromLCH = labFromLCH;
+    exports.colorFromLCH = colorFromLCH;
     exports.getColorValue = getColorValue;
     const nodes = require("../parser/cssNodes");
     const l10n = require("@vscode/l10n");
@@ -149,8 +158,32 @@
             insertText: 'color-mix(in ${1|hsl,hwb,lch,oklch|} ${2|shorter hue,longer hue,increasing hue,decreasing hue|}, ${3:color} ${4:percentage}, ${5:color} ${6:percentage})',
             desc: l10n.t('Mix two colors together in a polar color space.')
         },
+        {
+            label: 'lab',
+            func: 'lab($lightness $channel_a $channel_b $alpha)',
+            insertText: 'lab(${1:lightness} ${2:a} ${3:b} ${4:alpha})',
+            desc: l10n.t('css.builtin.lab', 'Creates a Color from Lightness, Channel a, Channel b and alpha values.')
+        },
+        {
+            label: 'lab relative',
+            func: 'lab(from $color $lightness $channel_a $channel_b $alpha)',
+            insertText: 'lab(from ${1:color} ${2:lightness} ${3:channel_a} ${4:channel_b} ${5:alpha})',
+            desc: l10n.t('css.builtin.lab', 'Creates a Color from Lightness, Channel a, Channel b and alpha values of another Color.')
+        },
+        {
+            label: 'lch',
+            func: 'lch($lightness $chrome $hue $alpha)',
+            insertText: 'lch(${1:lightness} ${2:chrome} ${3:hue} ${4:alpha})',
+            desc: l10n.t('css.builtin.lab', 'Creates a Color from Lightness, Chroma, Hue and alpha values.')
+        },
+        {
+            label: 'lch relative',
+            func: 'lch(from $color $lightness $chrome $hue $alpha)',
+            insertText: 'lch(from ${1:color} ${2:lightness} ${3:chrome} ${4:hue} ${5:alpha})',
+            desc: l10n.t('css.builtin.lab', 'Creates a Color from Lightness, Chroma, Hue and alpha values of another Color.')
+        }
     ];
-    const colorFunctionNameRegExp = /^(rgb|rgba|hsl|hsla|hwb)$/i;
+    const colorFunctionNameRegExp = /^(rgb|rgba|hsl|hsla|hwb|lab|lch)$/i;
     exports.colors = {
         aliceblue: '#f0f8ff',
         antiquewhite: '#faebd7',
@@ -307,7 +340,7 @@
         'transparent': 'Fully transparent. This keyword can be considered a shorthand for rgba(0,0,0,0) which is its computed value.',
     };
     const colorKeywordsRegExp = new RegExp(`^(${Object.keys(exports.colorKeywords).join('|')})$`, "i");
-    function getNumericValue(node, factor) {
+    function getNumericValue(node, factor, lowerLimit = 0, upperLimit = 1) {
         const val = node.getText();
         const m = val.match(/^([-+]?[0-9]*\.?[0-9]+)(%?)$/);
         if (m) {
@@ -315,7 +348,7 @@
                 factor = 100.0;
             }
             const result = parseFloat(m[1]) / factor;
-            if (result >= 0 && result <= 1) {
+            if (result >= lowerLimit && result <= upperLimit) {
                 return result;
             }
         }
@@ -534,6 +567,163 @@
             a: hsl.a
         };
     }
+    function xyzFromLAB(lab) {
+        const xyz = {
+            x: 0,
+            y: 0,
+            z: 0,
+            alpha: lab.alpha ?? 1
+        };
+        xyz.y = (lab.l + 16.0) / 116.0;
+        xyz.x = (lab.a / 500.0) + xyz.y;
+        xyz.z = xyz.y - (lab.b / 200.0);
+        let key;
+        for (key in xyz) {
+            let pow = xyz[key] * xyz[key] * xyz[key];
+            if (pow > 0.008856) {
+                xyz[key] = pow;
+            }
+            else {
+                xyz[key] = (xyz[key] - 16.0 / 116.0) / 7.787;
+            }
+        }
+        xyz.x = xyz.x * 95.047;
+        xyz.y = xyz.y * 100.0;
+        xyz.z = xyz.z * 108.883;
+        return xyz;
+    }
+    function xyzToRGB(xyz) {
+        const x = xyz.x / 100;
+        const y = xyz.y / 100;
+        const z = xyz.z / 100;
+        const r = 3.2406254773200533 * x - 1.5372079722103187 * y - 0.4986285986982479 * z;
+        const g = -0.9689307147293197 * x + 1.8757560608852415 * y + 0.041517523842953964 * z;
+        const b = 0.055710120445510616 * x + -0.2040210505984867 * y + 1.0569959422543882 * z;
+        const compand = (c) => {
+            return c <= 0.0031308 ?
+                12.92 * c :
+                Math.min(1.055 * Math.pow(c, 1 / 2.4) - 0.055, 1);
+        };
+        return {
+            red: Math.round(compand(r) * 255.0),
+            blue: Math.round(compand(b) * 255.0),
+            green: Math.round(compand(g) * 255.0),
+            alpha: xyz.alpha
+        };
+    }
+    function RGBtoXYZ(rgba) {
+        let r = rgba.red, g = rgba.green, b = rgba.blue;
+        if (r > 0.04045) {
+            r = Math.pow((r + 0.055) / 1.055, 2.4);
+        }
+        else {
+            r = r / 12.92;
+        }
+        if (g > 0.04045) {
+            g = Math.pow((g + 0.055) / 1.055, 2.4);
+        }
+        else {
+            g = g / 12.92;
+        }
+        if (b > 0.04045) {
+            b = Math.pow((b + 0.055) / 1.055, 2.4);
+        }
+        else {
+            b = b / 12.92;
+        }
+        r = r * 100;
+        g = g * 100;
+        b = b * 100;
+        //Observer = 2°, Illuminant = D65
+        const x = r * 0.4124 + g * 0.3576 + b * 0.1805;
+        const y = r * 0.2126 + g * 0.7152 + b * 0.0722;
+        const z = r * 0.0193 + g * 0.1192 + b * 0.9505;
+        return { x, y, z, alpha: rgba.alpha };
+    }
+    function XYZtoLAB(xyz, round = true) {
+        const ref_X = 95.047, ref_Y = 100.000, ref_Z = 108.883;
+        let x = xyz.x / ref_X, y = xyz.y / ref_Y, z = xyz.z / ref_Z;
+        if (x > 0.008856) {
+            x = Math.pow(x, 1 / 3);
+        }
+        else {
+            x = (7.787 * x) + (16 / 116);
+        }
+        if (y > 0.008856) {
+            y = Math.pow(y, 1 / 3);
+        }
+        else {
+            y = (7.787 * y) + (16 / 116);
+        }
+        if (z > 0.008856) {
+            z = Math.pow(z, 1 / 3);
+        }
+        else {
+            z = (7.787 * z) + (16 / 116);
+        }
+        const l = (116 * y) - 16, a = 500 * (x - y), b = 200 * (y - z);
+        if (round) {
+            return {
+                l: Math.round((l + Number.EPSILON) * 100) / 100,
+                a: Math.round((a + Number.EPSILON) * 100) / 100,
+                b: Math.round((b + Number.EPSILON) * 100) / 100,
+                alpha: xyz.alpha
+            };
+        }
+        else {
+            return {
+                l, a, b,
+                alpha: xyz.alpha
+            };
+        }
+    }
+    function labFromColor(rgba, round = true) {
+        const xyz = RGBtoXYZ(rgba);
+        const lab = XYZtoLAB(xyz, round);
+        return lab;
+    }
+    function lchFromColor(rgba) {
+        const lab = labFromColor(rgba, false);
+        const c = Math.sqrt(Math.pow(lab.a, 2) + Math.pow(lab.b, 2));
+        let h = Math.atan2(lab.b, lab.a) * (180 / Math.PI);
+        while (h < 0) {
+            h = h + 360;
+        }
+        return {
+            l: Math.round((lab.l + Number.EPSILON) * 100) / 100,
+            c: Math.round((c + Number.EPSILON) * 100) / 100,
+            h: Math.round((h + Number.EPSILON) * 100) / 100,
+            alpha: lab.alpha
+        };
+    }
+    function colorFromLAB(l, a, b, alpha = 1.0) {
+        const lab = {
+            l,
+            a,
+            b,
+            alpha
+        };
+        const xyz = xyzFromLAB(lab);
+        const rgb = xyzToRGB(xyz);
+        return {
+            red: (rgb.red >= 0 ? (rgb.red <= 255 ? rgb.red : 255) : 0) / 255.0,
+            green: (rgb.green >= 0 ? (rgb.green <= 255 ? rgb.green : 255) : 0) / 255.0,
+            blue: (rgb.blue >= 0 ? (rgb.blue <= 255 ? rgb.blue : 255) : 0) / 255.0,
+            alpha
+        };
+    }
+    function labFromLCH(l, c, h, alpha = 1.0) {
+        return {
+            l: l,
+            a: c * Math.cos(h * (Math.PI / 180)),
+            b: c * Math.sin(h * (Math.PI / 180)),
+            alpha: alpha
+        };
+    }
+    function colorFromLCH(l, c, h, alpha = 1.0) {
+        const lab = labFromLCH(l, c, h, alpha);
+        return colorFromLAB(lab.l, lab.a, lab.b, alpha);
+    }
     function getColorValue(node) {
         if (node.type === nodes.NodeType.HexColorValue) {
             const text = node.getText();
@@ -583,6 +773,20 @@
                     const b = getNumericValue(colorValues[2], 100.0);
                     return colorFromHWB(h, w, b, alpha);
                 }
+                else if (name === 'lab') {
+                    // Reference: https://mina86.com/2021/srgb-lab-lchab-conversions/
+                    const l = getNumericValue(colorValues[0], 100.0);
+                    // Since these two values can be negative, a lower limit of -1 has been added
+                    const a = getNumericValue(colorValues[1], 125.0, -1);
+                    const b = getNumericValue(colorValues[2], 125.0, -1);
+                    return colorFromLAB(l * 100, a * 125, b * 125, alpha);
+                }
+                else if (name === 'lch') {
+                    const l = getNumericValue(colorValues[0], 100.0);
+                    const c = getNumericValue(colorValues[1], 230.0);
+                    const h = getAngle(colorValues[2]);
+                    return colorFromLCH(l * 100, c * 230, h, alpha);
+                }
             }
             catch (e) {
                 // parse error on numeric value

package/lib/umd/parser/cssNodes.js

@@ -13,7 +13,7 @@
      *--------------------------------------------------------------------------------------------*/
     'use strict';
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.ParseErrorCollector = exports.Marker = exports.Level = exports.Module = exports.GuardCondition = exports.LessGuard = exports.ListEntry = exports.UnknownAtRule = exports.MixinDeclaration = exports.MixinReference = exports.MixinContentDeclaration = exports.MixinContentReference = exports.ExtendsReference = exports.Variable = exports.Interpolation = exports.VariableDeclaration = exports.NumericValue = exports.RatioValue = exports.HexColorValue = exports.Operator = exports.AttributeSelector = exports.Term = exports.BinaryExpression = exports.Expression = exports.PageBoxMarginBox = exports.Page = exports.SupportsCondition = exports.MediaFeature = exports.MediaCondition = exports.MediaQuery = exports.Medialist = exports.Container = exports.Document = exports.PropertyAtRule = exports.Layer = exports.Supports = exports.Media = exports.Namespace = exports.ForwardVisibility = exports.Forward = exports.ModuleConfiguration = exports.Use = exports.Import = exports.KeyframeSelector = exports.Keyframe = exports.NestedProperties = exports.FontFace = exports.ViewPort = exports.FunctionDeclaration = exports.ElseStatement = exports.WhileStatement = exports.EachStatement = exports.ForStatement = exports.IfStatement = exports.FunctionArgument = exports.FunctionParameter = exports.Function = exports.Invocation = exports.Property = exports.CustomPropertyDeclaration = exports.Declaration = exports.CustomPropertySet = exports.AbstractDeclaration = exports.AtApplyRule = exports.SimpleSelector = exports.Selector = exports.RuleSet = exports.BodyDeclaration = exports.Declarations = exports.Stylesheet = exports.Identifier = exports.UnicodeRange = exports.Nodelist = exports.Node = exports.ReferenceType = exports.NodeType = void 0;
+    exports.ParseErrorCollector = exports.Marker = exports.Level = exports.Module = exports.GuardCondition = exports.LessGuard = exports.ListEntry = exports.UnknownAtRule = exports.MixinDeclaration = exports.MixinReference = exports.MixinContentDeclaration = exports.MixinContentReference = exports.ExtendsReference = exports.Variable = exports.Interpolation = exports.VariableDeclaration = exports.NumericValue = exports.RatioValue = exports.HexColorValue = exports.Operator = exports.AttributeSelector = exports.Term = exports.BinaryExpression = exports.Expression = exports.PageBoxMarginBox = exports.Page = exports.SupportsCondition = exports.MediaFeature = exports.MediaCondition = exports.MediaQuery = exports.Medialist = exports.Container = exports.Document = exports.StartingStyleAtRule = exports.PropertyAtRule = exports.Layer = exports.Supports = exports.Media = exports.Namespace = exports.ForwardVisibility = exports.Forward = exports.ModuleConfiguration = exports.Use = exports.Import = exports.KeyframeSelector = exports.Keyframe = exports.NestedProperties = exports.FontFace = exports.ViewPort = exports.FunctionDeclaration = exports.ElseStatement = exports.WhileStatement = exports.EachStatement = exports.ForStatement = exports.IfStatement = exports.FunctionArgument = exports.FunctionParameter = exports.Function = exports.Invocation = exports.Property = exports.CustomPropertyDeclaration = exports.Declaration = exports.CustomPropertySet = exports.AbstractDeclaration = exports.AtApplyRule = exports.SimpleSelector = exports.Selector = exports.RuleSet = exports.BodyDeclaration = exports.Declarations = exports.Stylesheet = exports.Identifier = exports.UnicodeRange = exports.Nodelist = exports.Node = exports.ReferenceType = exports.NodeType = void 0;
     exports.getNodeAtOffset = getNodeAtOffset;
     exports.getNodePath = getNodePath;
     exports.getParentDeclaration = getParentDeclaration;
@@ -113,6 +113,8 @@
         NodeType[NodeType["PropertyAtRule"] = 86] = "PropertyAtRule";
         NodeType[NodeType["Container"] = 87] = "Container";
         NodeType[NodeType["ModuleConfig"] = 88] = "ModuleConfig";
+        NodeType[NodeType["SelectorList"] = 89] = "SelectorList";
+        NodeType[NodeType["StartingStyleAtRule"] = 90] = "StartingStyleAtRule";
     })(NodeType || (exports.NodeType = NodeType = {}));
     var ReferenceType;
     (function (ReferenceType) {
@@ -965,6 +967,15 @@
         }
     }
     exports.PropertyAtRule = PropertyAtRule;
+    class StartingStyleAtRule extends BodyDeclaration {
+        constructor(offset, length) {
+            super(offset, length);
+        }
+        get type() {
+            return NodeType.StartingStyleAtRule;
+        }
+    }
+    exports.StartingStyleAtRule = StartingStyleAtRule;
     class Document extends BodyDeclaration {
         constructor(offset, length) {
             super(offset, length);

package/lib/umd/parser/cssParser.js

@@ -288,6 +288,7 @@
                 || this._parseNamespace()
                 || this._parseDocument()
                 || this._parseContainer(isNested)
+                || this._parseStartingStyleAtRule(isNested)
                 || this._parseUnknownAtRule();
         }
         _tryParseRuleset(isNested) {
@@ -322,6 +323,7 @@
                 || this._parseSupports(true)
                 || this._parseLayer(true)
                 || this._parseContainer(true)
+                || this._parseStartingStyleAtRule(true)
                 || this._parseUnknownAtRule();
         }
         _parseRuleSetDeclaration() {
@@ -782,6 +784,26 @@
             }
             return this._parseBody(node, this._parseDeclaration.bind(this));
         }
+        _parseStartingStyleAtRule(isNested = false) {
+            if (!this.peekKeyword("@starting-style")) {
+                return null;
+            }
+            const node = this.create(nodes.StartingStyleAtRule);
+            this.consumeToken(); // @starting-style
+            return this._parseBody(node, this._parseStartingStyleDeclaration.bind(this, isNested));
+        }
+        // this method is the same as ._parseContainerDeclaration()
+        // which is the same as ._parseMediaDeclaration(),
+        // _parseSupportsDeclaration, and ._parseLayerDeclaration()
+        _parseStartingStyleDeclaration(isNested = false) {
+            if (isNested) {
+                // if nested, the body can contain rulesets, but also declarations
+                return this._tryParseRuleset(true)
+                    || this._tryToParseDeclaration()
+                    || this._parseStylesheetStatement(true);
+            }
+            return this._parseStylesheetStatement(false);
+        }
         _parseLayer(isNested = false) {
             // @layer layer-name {rules}
             // @layer layer-name;
@@ -1521,7 +1543,7 @@
             if (node) {
                 if (!this.hasWhitespace() && this.accept(cssScanner_1.TokenType.ParenthesisL)) {
                     const tryAsSelector = () => {
-                        const selectors = this.create(nodes.Node);
+                        const selectors = this.createNode(nodes.NodeType.SelectorList);
                         if (!selectors.addChild(this._parseSelector(true))) {
                             return null;
                         }
@@ -1535,8 +1557,11 @@
                     };
                     let hasSelector = node.addChild(this.try(tryAsSelector));
                     if (!hasSelector) {
-                        if (node.addChild(this._parseBinaryExpr()) &&
-                            this.acceptIdent('of') &&
+                        // accept the <an+b> syntax (not a proper expression) https://drafts.csswg.org/css-syntax/#anb
+                        while (!this.peekIdent('of') && (node.addChild(this._parseTerm()) || node.addChild(this._parseOperator()))) {
+                            // loop
+                        }
+                        if (this.acceptIdent('of') &&
                             !node.addChild(this.try(tryAsSelector))) {
                             return this.finish(node, cssErrors_1.ParseError.SelectorExpected);
                         }

package/lib/umd/parser/cssScanner.js

@@ -405,15 +405,21 @@
             return false;
         }
         _number() {
-            let npeek = 0, ch;
-            if (this.stream.peekChar() === _DOT) {
-                npeek = 1;
+            let npeek = 0;
+            let hasDot = false;
+            const peekFirst = this.stream.peekChar();
+            if (peekFirst === _PLS || peekFirst === _MIN) {
+                npeek++;
             }
-            ch = this.stream.peekChar(npeek);
+            if (this.stream.peekChar(npeek) === _DOT) {
+                npeek++;
+                hasDot = true;
+            }
+            const ch = this.stream.peekChar(npeek);
             if (ch >= _0 && ch <= _9) {
                 this.stream.advance(npeek + 1);
                 this.stream.advanceWhileChar((ch) => {
-                    return ch >= _0 && ch <= _9 || npeek === 0 && ch === _DOT;
+                    return ch >= _0 && ch <= _9 || !hasDot && ch === _DOT;
                 });
                 return true;
             }

package/lib/umd/services/cssNavigation.js

@@ -316,6 +316,22 @@
                 label = `hwb(${hwb.h} ${Math.round(hwb.w * 100)}% ${Math.round(hwb.b * 100)}% / ${hwb.a})`;
             }
             result.push({ label: label, textEdit: cssLanguageTypes_1.TextEdit.replace(range, label) });
+            const lab = (0, facts_1.labFromColor)(color);
+            if (lab.alpha === 1) {
+                label = `lab(${lab.l}% ${lab.a} ${lab.b})`;
+            }
+            else {
+                label = `lab(${lab.l}% ${lab.a} ${lab.b} / ${lab.alpha})`;
+            }
+            result.push({ label: label, textEdit: cssLanguageTypes_1.TextEdit.replace(range, label) });
+            const lch = (0, facts_1.lchFromColor)(color);
+            if (lab.alpha === 1) {
+                label = `lch(${lch.l}% ${lch.c} ${lch.h})`;
+            }
+            else {
+                label = `lch(${lch.l}% ${lch.c} ${lch.h} / ${lch.alpha})`;
+            }
+            result.push({ label: label, textEdit: cssLanguageTypes_1.TextEdit.replace(range, label) });
             return result;
         }
         prepareRename(document, position, stylesheet) {

package/lib/umd/services/selectorPrinting.js

@@ -439,9 +439,10 @@
                                 /* The specificity of the :nth-child(An+B [of S]?) pseudo-class is the specificity of a single pseudo-class plus, if S is specified, the specificity of the most specific complex selector in S */
                                 // https://www.w3.org/TR/selectors-4/#the-nth-child-pseudo
                                 specificity.attr++;
-                                // 23 = Binary Expression.
-                                if (childElements.length === 3 && childElements[1].type === 23) {
-                                    let mostSpecificListItem = calculateMostSpecificListItem(childElements[2].getChildren());
+                                const lastChild = childElements[childElements.length - 1];
+                                if (childElements.length > 2 && lastChild.type === nodes.NodeType.SelectorList) {
+                                    // e.g :nth-child(-n+3 of li.important)
+                                    let mostSpecificListItem = calculateMostSpecificListItem(lastChild.getChildren());
                                     specificity.id += mostSpecificListItem.id;
                                     specificity.attr += mostSpecificListItem.attr;
                                     specificity.tag += mostSpecificListItem.tag;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vscode-css-languageservice",
-  "version": "6.3.3-0",
+  "version": "6.3.3-2",
   "description": "Language service for CSS, LESS and SCSS",
   "main": "./lib/umd/cssLanguageService.js",
   "typings": "./lib/umd/cssLanguageService",