Improve browser names/versions reported by hint-compat-api

packages/hint-compat-api/package.json

@@ -29,7 +29,6 @@
     "nyc": "^14.1.0",
     "postcss": "^7.0.17",
     "rimraf": "^3.0.0",
-    "semver": "^6.3.0",
     "typescript": "^3.6.2"
   },
   "engines": {

packages/hint-compat-api/src/css.ts

@@ -8,7 +8,7 @@ import { vendor, AtRule, Rule, Declaration, ChildNode, ContainerBase } from 'pos
 import { HintContext } from 'hint/dist/src/lib/hint-context';
 import { IHint, ProblemLocation } from 'hint/dist/src/lib/types';
 import { StyleEvents } from '@hint/parser-css/dist/src/types';
-import { getUnsupported } from '@hint/utils/dist/src/compat';
+import { getUnsupportedDetails, UnsupportedBrowsers } from '@hint/utils/dist/src/compat';
 import { getCSSCodeSnippet } from '@hint/utils/dist/src/report';
 
 import { filterBrowsers, joinBrowsers } from './utils/browsers';
@@ -21,7 +21,7 @@ import { getMessage } from './i18n.import';
 type ReportData = {
     feature: string;
     node: ChildNode;
-    unsupported: string[];
+    unsupported: UnsupportedBrowsers;
 };
 
 type ReportMap = Map<string, ReportData[] | 'supported'>;
@@ -57,7 +57,7 @@ const validateAtRule = (node: AtRule, context: Context): ReportData | null => {
         return null;
     }
 
-    const unsupported = getUnsupported({ rule: node.name }, context.browsers);
+    const unsupported = getUnsupportedDetails({ rule: node.name }, context.browsers);
 
     if (unsupported) {
         return { feature: `@${node.name}`, node, unsupported };
@@ -69,7 +69,7 @@ const validateAtRule = (node: AtRule, context: Context): ReportData | null => {
 };
 
 const validateDeclValue = (node: Declaration, context: Context): ReportData | null => {
-    const unsupported = getUnsupported({ property: node.prop, value: node.value }, context.browsers);
+    const unsupported = getUnsupportedDetails({ property: node.prop, value: node.value }, context.browsers);
 
     if (unsupported) {
         return { feature: `${node.prop}: ${node.value}`, node, unsupported };
@@ -85,7 +85,7 @@ const validateDecl = (node: Declaration, context: Context): ReportData | null =>
         return null;
     }
 
-    const unsupported = getUnsupported({ property }, context.browsers);
+    const unsupported = getUnsupportedDetails({ property }, context.browsers);
 
     if (unsupported) {
         return { feature: `${property}`, node, unsupported };
@@ -132,12 +132,12 @@ const reportUnsupported = (reportsMap: ReportMap, context: Context): void => {
         }
 
         // Remove browsers not included in ALL reports for this property.
-        const unsupported = intersection(...reports.map((report) => {
-            return report.unsupported;
+        const browsers = intersection(...reports.map((report) => {
+            return report.unsupported.browsers;
         }));
 
         // Ignore if every browser passed at least one report for this property.
-        if (!unsupported.length) {
+        if (!browsers.length) {
             continue;
         }
 
@@ -156,6 +156,11 @@ const reportUnsupported = (reportsMap: ReportMap, context: Context): void => {
         const finalReports = unprefixedReports.length ? unprefixedReports : reports;
 
         for (const report of finalReports) {
+            const unsupported: UnsupportedBrowsers = {
+                browsers,
+                details: report.unsupported.details
+            };
+
             context.report({ ...report, unsupported });
         }
     }

packages/hint-compat-api/src/html.ts

@@ -5,7 +5,7 @@
 import { HintContext } from 'hint/dist/src/lib/hint-context';
 import { IHint } from 'hint/dist/src/lib/types';
 import { HTMLAttribute, HTMLElement } from '@hint/utils';
-import { getUnsupported } from '@hint/utils/dist/src/compat';
+import { getUnsupportedDetails, UnsupportedBrowsers } from '@hint/utils/dist/src/compat';
 
 import { filterBrowsers, joinBrowsers } from './utils/browsers';
 import { resolveIgnore } from './utils/ignore';
@@ -15,7 +15,7 @@ import { getMessage } from './i18n.import';
 
 type ReportData = {
     feature: string;
-    unsupported: string[];
+    unsupported: UnsupportedBrowsers;
 };
 
 type Context = {
@@ -29,7 +29,7 @@ const validateAttributeValue = (element: string, attr: HTMLAttribute, context: C
         return;
     }
 
-    const unsupported = getUnsupported({ attribute: attr.name, element, value: attr.value }, context.browsers);
+    const unsupported = getUnsupportedDetails({ attribute: attr.name, element, value: attr.value }, context.browsers);
 
     if (unsupported) {
         context.report({ feature: `${element}[${attr.name}=${attr.value}]`, unsupported });
@@ -41,7 +41,7 @@ const validateAttribute = (element: string, attr: HTMLAttribute, context: Contex
         return;
     }
 
-    const unsupported = getUnsupported({ attribute: attr.name, element }, context.browsers);
+    const unsupported = getUnsupportedDetails({ attribute: attr.name, element }, context.browsers);
 
     if (unsupported) {
         context.report({ feature: `${element}[${attr.name}]`, unsupported });
@@ -57,7 +57,7 @@ const validateElement = (node: HTMLElement, context: Context) => {
         return;
     }
 
-    const unsupported = getUnsupported({ element }, context.browsers);
+    const unsupported = getUnsupportedDetails({ element }, context.browsers);
 
     if (unsupported) {
         context.report({ feature: element, unsupported });

packages/hint-compat-api/src/utils/browsers.ts

@@ -1,8 +1,5 @@
-import * as semver from 'semver';
-
-const coerce = (version: string): semver.SemVer | string => {
-    return semver.coerce(version) || /* istanbul ignore next */ version;
-};
+import { UnsupportedBrowsers } from '@hint/utils/dist/src/compat';
+import { getFriendlyName } from '@hint/utils/dist/src/compat/browsers';
 
 /**
  * Apply temporary filters to the list of target browsers to reduce
@@ -32,55 +29,32 @@ export const filterBrowsers = (browsers: string[]): string[] => {
 };
 
 /**
- * Serialize condensed version ranges for provided browsers.
+ * Serialize summarized support ranges for provided browsers.
  *
  * ```js
- * joinBrowsers(['chrome 74', 'chrome 75', 'chrome 76', 'edge 15', 'edge 16', 'firefox 67']);
- * // returns 'chrome 74-76, edge 15-16, firefox 67';
+ * joinBrowsers({ browsers: ['edge 15'], browserDetails: new Map([['edge 15', { versionAdded: '18' }]]));
+ * // returns 'Edge < 18';
  * ```
  */
-export const joinBrowsers = (browsers: string[]): string => {
-    const versionsByName = new Map<string, string[]>();
-
-    // Group browser versions by browser name.
-    for (const browser of browsers) {
-        const [name, version] = browser.split(' ');
+export const joinBrowsers = (unsupported: UnsupportedBrowsers): string => {
+    const summaries = unsupported.browsers.map((browser) => {
+        const name = getFriendlyName(browser);
+        const details = unsupported.details.get(browser);
 
-        if (!versionsByName.has(name)) {
-            versionsByName.set(name, []);
+        if (!details) {
+            throw new Error(`No details provided for browser: ${name}`);
         }
 
-        versionsByName.get(name)!.push(version);
-    }
-
-    const results: string[] = [];
-
-    // Sort and serialize version ranges for each browser name.
-    for (const [name, versions] of versionsByName) {
-        versions.sort((v1, v2) => {
-            return semver.compare(coerce(v1), coerce(v2));
-        });
-
-        const ranges: string[] = [];
-
-        for (let i = 0, start = versions[0]; i < versions.length; i++) {
-            if (parseInt(versions[i + 1]) - parseInt(versions[i]) <= 1) {
-                continue; // Continue until the end of a range.
-            }
-
-            // Format current range as either `start` or `start-end`.
-            if (start === versions[i]) {
-                ranges.push(start);
-            } else {
-                ranges.push(`${start}-${versions[i]}`);
-            }
-
-            // Remember the start of the next range.
-            start = versions[i + 1];
+        if (details.versionAdded && details.versionRemoved) {
+            return `${name} ${details.versionRemoved}-${details.versionAdded}`;
+        } else if (details.versionAdded) {
+            return `${name} < ${details.versionAdded}`;
+        } else if (details.versionRemoved) {
+            return `${name} ${details.versionRemoved}+`;
         }
 
-        results.push(`${name} ${ranges.join(', ')}`);
-    }
+        return name;
+    });
 
-    return results.join(', ');
+    return [...new Set(summaries)].sort().join(', ');
 };

packages/hint-compat-api/tests/css.ts

@@ -27,7 +27,7 @@ testHint(hintPath,
             name: 'Reports unsupported CSS at-rules',
             reports: [
                 {
-                    message: '@keyframes is not supported by ie 9.',
+                    message: '@keyframes is not supported by Internet Explorer < 10.',
                     position: { match: '@keyframes' }
                 }
             ],
@@ -41,27 +41,27 @@ testHint(hintPath,
             name: 'Reports unsupported properties, respecting prefixes and fallback',
             reports: [
                 {
-                    message: 'appearance is not supported by ie 9-11.',
+                    message: 'appearance is not supported by Internet Explorer.',
                     position: { match: 'appearance: button; /* Report 1 */' }
                 },
                 {
-                    message: 'appearance is not supported by ie 9-11.',
+                    message: 'appearance is not supported by Internet Explorer.',
                     position: { match: 'appearance: button; /* Report 2 */' }
                 },
                 {
-                    message: '-webkit-appearance is not supported by ie 9-11.',
+                    message: '-webkit-appearance is not supported by Internet Explorer.',
                     position: { match: '-webkit-appearance: button; /* Report 3 */' }
                 },
                 {
-                    message: '-moz-appearance is not supported by ie 9-11.',
+                    message: '-moz-appearance is not supported by Internet Explorer.',
                     position: { match: '-moz-appearance: button; /* Report 4 */' }
                 },
                 {
-                    message: '-webkit-appearance is not supported by firefox 65-66, ie 9-11.',
+                    message: '-webkit-appearance is not supported by Firefox, Internet Explorer.',
                     position: { match: '-webkit-appearance: button; /* Report 5 */' }
                 },
                 {
-                    message: 'appearance is not supported by chrome 73-74, edge 15-16, firefox 65-66, ie 9-11.',
+                    message: 'appearance is not supported by Chrome, Edge, Firefox, Internet Explorer.',
                     position: { match: 'appearance: button; /* Report 6 */' }
                 }
             ],
@@ -74,7 +74,7 @@ testHint(hintPath,
          *     name: 'Reports unsupported CSS selectors',
          *     reports: [
          *         {
-         *             message: ':valid is not supported by ie 9.',
+         *             message: ':valid is not supported by Internet Explorer < 10.',
          *             position: { match: ':valid' }
          *         }
          *     ],
@@ -85,7 +85,7 @@ testHint(hintPath,
             name: 'Respects CSS @supports rules when generating reports',
             reports: [
                 {
-                    message: 'display: grid is not supported by edge 15.',
+                    message: 'display: grid is not supported by Edge < 16.',
                     position: { match: 'display: grid; /* Report */' }
                 }
             ],
@@ -95,19 +95,19 @@ testHint(hintPath,
             name: 'Reports unsupported CSS property values, respecting prefixes and fallback',
             reports: [
                 {
-                    message: 'display: grid is not supported by ie 9.',
+                    message: 'display: grid is not supported by Internet Explorer.',
                     position: { match: 'display: grid; /* Report 1 */' }
                 },
                 {
-                    message: 'display: grid is not supported by ie 9.',
+                    message: 'display: grid is not supported by Internet Explorer.',
                     position: { match: 'display: grid; /* Report 2 */' }
                 },
                 {
-                    message: 'display: -ms-grid is not supported by chrome 73-74, firefox 65-66, ie 9.',
+                    message: 'display: -ms-grid is not supported by Chrome, Firefox, Internet Explorer < 10.',
                     position: { match: 'display: -ms-grid; /* Report 3 */' }
                 },
                 {
-                    message: 'display: grid is not supported by edge 15, ie 9-11.',
+                    message: 'display: grid is not supported by Edge < 16, Internet Explorer.',
                     position: { match: 'display: grid; /* Report 4 */' }
                 }
             ],
@@ -139,7 +139,7 @@ testHint(hintPath,
             name: 'Reports overridden ignored CSS features',
             reports: [
                 {
-                    message: 'appearance is not supported by ie 9-11.',
+                    message: 'appearance is not supported by Internet Explorer.',
                     position: { match: 'appearance: none; /* unprefixed */' }
                 }
             ],

packages/hint-compat-api/tests/html.ts

@@ -21,11 +21,11 @@ testHint(hintPath,
             name: 'Reports unsupported HTML attributes',
             reports: [
                 {
-                    message: 'img[srcset] is not supported by ie 10-11.',
+                    message: 'img[srcset] is not supported by Internet Explorer.',
                     position: { match: 'img srcset=' }
                 },
                 {
-                    message: 'div[hidden] is not supported by ie 10.',
+                    message: 'div[hidden] is not supported by Internet Explorer < 11.',
                     position: { match: 'div hidden' }
                 }
             ],
@@ -35,11 +35,11 @@ testHint(hintPath,
             name: 'Reports unsupported HTML elements',
             reports: [
                 {
-                    message: 'blink is not supported by chrome 73-74, edge 17-18, firefox 65-66, ie 10-11.',
+                    message: 'blink is not supported by Chrome, Edge, Firefox 22+, Internet Explorer.',
                     position: { match: 'blink' }
                 },
                 {
-                    message: 'details is not supported by edge 17-18, ie 10-11.',
+                    message: 'details is not supported by Edge, Internet Explorer.',
                     position: { match: 'details' }
                 }
             ],
@@ -54,7 +54,7 @@ testHint(hintPath,
             reports: [
                 // TODO: Include <form method="dialog"> or similar once MDN data is available
                 {
-                    message: 'input[type=color] is not supported by ie 10-11.',
+                    message: 'input[type=color] is not supported by Internet Explorer.',
                     position: { match: 'input type="color"' }
                 }
             ],
@@ -70,7 +70,7 @@ testHint(hintPath,
             name: 'Reports overridden ignored HTML features',
             reports: [
                 {
-                    message: 'script[integrity] is not supported by ie 10-11.',
+                    message: 'script[integrity] is not supported by Internet Explorer.',
                     position: { match: 'script integrity' }
                 }
             ],