vscode-css-languageservice 6.3.5 → 6.3.6

package/lib/esm/languageFacts/colors.js

@@ -151,7 +151,7 @@ export const colorFunctions = [
         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|lab|lch)$/i;
+const colorFunctionNameRegExp = /^(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch)$/iu;
 export const colors = {
     aliceblue: '#f0f8ff',
     antiquewhite: '#faebd7',
@@ -322,26 +322,40 @@ function getNumericValue(node, factor, lowerLimit = 0, upperLimit = 1) {
     }
     throw new Error();
 }
+const DEGREES_PER_CIRCLE = 360; // Number of degrees in a full circle
+const GRAD_TO_DEGREE_FACTOR = 0.9; // Conversion factor: grads to degrees
+const RADIANS_TO_DEGREES_FACTOR = DEGREES_PER_CIRCLE / 2 / Math.PI; // Conversion factor: radians to degrees
 function getAngle(node) {
-    const val = node.getText();
-    const m = val.match(/^([-+]?[0-9]*\.?[0-9]+)(deg|rad|grad|turn)?$/);
-    if (m) {
-        switch (m[2]) {
-            case 'deg':
-                return parseFloat(val) % 360;
-            case 'rad':
-                return (parseFloat(val) * 180 / Math.PI) % 360;
-            case 'grad':
-                return (parseFloat(val) * 0.9) % 360;
-            case 'turn':
-                return (parseFloat(val) * 360) % 360;
-            default:
-                if ('undefined' === typeof m[2]) {
-                    return parseFloat(val) % 360;
+    const textValue = node.getText();
+    // Hue angle keyword `none` is the equivilient of `0deg`
+    if (textValue === 'none') {
+        return 0;
+    }
+    const m = /^(?<numberString>[-+]?[0-9]*\.?[0-9]+)(?<unit>deg|rad|grad|turn)?$/iu.exec(textValue);
+    if (m?.groups?.['numberString']) {
+        const value = Number.parseFloat(m.groups['numberString']);
+        if (!Number.isNaN(value)) {
+            switch (m.groups['unit']) {
+                case 'deg': {
+                    return value % DEGREES_PER_CIRCLE;
+                }
+                case 'grad': {
+                    return (value * GRAD_TO_DEGREE_FACTOR) % DEGREES_PER_CIRCLE;
+                }
+                case 'rad': {
+                    return (value * RADIANS_TO_DEGREES_FACTOR) % DEGREES_PER_CIRCLE;
+                }
+                case 'turn': {
+                    return (value * DEGREES_PER_CIRCLE) % DEGREES_PER_CIRCLE;
                 }
+                default: {
+                    // Unitless angles are treated as degrees
+                    return value % DEGREES_PER_CIRCLE;
+                }
+            }
         }
     }
-    throw new Error();
+    throw new Error(`Failed to parse '${textValue}' as angle`);
 }
 export function isColorConstructor(node) {
     const name = node.getName();
@@ -560,6 +574,29 @@ export function xyzFromLAB(lab) {
     xyz.z = xyz.z * 108.883;
     return xyz;
 }
+export function xyzFromOKLAB(lab) {
+    // Convert from OKLab to XYZ
+    // References: https://bottosson.github.io/posts/oklab/
+    // lab.l is in 0-1 range
+    // lab.a and lab.b are in -0.4 to 0.4 range
+    const l = lab.l + 0.3963377774 * lab.a + 0.2158037573 * lab.b;
+    const m = lab.l - 0.1055613458 * lab.a - 0.0638541728 * lab.b;
+    const s = lab.l - 0.0894841775 * lab.a - 1.291485548 * lab.b;
+    // Apply non-linearity using exponentiation
+    const l3 = l ** 3;
+    const m3 = m ** 3;
+    const s3 = s ** 3;
+    // Convert to XYZ
+    const x = 1.2270138511 * l3 - 0.5577999807 * m3 + 0.281256149 * s3;
+    const y = -0.0405801784 * l3 + 1.1122568696 * m3 - 0.0716766787 * s3;
+    const z = -0.0763812845 * l3 - 0.4214819784 * m3 + 1.5861632204 * s3;
+    return {
+        x: x * 100,
+        y: y * 100,
+        z: z * 100,
+        alpha: lab.alpha ?? 1,
+    };
+}
 export function xyzToRGB(xyz) {
     const x = xyz.x / 100;
     const y = xyz.y / 100;
@@ -645,53 +682,124 @@ export function XYZtoLAB(xyz, round = true) {
         };
     }
 }
+export function XYZtoOKLAB(xyz, round = true) {
+    // Convert XYZ to OKLab
+    // References: https://bottosson.github.io/posts/oklab/
+    // Normalize XYZ values
+    const x = xyz.x / 100;
+    const y = xyz.y / 100;
+    const z = xyz.z / 100;
+    // Convert to LMS
+    const l = 0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z;
+    const m = 0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z;
+    const s = 0.0482003018 * x + 0.2643662691 * y + 0.633851707 * z;
+    // Apply non-linearity
+    const l_ = Math.cbrt(l);
+    const m_ = Math.cbrt(m);
+    const s_ = Math.cbrt(s);
+    // Convert to OKLab
+    const L = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_;
+    const a = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
+    const b = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
+    return round
+        // 5 decimal places for precision
+        ? {
+            l: Number(L.toFixed(5)),
+            a: Number(a.toFixed(5)),
+            b: Number(b.toFixed(5)),
+            alpha: xyz.alpha,
+        }
+        : {
+            l: 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);
+export function oklabFromColor(rgba, round = true) {
+    const xyz = RGBtoXYZ(rgba);
+    const lab = XYZtoOKLAB(xyz, round);
+    // Convert lightness to a percentage of oklab
+    return { ...lab, l: lab.l * 100 };
+}
+/**
+ * Calculate chroma and hue from Lab values
+ * Returns LCH values without formatting/rounding
+ */
+function labToLCH(lab) {
     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);
+    let h = Math.atan2(lab.b, lab.a) * RADIANS_TO_DEGREES_FACTOR;
     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
+        l: lab.l,
+        c: c,
+        h: h,
+        alpha: lab.alpha,
     };
 }
-export function colorFromLAB(l, a, b, alpha = 1.0) {
-    const lab = {
-        l,
-        a,
-        b,
-        alpha
+export function lchFromColor(rgba) {
+    const lab = labFromColor(rgba, false);
+    const lch = labToLCH(lab);
+    return {
+        l: Math.round((lch.l + Number.EPSILON) * 100) / 100,
+        c: Math.round((lch.c + Number.EPSILON) * 100) / 100,
+        h: Math.round((lch.h + Number.EPSILON) * 100) / 100,
+        alpha: lch.alpha,
+    };
+}
+export function oklchFromColor(rgba) {
+    const lab = oklabFromColor(rgba, false);
+    const lch = labToLCH(lab);
+    return {
+        l: Number((lch.l).toFixed(3)),
+        c: Number(lch.c.toFixed(5)),
+        h: Number(lch.h.toFixed(3)),
+        alpha: lch.alpha,
     };
-    const xyz = xyzFromLAB(lab);
+}
+/**
+ * Generic function to convert LAB/OKLAB to Color
+ */
+function labToColor(lab, xyzConverter) {
+    const xyz = xyzConverter(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
+        red: (rgb.red >= 0 ? Math.min(rgb.red, 255) : 0) / 255,
+        green: (rgb.green >= 0 ? Math.min(rgb.green, 255) : 0) / 255,
+        blue: (rgb.blue >= 0 ? Math.min(rgb.blue, 255) : 0) / 255,
+        alpha: lab.alpha ?? 1,
     };
 }
-export function labFromLCH(l, c, h, alpha = 1.0) {
+export function colorFromLAB(l, a, b, alpha = 1) {
+    return labToColor({ l, a, b, alpha }, xyzFromLAB);
+}
+export function colorFromOKLAB(l, a, b, alpha = 1) {
+    return labToColor({ l, a, b, alpha }, xyzFromOKLAB);
+}
+const DEGREES_TO_RADIANS_FACTOR = Math.PI / 180;
+export function labFromLCH(l, c, h, alpha = 1) {
     return {
         l: l,
-        a: c * Math.cos(h * (Math.PI / 180)),
-        b: c * Math.sin(h * (Math.PI / 180)),
-        alpha: alpha
+        a: c * Math.cos(h * DEGREES_TO_RADIANS_FACTOR),
+        b: c * Math.sin(h * DEGREES_TO_RADIANS_FACTOR),
+        alpha: alpha,
     };
 }
-export function colorFromLCH(l, c, h, alpha = 1.0) {
+export function colorFromLCH(l, c, h, alpha = 1) {
     const lab = labFromLCH(l, c, h, alpha);
     return colorFromLAB(lab.l, lab.a, lab.b, alpha);
 }
+export function colorFromOKLCH(l, c, h, alpha = 1) {
+    const lab = labFromLCH(l, c, h, alpha); // Conversion is the same as LCH->LAB for OKLCH-OKLAB
+    return colorFromOKLAB(lab.l, lab.a, lab.b, alpha);
+}
 export function getColorValue(node) {
     if (node.type === nodes.NodeType.HexColorValue) {
         const text = node.getText();
@@ -721,42 +829,59 @@ export function getColorValue(node) {
         }
         try {
             const alpha = colorValues.length === 4 ? getNumericValue(colorValues[3], 1) : 1;
-            if (name === 'rgb' || name === 'rgba') {
-                return {
-                    red: getNumericValue(colorValues[0], 255.0),
-                    green: getNumericValue(colorValues[1], 255.0),
-                    blue: getNumericValue(colorValues[2], 255.0),
-                    alpha
-                };
-            }
-            else if (name === 'hsl' || name === 'hsla') {
-                const h = getAngle(colorValues[0]);
-                const s = getNumericValue(colorValues[1], 100.0);
-                const l = getNumericValue(colorValues[2], 100.0);
-                return colorFromHSL(h, s, l, alpha);
-            }
-            else if (name === 'hwb') {
-                const h = getAngle(colorValues[0]);
-                const w = getNumericValue(colorValues[1], 100.0);
-                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);
+            switch (name) {
+                case 'rgb':
+                case 'rgba': {
+                    return {
+                        red: getNumericValue(colorValues[0], 255),
+                        green: getNumericValue(colorValues[1], 255),
+                        blue: getNumericValue(colorValues[2], 255),
+                        alpha,
+                    };
+                }
+                case 'hsl':
+                case 'hsla': {
+                    const h = getAngle(colorValues[0]);
+                    const s = getNumericValue(colorValues[1], 100);
+                    const l = getNumericValue(colorValues[2], 100);
+                    return colorFromHSL(h, s, l, alpha);
+                }
+                case 'hwb': {
+                    const h = getAngle(colorValues[0]);
+                    const w = getNumericValue(colorValues[1], 100);
+                    const b = getNumericValue(colorValues[2], 100);
+                    return colorFromHWB(h, w, b, alpha);
+                }
+                case 'lab': {
+                    // Reference: https://mina86.com/2021/srgb-lab-lchab-conversions/
+                    const l = getNumericValue(colorValues[0], 100);
+                    // Since these two values can be negative, a lower limit of -1 has been added
+                    const a = getNumericValue(colorValues[1], 125, -1);
+                    const b = getNumericValue(colorValues[2], 125, -1);
+                    return colorFromLAB(l * 100, a * 125, b * 125, alpha);
+                }
+                case 'lch': {
+                    const l = getNumericValue(colorValues[0], 100);
+                    const c = getNumericValue(colorValues[1], 230);
+                    const h = getAngle(colorValues[2]);
+                    return colorFromLCH(l * 100, c * 230, h, alpha);
+                }
+                case 'oklab': {
+                    const l = getNumericValue(colorValues[0], 1);
+                    // Since these two values can be negative, a lower limit of -1 has been added
+                    const a = getNumericValue(colorValues[1], 0.4, -1);
+                    const b = getNumericValue(colorValues[2], 0.4, -1);
+                    return colorFromOKLAB(l, a * 0.4, b * 0.4, alpha);
+                }
+                case 'oklch': {
+                    const l = getNumericValue(colorValues[0], 1);
+                    const c = getNumericValue(colorValues[1], 0.4);
+                    const h = getAngle(colorValues[2]);
+                    return colorFromOKLCH(l, c * 0.4, h, alpha);
+                }
             }
         }
-        catch (e) {
+        catch {
             // parse error on numeric value
             return null;
         }

package/lib/esm/services/cssCompletion.js

@@ -139,6 +139,9 @@ export class CSSCompletion {
                 else if (node instanceof nodes.SupportsCondition) {
                     this.getCompletionsForSupportsCondition(node, result);
                 }
+                else if (node instanceof nodes.MediaCondition) {
+                    this.getCompletionsForMediaCondition(node, result);
+                }
                 else if (node instanceof nodes.ExtendsReference) {
                     this.getCompletionsForExtendsReference(node, null, result);
                 }
@@ -907,6 +910,46 @@ export class CSSCompletion {
         }
         return this.getCompletionForTopLevel(result);
     }
+    getCompletionsForMediaCondition(mediaCondition, result) {
+        const child = mediaCondition.findFirstChildBeforeOffset(this.offset);
+        if (child) {
+            if (child instanceof nodes.MediaFeature) {
+                const featureName = child.getChild(0);
+                if (featureName && this.offset > featureName.end) {
+                    const name = featureName.getText();
+                    const media = this.cssDataManager.getAtDirective('@media')?.descriptors?.find((descriptor) => descriptor.name === name);
+                    if (media) {
+                        return this.getValueEnumProposals(media, null, result);
+                    }
+                }
+            }
+            else if (child instanceof nodes.MediaCondition) {
+                return this.getCompletionsForMediaCondition(child, result);
+            }
+        }
+        // Return all media descriptors
+        const media = this.cssDataManager.getAtDirective('@media');
+        for (const descriptor of media?.descriptors || []) {
+            let command = undefined;
+            let text = descriptor.name;
+            if (descriptor.type === 'discrete') {
+                // Change this check when we support auto completes for other types
+                if (descriptor.values) {
+                    command = retriggerCommand;
+                }
+                text = `${descriptor.name}: `;
+            }
+            result.items.push({
+                label: descriptor.name,
+                textEdit: TextEdit.replace(this.getCompletionRange(null), text),
+                documentation: languageFacts.getEntryDescription(descriptor, this.doesSupportMarkdown()),
+                tags: isDeprecated(descriptor) ? [CompletionItemTag.Deprecated] : [],
+                kind: CompletionItemKind.Keyword,
+                command,
+            });
+        }
+        return result;
+    }
     getCompletionsForExtendsReference(extendsRef, existingNode, result) {
         return result;
     }

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, labFromColor, lchFromColor } from '../languageFacts/facts';
+import { getColorValue, hslFromColor, hwbFromColor, labFromColor, lchFromColor, oklabFromColor, oklchFromColor, } from '../languageFacts/facts';
 import { startsWith } from '../utils/strings';
 import { dirname, joinPath } from '../utils/resources';
 const startsWithSchemeRegex = /^\w+:\/\//;
@@ -321,13 +321,19 @@ export class CSSNavigation {
         }
         result.push({ label: label, textEdit: TextEdit.replace(range, label) });
         const lch = lchFromColor(color);
-        if (lab.alpha === 1) {
+        if (lch.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) });
+        const oklab = oklabFromColor(color);
+        label = (oklab.alpha === 1) ? `oklab(${oklab.l}% ${oklab.a} ${oklab.b})` : `oklab(${oklab.l}% ${oklab.a} ${oklab.b} / ${oklab.alpha})`;
+        result.push({ label: label, textEdit: TextEdit.replace(range, label) });
+        const oklch = oklchFromColor(color);
+        label = (oklch.alpha === 1) ? `oklch(${oklch.l}% ${oklch.c} ${oklch.h})` : `oklch(${oklch.l}% ${oklch.c} ${oklch.h} / ${oklch.alpha})`;
+        result.push({ label: label, textEdit: TextEdit.replace(range, label) });
         return result;
     }
     prepareRename(document, position, stylesheet) {

package/lib/umd/cssLanguageTypes.d.ts

@@ -134,6 +134,17 @@ export interface IPropertyData {
     relevance?: number;
     atRule?: string;
 }
+export interface IDescriptorData {
+    name: string;
+    description?: string;
+    references?: IReference[];
+    syntax?: string;
+    type?: string;
+    values?: IValueData[];
+    browsers?: string[];
+    baseline?: BaselineStatus;
+    status?: EntryStatus;
+}
 export interface IAtDirectiveData {
     name: string;
     description?: string | MarkupContent;
@@ -141,6 +152,7 @@ export interface IAtDirectiveData {
     baseline?: BaselineStatus;
     status?: EntryStatus;
     references?: IReference[];
+    descriptors?: IDescriptorData[];
 }
 export interface IPseudoClassData {
     name: string;