vscode-css-languageservice 6.3.3 → 6.3.4

package/docs/customData.md

@@ -58,7 +58,7 @@ All top-level properties share two basic properties, `name` and `description`. F
 }
 ```
 
-You can also specify 4 additional properties for them:
+You can also specify 5 additional properties for them:
 
 ```jsonc
 {
@@ -73,6 +73,11 @@ You can also specify 4 additional properties for them:
         "IE10",
         "O37"
       ],
+      "baseline": {
+        "status": "high",
+        "baseline_low_date": "2015-09-30",
+        "baseline_high_date": "2018-03-30"
+      },
       "status": "standard",
       "references": [
         {
@@ -91,14 +96,25 @@ You can also specify 4 additional properties for them:
   export let browserNames = {
     E: 'Edge',
     FF: 'Firefox',
+    FFA: 'Firefox on Android',
     S: 'Safari',
+    SM: 'Safari on iOS',
     C: 'Chrome',
+    CA: 'Chrome on Android',
     IE: 'IE',
     O: 'Opera'
   };
   ```
   The browser compatibility will be rendered at completion and hover. Items that is supported in only one browser are dropped from completion.
 
+- `baseline`: An object containing [Baseline](https://web-platform-dx.github.io/web-features/) information about the feature's browser compatibility, as defined by the [WebDX Community Group](https://web-platform-dx.github.io/web-features/webdx-cg/).
+
+  - `status`: The Baseline status is either `"false"` (limited availability across major browsers), `"low"` (newly available across major browsers), or `"high"` (widely available across major browsers).
+
+  - `baseline_low_date`: A date in the format `YYYY-MM-DD` representing when the feature became newly available, or undefined if it hasn't yet reached that status.
+
+  - `baseline_high_date`: A date in the format `YYYY-MM-DD` representing when the feature became widely available, or undefined if it hasn't yet reached that status. The widely available date is always 30 months after the newly available date.
+
 - `status`: The status of the item. The format is:
   ```
   export type EntryStatus = 'standard' | 'experimental' | 'nonstandard' | 'obsolete';

package/docs/customData.schema.json

@@ -83,8 +83,31 @@
             "description": "Supported browsers",
             "items": {
               "type": "string",
-              "pattern": "(E|FF|S|C|IE|O)([\\d|\\.]+)?",
-              "patternErrorMessage": "Browser item must follow the format of `${browser}${version}`. `browser` is one of:\n- E: Edge\n- FF: Firefox\n- S: Safari\n- C: Chrome\n- IE: Internet Explorer\n- O: Opera"
+              "pattern": "(E|FFA|FF|SM|S|CA|C|IE|O)([\\d|\\.]+)?",
+              "patternErrorMessage": "Browser item must follow the format of `${browser}${version}`. `browser` is one of:\n- E: Edge\n- FF: Firefox\n- FM: Firefox Android\n- S: Safari\n- SM: Safari on iOS\n- C: Chrome\n- CM: Chrome on Android\n- IE: Internet Explorer\n- O: Opera"
+            }
+          },
+          "baseline": {
+            "type": "object",
+            "description": "Baseline information for the feature",
+            "properties": {
+              "status": {
+                "type": "string",
+                "description": "Baseline status",
+                "enum": ["high", "low", "false"]
+              },
+              "baseline_low_date": {
+                "type": "string",
+                "description": "Date when the feature became newly supported in all major browsers",
+                "pattern": "^\\d{4}-\\d{2}-\\d{2}$",
+                "patternErrorMessage": "Date must be in the format of `YYYY-MM-DD`"
+              },
+              "baseline_high_date": {
+                "type": "string",
+                "description": "Date when the feature became widely supported in all major browsers",
+                "pattern": "^\\d{4}-\\d{2}-\\d{2}$",
+                "patternErrorMessage": "Date must be in the format of `YYYY-MM-DD`"
+              }
             }
           },
           "references": {

package/lib/esm/data/webCustomData.js

@@ -445,7 +445,7 @@ export const cssData = {
                 }
             ],
             "syntax": "auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>",
-            "relevance": 74,
+            "relevance": 75,
             "references": [
                 {
                     "name": "MDN Reference",
@@ -722,7 +722,7 @@ export const cssData = {
                 }
             ],
             "syntax": "<single-animation-fill-mode>#",
-            "relevance": 64,
+            "relevance": 65,
             "references": [
                 {
                     "name": "MDN Reference",
@@ -870,7 +870,7 @@ export const cssData = {
                 "O30"
             ],
             "syntax": "<easing-function>#",
-            "relevance": 72,
+            "relevance": 73,
             "references": [
                 {
                     "name": "MDN Reference",
@@ -2630,7 +2630,7 @@ export const cssData = {
                 "O3.5"
             ],
             "syntax": "<line-width> || <line-style> || <color>",
-            "relevance": 81,
+            "relevance": 82,
             "references": [
                 {
                     "name": "MDN Reference",
@@ -2790,7 +2790,7 @@ export const cssData = {
                 "O9.2"
             ],
             "syntax": "<line-width> || <line-style> || <color>",
-            "relevance": 80,
+            "relevance": 81,
             "references": [
                 {
                     "name": "MDN Reference",
@@ -3078,7 +3078,7 @@ export const cssData = {
                 "O10.5"
             ],
             "syntax": "<length-percentage>{1,2}",
-            "relevance": 76,
+            "relevance": 75,
             "references": [
                 {
                     "name": "MDN Reference",
@@ -3174,7 +3174,7 @@ export const cssData = {
             ],
             "values": [],
             "syntax": "<line-width>{1,4}",
-            "relevance": 82,
+            "relevance": 83,
             "references": [
                 {
                     "name": "MDN Reference",
@@ -3212,7 +3212,7 @@ export const cssData = {
                 }
             ],
             "syntax": "<length> | <percentage> | auto",
-            "relevance": 90,
+            "relevance": 91,
             "references": [
                 {
                     "name": "MDN Reference",
@@ -3333,7 +3333,7 @@ export const cssData = {
                 }
             ],
             "syntax": "content-box | border-box",
-            "relevance": 92,
+            "relevance": 93,
             "references": [
                 {
                     "name": "MDN Reference",
@@ -6939,7 +6939,7 @@ export const cssData = {
                 }
             ],
             "syntax": "<absolute-size> | <relative-size> | <length-percentage>",
-            "relevance": 94,
+            "relevance": 95,
             "references": [
                 {
                     "name": "MDN Reference",
@@ -8083,7 +8083,7 @@ export const cssData = {
                 }
             ],
             "syntax": "<grid-line>",
-            "relevance": 52,
+            "relevance": 53,
             "references": [
                 {
                     "name": "MDN Reference",
@@ -8970,7 +8970,7 @@ export const cssData = {
                 }
             ],
             "syntax": "<length> | <percentage> | auto",
-            "relevance": 94,
+            "relevance": 95,
             "references": [
                 {
                     "name": "MDN Reference",
@@ -16284,7 +16284,7 @@ export const cssData = {
                 }
             ],
             "syntax": "none | <length>",
-            "relevance": 54,
+            "relevance": 55,
             "references": [
                 {
                     "name": "MDN Reference",
@@ -17630,7 +17630,7 @@ export const cssData = {
                 "O67"
             ],
             "syntax": "<number>",
-            "relevance": 53,
+            "relevance": 54,
             "references": [
                 {
                     "name": "MDN Reference",
@@ -22213,7 +22213,7 @@ export const cssData = {
                 }
             ],
             "syntax": "normal | break-word",
-            "relevance": 77,
+            "relevance": 78,
             "description": "Specifies whether the UA may break within a word to prevent overflow when an otherwise-unbreakable string is too long to fit.",
             "restrictions": [
                 "enum"
@@ -24753,7 +24753,7 @@ export const cssData = {
         {
             "name": "inset-inline-end",
             "syntax": "<'top'>",
-            "relevance": 54,
+            "relevance": 55,
             "browsers": [
                 "E87",
                 "FF63",

package/lib/esm/languageFacts/entry.js

@@ -5,17 +5,43 @@
 'use strict';
 import { MarkupKind } from '../cssLanguageTypes';
 export const browserNames = {
-    E: 'Edge',
-    FF: 'Firefox',
-    S: 'Safari',
-    C: 'Chrome',
-    IE: 'IE',
-    O: 'Opera'
+    'C': {
+        name: 'Chrome',
+        platform: 'desktop'
+    },
+    'CA': {
+        name: 'Chrome',
+        platform: 'Android'
+    },
+    'E': {
+        name: 'Edge',
+        platform: 'desktop'
+    },
+    'FF': {
+        name: 'Firefox',
+        platform: 'desktop'
+    },
+    'FFA': {
+        name: 'Firefox',
+        platform: 'Android'
+    },
+    'S': {
+        name: 'Safari',
+        platform: 'macOS'
+    },
+    'SM': {
+        name: 'Safari',
+        platform: 'iOS'
+    }
+};
+const shortCompatPattern = /(E|FFA|FF|SM|S|CA|C|IE|O)([\d|\.]+)?/;
+export const BaselineImages = {
+    BASELINE_LIMITED: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCA1NDAgMzAwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxzdHlsZT4KICAgIC5ncmF5LXNoYXBlIHsKICAgICAgZmlsbDogI0M2QzZDNjsgLyogTGlnaHQgbW9kZSAqLwogICAgfQoKICAgIEBtZWRpYSAocHJlZmVycy1jb2xvci1zY2hlbWU6IGRhcmspIHsKICAgICAgLmdyYXktc2hhcGUgewogICAgICAgIGZpbGw6ICM1NjU2NTY7IC8qIERhcmsgbW9kZSAqLwogICAgICB9CiAgICB9CiAgPC9zdHlsZT4KICA8cGF0aCBkPSJNMTUwIDBMMjQwIDkwTDIxMCAxMjBMMTIwIDMwTDE1MCAwWiIgZmlsbD0iI0YwOTQwOSIvPgogIDxwYXRoIGQ9Ik00MjAgMzBMNTQwIDE1MEw0MjAgMjcwTDM5MCAyNDBMNDgwIDE1MEwzOTAgNjBMNDIwIDMwWiIgY2xhc3M9ImdyYXktc2hhcGUiLz4KICA8cGF0aCBkPSJNMzMwIDE4MEwzMDAgMjEwTDM5MCAzMDBMNDIwIDI3MEwzMzAgMTgwWiIgZmlsbD0iI0YwOTQwOSIvPgogIDxwYXRoIGQ9Ik0xMjAgMzBMMTUwIDYwTDYwIDE1MEwxNTAgMjQwTDEyMCAyNzBMMCAxNTBMMTIwIDMwWiIgY2xhc3M9ImdyYXktc2hhcGUiLz4KICA8cGF0aCBkPSJNMzkwIDBMNDIwIDMwTDE1MCAzMDBMMTIwIDI3MEwzOTAgMFoiIGZpbGw9IiNGMDk0MDkiLz4KPC9zdmc+',
+    BASELINE_LOW: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCA1NDAgMzAwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxzdHlsZT4KICAgIC5ibHVlLXNoYXBlIHsKICAgICAgZmlsbDogI0E4QzdGQTsgLyogTGlnaHQgbW9kZSAqLwogICAgfQoKICAgIEBtZWRpYSAocHJlZmVycy1jb2xvci1zY2hlbWU6IGRhcmspIHsKICAgICAgLmJsdWUtc2hhcGUgewogICAgICAgIGZpbGw6ICMyRDUwOUU7IC8qIERhcmsgbW9kZSAqLwogICAgICB9CiAgICB9CgogICAgLmRhcmtlci1ibHVlLXNoYXBlIHsKICAgICAgICBmaWxsOiAjMUI2RUYzOwogICAgfQoKICAgIEBtZWRpYSAocHJlZmVycy1jb2xvci1zY2hlbWU6IGRhcmspIHsKICAgICAgICAuZGFya2VyLWJsdWUtc2hhcGUgewogICAgICAgICAgICBmaWxsOiAjNDE4NUZGOwogICAgICAgIH0KICAgIH0KCiAgPC9zdHlsZT4KICA8cGF0aCBkPSJNMTUwIDBMMTgwIDMwTDE1MCA2MEwxMjAgMzBMMTUwIDBaIiBjbGFzcz0iYmx1ZS1zaGFwZSIvPgogIDxwYXRoIGQ9Ik0yMTAgNjBMMjQwIDkwTDIxMCAxMjBMMTgwIDkwTDIxMCA2MFoiIGNsYXNzPSJibHVlLXNoYXBlIi8+CiAgPHBhdGggZD0iTTQ1MCA2MEw0ODAgOTBMNDUwIDEyMEw0MjAgOTBMNDUwIDYwWiIgY2xhc3M9ImJsdWUtc2hhcGUiLz4KICA8cGF0aCBkPSJNNTEwIDEyMEw1NDAgMTUwTDUxMCAxODBMNDgwIDE1MEw1MTAgMTIwWiIgY2xhc3M9ImJsdWUtc2hhcGUiLz4KICA8cGF0aCBkPSJNNDUwIDE4MEw0ODAgMjEwTDQ1MCAyNDBMNDIwIDIxMEw0NTAgMTgwWiIgY2xhc3M9ImJsdWUtc2hhcGUiLz4KICA8cGF0aCBkPSJNMzkwIDI0MEw0MjAgMjcwTDM5MCAzMDBMMzYwIDI3MEwzOTAgMjQwWiIgY2xhc3M9ImJsdWUtc2hhcGUiLz4KICA8cGF0aCBkPSJNMzMwIDE4MEwzNjAgMjEwTDMzMCAyNDBMMzAwIDIxMEwzMzAgMTgwWiIgY2xhc3M9ImJsdWUtc2hhcGUiLz4KICA8cGF0aCBkPSJNOTAgNjBMMTIwIDkwTDkwIDEyMEw2MCA5MEw5MCA2MFoiIGNsYXNzPSJibHVlLXNoYXBlIi8+CiAgPHBhdGggZD0iTTM5MCAwTDQyMCAzMEwxNTAgMzAwTDAgMTUwTDMwIDEyMEwxNTAgMjQwTDM5MCAwWiIgY2xhc3M9ImRhcmtlci1ibHVlLXNoYXBlIi8+Cjwvc3ZnPg==',
+    BASELINE_HIGH: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCA1NDAgMzAwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxzdHlsZT4KICAgIC5ncmVlbi1zaGFwZSB7CiAgICAgIGZpbGw6ICNDNEVFRDA7IC8qIExpZ2h0IG1vZGUgKi8KICAgIH0KCiAgICBAbWVkaWEgKHByZWZlcnMtY29sb3Itc2NoZW1lOiBkYXJrKSB7CiAgICAgIC5ncmVlbi1zaGFwZSB7CiAgICAgICAgZmlsbDogIzEyNTIyNTsgLyogRGFyayBtb2RlICovCiAgICAgIH0KICAgIH0KICA8L3N0eWxlPgogIDxwYXRoIGQ9Ik00MjAgMzBMMzkwIDYwTDQ4MCAxNTBMMzkwIDI0MEwzMzAgMTgwTDMwMCAyMTBMMzkwIDMwMEw1NDAgMTUwTDQyMCAzMFoiIGNsYXNzPSJncmVlbi1zaGFwZSIvPgogIDxwYXRoIGQ9Ik0xNTAgMEwzMCAxMjBMNjAgMTUwTDE1MCA2MEwyMTAgMTIwTDI0MCA5MEwxNTAgMFoiIGNsYXNzPSJncmVlbi1zaGFwZSIvPgogIDxwYXRoIGQ9Ik0zOTAgMEw0MjAgMzBMMTUwIDMwMEwwIDE1MEwzMCAxMjBMMTUwIDI0MEwzOTAgMFoiIGZpbGw9IiMxRUE0NDYiLz4KPC9zdmc+'
 };
 function getEntryStatus(status) {
     switch (status) {
-        case 'experimental':
-            return '⚠️ Property is experimental. Be cautious when using it.️\n\n';
         case 'nonstandard':
             return '🚨️ Property is nonstandard. Avoid using it.\n\n';
         case 'obsolete':
@@ -24,6 +50,35 @@ function getEntryStatus(status) {
             return '';
     }
 }
+function getEntryBaselineStatus(baseline, browsers) {
+    if (baseline.status === "false") {
+        const missingBrowsers = getMissingBaselineBrowsers(browsers);
+        let status = `Limited availability across major browsers`;
+        if (missingBrowsers) {
+            status += ` (Not fully implemented in ${missingBrowsers})`;
+        }
+        return status;
+    }
+    const baselineYear = baseline.baseline_low_date?.split('-')[0];
+    return `${baseline.status === 'low' ? 'Newly' : 'Widely'} available across major browsers (Baseline since ${baselineYear})`;
+}
+function getEntryBaselineImage(baseline) {
+    if (!baseline) {
+        return '';
+    }
+    let baselineImg;
+    switch (baseline?.status) {
+        case 'low':
+            baselineImg = BaselineImages.BASELINE_LOW;
+            break;
+        case 'high':
+            baselineImg = BaselineImages.BASELINE_HIGH;
+            break;
+        default:
+            baselineImg = BaselineImages.BASELINE_LIMITED;
+    }
+    return `![Baseline icon](${baselineImg})`;
+}
 export function getEntryDescription(entry, doesSupportMarkdown, settings) {
     let result;
     if (doesSupportMarkdown) {
@@ -56,13 +111,14 @@ function getEntryStringDescription(entry, settings) {
     }
     let result = '';
     if (settings?.documentation !== false) {
+        let status = '';
         if (entry.status) {
-            result += getEntryStatus(entry.status);
+            status = getEntryStatus(entry.status);
+            result += status;
         }
         result += entry.description;
-        const browserLabel = getBrowserLabel(entry.browsers);
-        if (browserLabel) {
-            result += '\n(' + browserLabel + ')';
+        if (entry.baseline && !status) {
+            result += `\n\n${getEntryBaselineStatus(entry.baseline, entry.browsers)}`;
         }
         if ('syntax' in entry) {
             result += `\n\nSyntax: ${entry.syntax}`;
@@ -84,8 +140,10 @@ function getEntryMarkdownDescription(entry, settings) {
     }
     let result = '';
     if (settings?.documentation !== false) {
+        let status = '';
         if (entry.status) {
-            result += getEntryStatus(entry.status);
+            status = getEntryStatus(entry.status);
+            result += status;
         }
         if (typeof entry.description === 'string') {
             result += textToMarkedString(entry.description);
@@ -93,9 +151,8 @@ function getEntryMarkdownDescription(entry, settings) {
         else {
             result += entry.description.kind === MarkupKind.Markdown ? entry.description.value : textToMarkedString(entry.description.value);
         }
-        const browserLabel = getBrowserLabel(entry.browsers);
-        if (browserLabel) {
-            result += '\n\n(' + textToMarkedString(browserLabel) + ')';
+        if (entry.baseline && !status) {
+            result += `\n\n${getEntryBaselineImage(entry.baseline)} _${getEntryBaselineStatus(entry.baseline, entry.browsers)}_`;
         }
         if ('syntax' in entry && entry.syntax) {
             result += `\n\nSyntax: ${textToMarkedString(entry.syntax)}`;
@@ -111,26 +168,35 @@ function getEntryMarkdownDescription(entry, settings) {
     }
     return result;
 }
+// TODO: Remove "as any" when tsconfig supports es2021+
+const missingBaselineBrowserFormatter = new Intl.ListFormat("en", {
+    style: "long",
+    type: "disjunction",
+});
 /**
- * Input is like `["E12","FF49","C47","IE","O"]`
- * Output is like `Edge 12, Firefox 49, Chrome 47, IE, Opera`
+ * Input is like [E12, FF28, FM28, C29, CM29, IE11, O16]
+ * Output is like `Safari`
  */
-export function getBrowserLabel(browsers = []) {
-    if (browsers.length === 0) {
-        return null;
-    }
-    const entries = [];
-    for (const b of browsers) {
-        const matches = b.match(/([A-Z]+)(\d+)?/);
-        const name = matches[1];
-        const version = matches[2];
-        if (name in browserNames) {
-            let result = browserNames[name];
-            if (version) {
-                result += ' ' + version;
-            }
-            entries.push(result);
+export function getMissingBaselineBrowsers(browsers) {
+    if (!browsers) {
+        return '';
+    }
+    const missingBrowsers = new Map(Object.entries(browserNames));
+    for (const shortCompatString of browsers) {
+        const match = shortCompatPattern.exec(shortCompatString);
+        if (!match) {
+            continue;
         }
+        const browser = match[1];
+        missingBrowsers.delete(browser);
     }
-    return entries.join(', ');
+    return missingBaselineBrowserFormatter.format(Object.values(Array.from(missingBrowsers.entries()).reduce((browsers, [browserId, browser]) => {
+        if (browser.name in browsers || browserId === 'E') {
+            browsers[browser.name] = browser.name;
+            return browsers;
+        }
+        // distinguish between platforms when applicable 
+        browsers[browser.name] = `${browser.name} on ${browser.platform}`;
+        return browsers;
+    }, {})));
 }

package/lib/umd/data/webCustomData.js

@@ -457,7 +457,7 @@
                     }
                 ],
                 "syntax": "auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>",
-                "relevance": 74,
+                "relevance": 75,
                 "references": [
                     {
                         "name": "MDN Reference",
@@ -734,7 +734,7 @@
                     }
                 ],
                 "syntax": "<single-animation-fill-mode>#",
-                "relevance": 64,
+                "relevance": 65,
                 "references": [
                     {
                         "name": "MDN Reference",
@@ -882,7 +882,7 @@
                     "O30"
                 ],
                 "syntax": "<easing-function>#",
-                "relevance": 72,
+                "relevance": 73,
                 "references": [
                     {
                         "name": "MDN Reference",
@@ -2642,7 +2642,7 @@
                     "O3.5"
                 ],
                 "syntax": "<line-width> || <line-style> || <color>",
-                "relevance": 81,
+                "relevance": 82,
                 "references": [
                     {
                         "name": "MDN Reference",
@@ -2802,7 +2802,7 @@
                     "O9.2"
                 ],
                 "syntax": "<line-width> || <line-style> || <color>",
-                "relevance": 80,
+                "relevance": 81,
                 "references": [
                     {
                         "name": "MDN Reference",
@@ -3090,7 +3090,7 @@
                     "O10.5"
                 ],
                 "syntax": "<length-percentage>{1,2}",
-                "relevance": 76,
+                "relevance": 75,
                 "references": [
                     {
                         "name": "MDN Reference",
@@ -3186,7 +3186,7 @@
                 ],
                 "values": [],
                 "syntax": "<line-width>{1,4}",
-                "relevance": 82,
+                "relevance": 83,
                 "references": [
                     {
                         "name": "MDN Reference",
@@ -3224,7 +3224,7 @@
                     }
                 ],
                 "syntax": "<length> | <percentage> | auto",
-                "relevance": 90,
+                "relevance": 91,
                 "references": [
                     {
                         "name": "MDN Reference",
@@ -3345,7 +3345,7 @@
                     }
                 ],
                 "syntax": "content-box | border-box",
-                "relevance": 92,
+                "relevance": 93,
                 "references": [
                     {
                         "name": "MDN Reference",
@@ -6951,7 +6951,7 @@
                     }
                 ],
                 "syntax": "<absolute-size> | <relative-size> | <length-percentage>",
-                "relevance": 94,
+                "relevance": 95,
                 "references": [
                     {
                         "name": "MDN Reference",
@@ -8095,7 +8095,7 @@
                     }
                 ],
                 "syntax": "<grid-line>",
-                "relevance": 52,
+                "relevance": 53,
                 "references": [
                     {
                         "name": "MDN Reference",
@@ -8982,7 +8982,7 @@
                     }
                 ],
                 "syntax": "<length> | <percentage> | auto",
-                "relevance": 94,
+                "relevance": 95,
                 "references": [
                     {
                         "name": "MDN Reference",
@@ -16296,7 +16296,7 @@
                     }
                 ],
                 "syntax": "none | <length>",
-                "relevance": 54,
+                "relevance": 55,
                 "references": [
                     {
                         "name": "MDN Reference",
@@ -17642,7 +17642,7 @@
                     "O67"
                 ],
                 "syntax": "<number>",
-                "relevance": 53,
+                "relevance": 54,
                 "references": [
                     {
                         "name": "MDN Reference",
@@ -22225,7 +22225,7 @@
                     }
                 ],
                 "syntax": "normal | break-word",
-                "relevance": 77,
+                "relevance": 78,
                 "description": "Specifies whether the UA may break within a word to prevent overflow when an otherwise-unbreakable string is too long to fit.",
                 "restrictions": [
                     "enum"
@@ -24765,7 +24765,7 @@
             {
                 "name": "inset-inline-end",
                 "syntax": "<'top'>",
-                "relevance": 54,
+                "relevance": 55,
                 "browsers": [
                     "E87",
                     "FF63",

package/lib/umd/languageFacts/entry.js

@@ -13,23 +13,49 @@
      *--------------------------------------------------------------------------------------------*/
     'use strict';
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.browserNames = void 0;
+    exports.BaselineImages = exports.browserNames = void 0;
     exports.getEntryDescription = getEntryDescription;
     exports.textToMarkedString = textToMarkedString;
-    exports.getBrowserLabel = getBrowserLabel;
+    exports.getMissingBaselineBrowsers = getMissingBaselineBrowsers;
     const cssLanguageTypes_1 = require("../cssLanguageTypes");
     exports.browserNames = {
-        E: 'Edge',
-        FF: 'Firefox',
-        S: 'Safari',
-        C: 'Chrome',
-        IE: 'IE',
-        O: 'Opera'
+        'C': {
+            name: 'Chrome',
+            platform: 'desktop'
+        },
+        'CA': {
+            name: 'Chrome',
+            platform: 'Android'
+        },
+        'E': {
+            name: 'Edge',
+            platform: 'desktop'
+        },
+        'FF': {
+            name: 'Firefox',
+            platform: 'desktop'
+        },
+        'FFA': {
+            name: 'Firefox',
+            platform: 'Android'
+        },
+        'S': {
+            name: 'Safari',
+            platform: 'macOS'
+        },
+        'SM': {
+            name: 'Safari',
+            platform: 'iOS'
+        }
+    };
+    const shortCompatPattern = /(E|FFA|FF|SM|S|CA|C|IE|O)([\d|\.]+)?/;
+    exports.BaselineImages = {
+        BASELINE_LIMITED: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCA1NDAgMzAwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxzdHlsZT4KICAgIC5ncmF5LXNoYXBlIHsKICAgICAgZmlsbDogI0M2QzZDNjsgLyogTGlnaHQgbW9kZSAqLwogICAgfQoKICAgIEBtZWRpYSAocHJlZmVycy1jb2xvci1zY2hlbWU6IGRhcmspIHsKICAgICAgLmdyYXktc2hhcGUgewogICAgICAgIGZpbGw6ICM1NjU2NTY7IC8qIERhcmsgbW9kZSAqLwogICAgICB9CiAgICB9CiAgPC9zdHlsZT4KICA8cGF0aCBkPSJNMTUwIDBMMjQwIDkwTDIxMCAxMjBMMTIwIDMwTDE1MCAwWiIgZmlsbD0iI0YwOTQwOSIvPgogIDxwYXRoIGQ9Ik00MjAgMzBMNTQwIDE1MEw0MjAgMjcwTDM5MCAyNDBMNDgwIDE1MEwzOTAgNjBMNDIwIDMwWiIgY2xhc3M9ImdyYXktc2hhcGUiLz4KICA8cGF0aCBkPSJNMzMwIDE4MEwzMDAgMjEwTDM5MCAzMDBMNDIwIDI3MEwzMzAgMTgwWiIgZmlsbD0iI0YwOTQwOSIvPgogIDxwYXRoIGQ9Ik0xMjAgMzBMMTUwIDYwTDYwIDE1MEwxNTAgMjQwTDEyMCAyNzBMMCAxNTBMMTIwIDMwWiIgY2xhc3M9ImdyYXktc2hhcGUiLz4KICA8cGF0aCBkPSJNMzkwIDBMNDIwIDMwTDE1MCAzMDBMMTIwIDI3MEwzOTAgMFoiIGZpbGw9IiNGMDk0MDkiLz4KPC9zdmc+',
+        BASELINE_LOW: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCA1NDAgMzAwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxzdHlsZT4KICAgIC5ibHVlLXNoYXBlIHsKICAgICAgZmlsbDogI0E4QzdGQTsgLyogTGlnaHQgbW9kZSAqLwogICAgfQoKICAgIEBtZWRpYSAocHJlZmVycy1jb2xvci1zY2hlbWU6IGRhcmspIHsKICAgICAgLmJsdWUtc2hhcGUgewogICAgICAgIGZpbGw6ICMyRDUwOUU7IC8qIERhcmsgbW9kZSAqLwogICAgICB9CiAgICB9CgogICAgLmRhcmtlci1ibHVlLXNoYXBlIHsKICAgICAgICBmaWxsOiAjMUI2RUYzOwogICAgfQoKICAgIEBtZWRpYSAocHJlZmVycy1jb2xvci1zY2hlbWU6IGRhcmspIHsKICAgICAgICAuZGFya2VyLWJsdWUtc2hhcGUgewogICAgICAgICAgICBmaWxsOiAjNDE4NUZGOwogICAgICAgIH0KICAgIH0KCiAgPC9zdHlsZT4KICA8cGF0aCBkPSJNMTUwIDBMMTgwIDMwTDE1MCA2MEwxMjAgMzBMMTUwIDBaIiBjbGFzcz0iYmx1ZS1zaGFwZSIvPgogIDxwYXRoIGQ9Ik0yMTAgNjBMMjQwIDkwTDIxMCAxMjBMMTgwIDkwTDIxMCA2MFoiIGNsYXNzPSJibHVlLXNoYXBlIi8+CiAgPHBhdGggZD0iTTQ1MCA2MEw0ODAgOTBMNDUwIDEyMEw0MjAgOTBMNDUwIDYwWiIgY2xhc3M9ImJsdWUtc2hhcGUiLz4KICA8cGF0aCBkPSJNNTEwIDEyMEw1NDAgMTUwTDUxMCAxODBMNDgwIDE1MEw1MTAgMTIwWiIgY2xhc3M9ImJsdWUtc2hhcGUiLz4KICA8cGF0aCBkPSJNNDUwIDE4MEw0ODAgMjEwTDQ1MCAyNDBMNDIwIDIxMEw0NTAgMTgwWiIgY2xhc3M9ImJsdWUtc2hhcGUiLz4KICA8cGF0aCBkPSJNMzkwIDI0MEw0MjAgMjcwTDM5MCAzMDBMMzYwIDI3MEwzOTAgMjQwWiIgY2xhc3M9ImJsdWUtc2hhcGUiLz4KICA8cGF0aCBkPSJNMzMwIDE4MEwzNjAgMjEwTDMzMCAyNDBMMzAwIDIxMEwzMzAgMTgwWiIgY2xhc3M9ImJsdWUtc2hhcGUiLz4KICA8cGF0aCBkPSJNOTAgNjBMMTIwIDkwTDkwIDEyMEw2MCA5MEw5MCA2MFoiIGNsYXNzPSJibHVlLXNoYXBlIi8+CiAgPHBhdGggZD0iTTM5MCAwTDQyMCAzMEwxNTAgMzAwTDAgMTUwTDMwIDEyMEwxNTAgMjQwTDM5MCAwWiIgY2xhc3M9ImRhcmtlci1ibHVlLXNoYXBlIi8+Cjwvc3ZnPg==',
+        BASELINE_HIGH: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCA1NDAgMzAwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxzdHlsZT4KICAgIC5ncmVlbi1zaGFwZSB7CiAgICAgIGZpbGw6ICNDNEVFRDA7IC8qIExpZ2h0IG1vZGUgKi8KICAgIH0KCiAgICBAbWVkaWEgKHByZWZlcnMtY29sb3Itc2NoZW1lOiBkYXJrKSB7CiAgICAgIC5ncmVlbi1zaGFwZSB7CiAgICAgICAgZmlsbDogIzEyNTIyNTsgLyogRGFyayBtb2RlICovCiAgICAgIH0KICAgIH0KICA8L3N0eWxlPgogIDxwYXRoIGQ9Ik00MjAgMzBMMzkwIDYwTDQ4MCAxNTBMMzkwIDI0MEwzMzAgMTgwTDMwMCAyMTBMMzkwIDMwMEw1NDAgMTUwTDQyMCAzMFoiIGNsYXNzPSJncmVlbi1zaGFwZSIvPgogIDxwYXRoIGQ9Ik0xNTAgMEwzMCAxMjBMNjAgMTUwTDE1MCA2MEwyMTAgMTIwTDI0MCA5MEwxNTAgMFoiIGNsYXNzPSJncmVlbi1zaGFwZSIvPgogIDxwYXRoIGQ9Ik0zOTAgMEw0MjAgMzBMMTUwIDMwMEwwIDE1MEwzMCAxMjBMMTUwIDI0MEwzOTAgMFoiIGZpbGw9IiMxRUE0NDYiLz4KPC9zdmc+'
     };
     function getEntryStatus(status) {
         switch (status) {
-            case 'experimental':
-                return '⚠️ Property is experimental. Be cautious when using it.️\n\n';
             case 'nonstandard':
                 return '🚨️ Property is nonstandard. Avoid using it.\n\n';
             case 'obsolete':
@@ -38,6 +64,35 @@
                 return '';
         }
     }
+    function getEntryBaselineStatus(baseline, browsers) {
+        if (baseline.status === "false") {
+            const missingBrowsers = getMissingBaselineBrowsers(browsers);
+            let status = `Limited availability across major browsers`;
+            if (missingBrowsers) {
+                status += ` (Not fully implemented in ${missingBrowsers})`;
+            }
+            return status;
+        }
+        const baselineYear = baseline.baseline_low_date?.split('-')[0];
+        return `${baseline.status === 'low' ? 'Newly' : 'Widely'} available across major browsers (Baseline since ${baselineYear})`;
+    }
+    function getEntryBaselineImage(baseline) {
+        if (!baseline) {
+            return '';
+        }
+        let baselineImg;
+        switch (baseline?.status) {
+            case 'low':
+                baselineImg = exports.BaselineImages.BASELINE_LOW;
+                break;
+            case 'high':
+                baselineImg = exports.BaselineImages.BASELINE_HIGH;
+                break;
+            default:
+                baselineImg = exports.BaselineImages.BASELINE_LIMITED;
+        }
+        return `![Baseline icon](${baselineImg})`;
+    }
     function getEntryDescription(entry, doesSupportMarkdown, settings) {
         let result;
         if (doesSupportMarkdown) {
@@ -70,13 +125,14 @@
         }
         let result = '';
         if (settings?.documentation !== false) {
+            let status = '';
             if (entry.status) {
-                result += getEntryStatus(entry.status);
+                status = getEntryStatus(entry.status);
+                result += status;
             }
             result += entry.description;
-            const browserLabel = getBrowserLabel(entry.browsers);
-            if (browserLabel) {
-                result += '\n(' + browserLabel + ')';
+            if (entry.baseline && !status) {
+                result += `\n\n${getEntryBaselineStatus(entry.baseline, entry.browsers)}`;
             }
             if ('syntax' in entry) {
                 result += `\n\nSyntax: ${entry.syntax}`;
@@ -98,8 +154,10 @@
         }
         let result = '';
         if (settings?.documentation !== false) {
+            let status = '';
             if (entry.status) {
-                result += getEntryStatus(entry.status);
+                status = getEntryStatus(entry.status);
+                result += status;
             }
             if (typeof entry.description === 'string') {
                 result += textToMarkedString(entry.description);
@@ -107,9 +165,8 @@
             else {
                 result += entry.description.kind === cssLanguageTypes_1.MarkupKind.Markdown ? entry.description.value : textToMarkedString(entry.description.value);
             }
-            const browserLabel = getBrowserLabel(entry.browsers);
-            if (browserLabel) {
-                result += '\n\n(' + textToMarkedString(browserLabel) + ')';
+            if (entry.baseline && !status) {
+                result += `\n\n${getEntryBaselineImage(entry.baseline)} _${getEntryBaselineStatus(entry.baseline, entry.browsers)}_`;
             }
             if ('syntax' in entry && entry.syntax) {
                 result += `\n\nSyntax: ${textToMarkedString(entry.syntax)}`;
@@ -125,27 +182,36 @@
         }
         return result;
     }
+    // TODO: Remove "as any" when tsconfig supports es2021+
+    const missingBaselineBrowserFormatter = new Intl.ListFormat("en", {
+        style: "long",
+        type: "disjunction",
+    });
     /**
-     * Input is like `["E12","FF49","C47","IE","O"]`
-     * Output is like `Edge 12, Firefox 49, Chrome 47, IE, Opera`
+     * Input is like [E12, FF28, FM28, C29, CM29, IE11, O16]
+     * Output is like `Safari`
      */
-    function getBrowserLabel(browsers = []) {
-        if (browsers.length === 0) {
-            return null;
-        }
-        const entries = [];
-        for (const b of browsers) {
-            const matches = b.match(/([A-Z]+)(\d+)?/);
-            const name = matches[1];
-            const version = matches[2];
-            if (name in exports.browserNames) {
-                let result = exports.browserNames[name];
-                if (version) {
-                    result += ' ' + version;
-                }
-                entries.push(result);
+    function getMissingBaselineBrowsers(browsers) {
+        if (!browsers) {
+            return '';
+        }
+        const missingBrowsers = new Map(Object.entries(exports.browserNames));
+        for (const shortCompatString of browsers) {
+            const match = shortCompatPattern.exec(shortCompatString);
+            if (!match) {
+                continue;
             }
+            const browser = match[1];
+            missingBrowsers.delete(browser);
         }
-        return entries.join(', ');
+        return missingBaselineBrowserFormatter.format(Object.values(Array.from(missingBrowsers.entries()).reduce((browsers, [browserId, browser]) => {
+            if (browser.name in browsers || browserId === 'E') {
+                browsers[browser.name] = browser.name;
+                return browsers;
+            }
+            // distinguish between platforms when applicable 
+            browsers[browser.name] = `${browser.name} on ${browser.platform}`;
+            return browsers;
+        }, {})));
     }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vscode-css-languageservice",
-  "version": "6.3.3",
+  "version": "6.3.4",
   "description": "Language service for CSS, LESS and SCSS",
   "main": "./lib/umd/cssLanguageService.js",
   "typings": "./lib/umd/cssLanguageService",
@@ -17,7 +17,7 @@
   "devDependencies": {
     "@types/mocha": "^10.0.10",
     "@types/node": "18.x",
-    "@typescript-eslint/eslint-plugin": "^8.27.0",
+    "@typescript-eslint/eslint-plugin": "^8.29.0",
     "@typescript-eslint/parser": "^8.27.0",
     "@vscode/web-custom-data": "^0.5.0",
     "eslint": "^9.23.0",
@@ -31,7 +31,7 @@
     "@vscode/l10n": "^0.0.18",
     "vscode-languageserver-textdocument": "^1.0.12",
     "vscode-languageserver-types": "3.17.5",
-    "vscode-uri": "^3.0.8"
+    "vscode-uri": "^3.1.0"
   },
   "scripts": {
     "prepack": "npm run clean && npm run compile-esm && npm run test && npm run remove-sourcemap-refs",