Upgrade: Bump @mdn/browser-compat-data from 4.1.10 to 5.5.23

vidorteg · web-flow · commit dac7399bfda3 · 2024-04-29T18:59:46.000-07:00
Updates mdn-data to latest version 2.6.1 and @mdn/browser-compat-data to 5.5.23. It also updates the test and dependencies to be able to work with this latest update. --- Close #5834 Close #5824
diff --git a/packages/extension-browser/package.json b/packages/extension-browser/package.json
@@ -10,7 +10,7 @@
     "workerThreads": false
   },
   "browserslist": "last 2 chrome versions, last 2 firefox versions",
-  "bundleSize": 810000,
+  "bundleSize": 1880000,
   "description": "webhint browser extension",
   "devDependencies": {
     "@hint/hint-axe": "^4.4.20",
diff --git a/packages/hint-compat-api/tests/css.ts b/packages/hint-compat-api/tests/css.ts
@@ -94,7 +94,7 @@ testHint(hintPath,
                         link: 'https://developer.mozilla.org/docs/Web/CSS/appearance',
                         text: 'Learn more about this CSS feature on MDN'
                     }],
-                    message: `'appearance' is not supported by Chrome < 84, Edge < 84, Firefox < 80, Internet Explorer. Add '-webkit-appearance' to support Chrome, Edge 12+. Add '-moz-appearance' to support Firefox.`,
+                    message: `'appearance' is not supported by Chrome < 84, Edge < 84, Firefox < 80, Internet Explorer. Add '-webkit-appearance' to support Chrome, Edge 12+, Firefox 64+. Add '-moz-appearance' to support Firefox.`,
                     position: { match: 'appearance: button; /* Report 6 */', range: 'appearance' },
                     severity: Severity.error
                 }
@@ -243,7 +243,7 @@ testHint(hintPath,
                         link: 'https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Subgrid',
                         text: 'Learn more about this CSS feature on MDN'
                     }],
-                    message: `'grid-template-rows: subgrid' is not supported by Edge.`,
+                    message: `'grid-template-rows: subgrid' is not supported by Edge < 117.`,
                     position: { match: 'subgrid;', range: 'subgrid' },
                     severity: Severity.warning
                 }
diff --git a/packages/hint-compat-api/tests/fixtures/html/elements.html b/packages/hint-compat-api/tests/fixtures/html/elements.html
@@ -1,3 +1,3 @@
-<blink></blink>
+<search title="Sample Title">...</search>
 <details></details>
 <div></div>
diff --git a/packages/hint-compat-api/tests/html.ts b/packages/hint-compat-api/tests/html.ts
@@ -45,11 +45,11 @@ testHint(hintPath,
             reports: [
                 {
                     documentation: [{
-                        link: 'https://developer.mozilla.org/docs/Web/HTML/Element/blink',
+                        link: 'https://developer.mozilla.org/docs/Web/HTML/Element/search',
                         text: 'Learn more about this HTML feature on MDN'
                     }],
-                    message: `'blink' is not supported by Chrome, Edge, Firefox 22+, Internet Explorer.`,
-                    position: { match: 'blink' },
+                    message: `'search' is not supported by Chrome < 118, Edge < 118, Firefox < 118, Internet Explorer.`,
+                    position: { match: 'search' },
                     severity: Severity.warning
                 },
                 {
diff --git a/packages/utils-compat-data/package.json b/packages/utils-compat-data/package.json
@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "@hint/utils-css": "^1.0.15",
-    "@mdn/browser-compat-data": "^4.1.10",
-    "mdn-data": "^2.0.27",
+    "@mdn/browser-compat-data": "^5.5.23",
+    "mdn-data": "^2.6.1",
     "postcss-selector-parser": "^6.0.8",
     "postcss-value-parser": "^4.2.0",
     "semver": "^7.3.5"
diff --git a/packages/utils-compat-data/scripts/extra-data.js b/packages/utils-compat-data/scripts/extra-data.js
@@ -31,14 +31,16 @@ const extraData = {
                         }
                     }
                 }
-            }
+            },
         },
         types: {
             color: {
-                alpha_hexadecimal_notation: {
-                    __compat: {
-                        match: {
-                            regex_token: '^#[0-9a-fA-F]{4}(?:[0-9a-fA-F]{4})?$'
+                rgb_hexadecimal_notation: {
+                    alpha_hexadecimal_notation: {
+                        __compat: {
+                            match: {
+                                regex_token: '^#[0-9a-fA-F]{4}(?:[0-9a-fA-F]{4})?$'
+                            }
                         }
                     }
                 }
diff --git a/packages/utils-compat-data/scripts/mdn-browser-compat-data.js b/packages/utils-compat-data/scripts/mdn-browser-compat-data.js
@@ -213,6 +213,14 @@ const removeFeatureData = (data) => {
     delete compat.description;
     // Status is not needed for analysis.
     delete data.__compat.status;
+    // Source file is not needed for analysis
+    delete data.__compat.source_file;
+    // Tags not needed for analysis
+    delete data.__compat.tags;
+    // delete non-desktop or mobile browser to reduce size of bundle.
+    delete support.oculus;
+    // Spec url is not needed for analysis.
+    delete data.__compat.spec_url;
 
     // Remove unnecessary data per-browser.
     for (const browserName of Object.keys(support)) {
@@ -280,12 +288,12 @@ removeFeatures(data.css);
 removeFeatures(data.html);
 
 const code = `/* eslint-disable */
-import { Browsers, PrimaryIdentifier } from '@mdn/browser-compat-data/types';
+import { Browsers, Identifier, CompatStatement } from '@mdn/browser-compat-data/types';
 
 type Data = {
     browsers: Browsers;
-    css: PrimaryIdentifier;
-    html: PrimaryIdentifier;
+    css: Identifier & {__compat?: CompatStatement};
+    html: Identifier & {__compat?: CompatStatement};
 }
 
 export const mdn: Data = ${JSON.stringify(data, null, 4)} as any;
diff --git a/packages/utils-compat-data/scripts/mdn-data.js b/packages/utils-compat-data/scripts/mdn-data.js
@@ -14,6 +14,10 @@ const propertyRef = /<'([a-z-]+)'>/gi;
 /** Match a reference to a CSS type, e.g. `<color>` */
 const typeRef = /<([a-z-]+)>/gi;
 
+const problematicIds = new Set([
+    'white-space-trim' // not present in mdn-data/css/properties.json
+]);
+
 /**
  * Helper for `[].flatMap` until we move to Node 11+.
  * @param {any[]} arr
@@ -48,11 +52,15 @@ const matchAll = (str, regex) => {
  * @returns {string[]} A flattened array of all referenced types.
  */
 const getTypesForProperty = (name) => {
+    if (problematicIds.has(name)){
+        return [name, ''];
+    }
+
     const { syntax } = properties[name];
     const typeRefs = [...matchAll(syntax, typeRef)].map((m) => {
         return m[1];
     });
-    /** @type {string[]} */
+        /** @type {string[]} */
     const propertyRefs = flatMap([...matchAll(syntax, propertyRef)], (m) => {
         return getTypesForProperty(m[1]);
     });
diff --git a/packages/utils-compat-data/src/browsers.ts b/packages/utils-compat-data/src/browsers.ts
@@ -1,4 +1,4 @@
-import { Identifier, SimpleSupportStatement, SupportStatement } from '@mdn/browser-compat-data/types';
+import { BrowserName, CompatStatement, Identifier, SimpleSupportStatement, SupportStatement } from '@mdn/browser-compat-data/types';
 const semver = require('semver/preload');
 
 import { mdn } from './browser-compat-data';
@@ -55,7 +55,7 @@ const coerce = (version: string): string | import('semver').SemVer => {
 };
 
 const normalizeBrowserName = (name: string) => {
-    return browserToMDN.get(name) || name;
+    return (browserToMDN.get(name) || name) as BrowserName;
 };
 
 /**
@@ -204,7 +204,7 @@ export const getFriendlyName = (browser: string): string => {
  * @param feature An MDN feature `Identifier` with `__compat` data.
  * @param browsers A list of target browsers (e.g. `['chrome 74', 'ie 11']`).
  */
-export const getUnsupportedBrowsers = (feature: Identifier | undefined, prefix: string, browsers: string[], unprefixed: string, parent?: Identifier): UnsupportedBrowsers | null => {
+export const getUnsupportedBrowsers = (feature: (Identifier & {__compat?: CompatStatement}) | undefined, prefix: string, browsers: string[], unprefixed: string, parent?: Identifier & {__compat?: CompatStatement}): UnsupportedBrowsers | null => {
     if (!feature || !feature.__compat || !feature.__compat.support) {
         return null; // Assume support if no matching feature was provided.
     }
diff --git a/packages/utils-compat-data/src/css.ts b/packages/utils-compat-data/src/css.ts
@@ -1,4 +1,4 @@
-import { Identifier } from '@mdn/browser-compat-data/types';
+import { CompatStatement, Identifier } from '@mdn/browser-compat-data/types';
 import { getUnprefixed, getVendorPrefix } from '@hint/utils-css';
 
 import { mdn } from './browser-compat-data';
@@ -60,9 +60,14 @@ const getTokens = (nodes: any[]): [string, string][] => {
  * Check if any parts of a value align with an MDN feature's matches clause.
  * If so, return browser support based on that feature's data.
  */
-const getValueMatchesUnsupported = (context: Identifier, featureSupport: Identifier, value: ParsedValue, browsers: string[]): UnsupportedBrowsers | null => {
+const getValueMatchesUnsupported = (context: Identifier & {__compat?: CompatStatement}, featureSupport: Identifier & {__compat?: CompatStatement}, value: ParsedValue, browsers: string[]): UnsupportedBrowsers | null => {
     const { prefix, tokens, unprefixedValue } = value;
-    const matches = featureSupport.__compat && (featureSupport.__compat as IMatchesCompatStatement).matches;
+    let matches = featureSupport.__compat && (featureSupport.__compat as IMatchesCompatStatement).matches;
+
+    // Matches Block property could be available either as matches or match.
+    if (!matches) {
+        matches = featureSupport.__compat && (featureSupport.__compat as IMatchesCompatStatement).match;
+    }
 
     if (!matches) {
         return null;
@@ -97,7 +102,7 @@ const getValueMatchesUnsupported = (context: Identifier, featureSupport: Identif
  * Check if any parts of a value align with an MDN feature's name.
  * If so, return browser support based on that feature's data.
  */
-const getValueTokenUnsupported = (context: Identifier, featureName: string, featureSupport: Identifier, value: ParsedValue, browsers: string[]): UnsupportedBrowsers | null => {
+const getValueTokenUnsupported = (context: Identifier & {__compat?: CompatStatement}, featureName: string, featureSupport: Identifier & {__compat?: CompatStatement}, value: ParsedValue, browsers: string[]): UnsupportedBrowsers | null => {
     for (const [tokenPrefix, tokenValue] of value.tokens) {
         if (featureName === tokenValue) {
             return getUnsupportedBrowsers(featureSupport, tokenPrefix, browsers, tokenValue, context);
@@ -112,15 +117,15 @@ const getValueTokenUnsupported = (context: Identifier, featureName: string, feat
  * sub-features in the provided context, using keys and `matches` data
  * to test each tokenized string from the value.
  */
-const getPartialValueUnsupported = (context: Identifier, value: ParsedValue, browsers: string[]): UnsupportedBrowsers | null => {
+const getPartialValueUnsupported = (context: Identifier & {__compat?: CompatStatement}, value: ParsedValue, browsers: string[]): UnsupportedBrowsers | null => {
     for (const [featureName, featureSupport] of Object.entries(context)) {
         if (featureName === '__compat') {
             continue;
         }
 
-        const unsupported = getValueMatchesUnsupported(context, featureSupport, value, browsers) ||
-            getValueTokenUnsupported(context, featureName, featureSupport, value, browsers) ||
-            getPartialValueUnsupported(featureSupport, value, browsers);
+        const unsupported = getValueMatchesUnsupported(context, featureSupport as Identifier & {__compat?: CompatStatement}, value, browsers) ||
+            getValueTokenUnsupported(context, featureName, featureSupport as Identifier & {__compat?: CompatStatement}, value, browsers) ||
+            getPartialValueUnsupported(featureSupport as Identifier & {__compat?: CompatStatement}, value, browsers);
 
         if (unsupported) {
             return unsupported;
@@ -138,11 +143,11 @@ const getPartialValueUnsupported = (context: Identifier, value: ParsedValue, bro
  * (to reduce bundle size), but referenced CSS types with partial support may
  * still exist (e.g. "color" and alpha_hex_value).
  */
-const getValueUnsupported = (context: Identifier | undefined, property: string, value: string, browsers: string[]): UnsupportedBrowsers | null => {
+const getValueUnsupported = (context: (Identifier & {__compat?: CompatStatement}) | undefined, property: string, value: string, browsers: string[]): UnsupportedBrowsers | null => {
     const [data, prefix, unprefixedValue] = getFeatureData(context, value);
 
     if (data) {
-        return getUnsupportedBrowsers(data, prefix, browsers, unprefixedValue, data.__compat?.mdn_url ? undefined : context);
+        return getUnsupportedBrowsers(data as (Identifier & {__compat?: CompatStatement}), prefix, browsers, unprefixedValue, (data as (Identifier & {__compat?: CompatStatement})).__compat?.mdn_url ? undefined : context);
     }
 
     const parsedValue: ParsedValue = {
@@ -154,7 +159,7 @@ const getValueUnsupported = (context: Identifier | undefined, property: string,
     // Check browser support for each CSS type associated with the property (if any).
     if (types.has(property)) {
         for (const type of types.get(property)!) {
-            const typeContext = mdn.css.types[type];
+            const typeContext: Identifier & {__compat?: CompatStatement} = mdn.css.types[type] as (Identifier & {__compat?: CompatStatement});
             const result = typeContext && getPartialValueUnsupported(typeContext, parsedValue, browsers);
 
             if (result) {
@@ -174,13 +179,13 @@ export const getDeclarationUnsupported = (feature: DeclarationQuery, browsers: s
     const key = `css-declaration:${feature.property}|${feature.value || ''}`;
 
     return getCachedValue(key, browsers, () => {
-        const [data, prefix, unprefixed] = getFeatureData(mdn.css.properties, feature.property);
+        const [data, prefix, unprefixed] = getFeatureData(mdn.css.properties as (Identifier & {__compat?: CompatStatement}), feature.property);
 
         if (feature.value) {
-            return getValueUnsupported(data, unprefixed, feature.value, browsers);
+            return getValueUnsupported(data as (Identifier & {__compat?: CompatStatement}), unprefixed, feature.value, browsers);
         }
 
-        return getUnsupportedBrowsers(data, prefix, browsers, unprefixed);
+        return getUnsupportedBrowsers(data as (Identifier & {__compat?: CompatStatement}), prefix, browsers, unprefixed);
     });
 };
 
@@ -189,19 +194,19 @@ export const getDeclarationUnsupported = (feature: DeclarationQuery, browsers: s
  */
 export const getRuleUnsupported = (feature: RuleQuery, browsers: string[]): UnsupportedBrowsers | null => {
     return getCachedValue(`css-rule:${feature.rule}`, browsers, () => {
-        const [data, prefix, unprefixed] = getFeatureData(mdn.css['at-rules'], feature.rule);
+        const [data, prefix, unprefixed] = getFeatureData(mdn.css['at-rules'] as (Identifier & {__compat?: CompatStatement}), feature.rule);
 
-        return getUnsupportedBrowsers(data, prefix, browsers, unprefixed);
+        return getUnsupportedBrowsers(data as (Identifier & {__compat?: CompatStatement}), prefix, browsers, unprefixed);
     });
 };
 
 const getPseudoSelectorUnsupported = (value: string, browsers: string[]): UnsupportedBrowsers | null => {
     const name = value.replace(/^::?/, ''); // Strip leading `:` or `::`.
 
     return getCachedValue(`css-pseudo-selector:${name}`, browsers, () => {
-        const [data, prefix, unprefixed] = getFeatureData(mdn.css.selectors, name);
+        const [data, prefix, unprefixed] = getFeatureData(mdn.css.selectors as (Identifier & {__compat?: CompatStatement}), name);
 
-        return getUnsupportedBrowsers(data, prefix, browsers, unprefixed);
+        return getUnsupportedBrowsers(data as (Identifier & {__compat?: CompatStatement}), prefix, browsers, unprefixed);
     });
 };
 
diff --git a/packages/utils-compat-data/src/helpers.ts b/packages/utils-compat-data/src/helpers.ts
@@ -1,4 +1,4 @@
-import { Identifier } from '@mdn/browser-compat-data/types';
+import { CompatStatement, Identifier } from '@mdn/browser-compat-data/types';
 import { getVendorPrefix, getUnprefixed } from '@hint/utils-css';
 
 /**
@@ -8,7 +8,7 @@ import { getVendorPrefix, getUnprefixed } from '@hint/utils-css';
  * @param name The name of the feature, including prefixes (e.g. `-webkit-keyframes`)
  * @returns A tuple of the feature and extracted prefix (if any).
  */
-export const getFeatureData = (context: Identifier | undefined, name: string): [Identifier | undefined, string, string] => {
+export const getFeatureData = (context: (Identifier & {__compat?: CompatStatement}) | undefined, name: string): [Identifier & {__compat?: CompatStatement} | undefined, string, string] => {
     if (!context || context[name]) {
         return [context && context[name], '', name];
     }
diff --git a/packages/utils-compat-data/src/html.ts b/packages/utils-compat-data/src/html.ts
@@ -1,5 +1,5 @@
 import { mdn } from './browser-compat-data';
-import { Identifier } from '@mdn/browser-compat-data/types';
+import { CompatStatement, Identifier } from '@mdn/browser-compat-data/types';
 
 import { getUnsupportedBrowsers, UnsupportedBrowsers } from './browsers';
 import { getCachedValue } from './cache';
@@ -24,8 +24,8 @@ export const getAttributeUnsupported = (feature: AttributeQuery, browsers: strin
     const key = `html-attribute:${feature.element || ''}|${feature.attribute}|${feature.value || ''}`;
 
     return getCachedValue(key, browsers, () => {
-        let data: Identifier | undefined;
-        let parentData: Identifier | undefined;
+        let data: (Identifier & {__compat?: CompatStatement}) | undefined;
+        let parentData: (Identifier & {__compat?: CompatStatement}) | undefined;
         let prefix = '';
         let unprefixed = '';
 
@@ -47,7 +47,7 @@ export const getAttributeUnsupported = (feature: AttributeQuery, browsers: strin
 
             // Handle oddly stored input type data (mdn.html.elements.input['input-' + typeValue]).
             if (!data && feature.element === 'input' && feature.attribute === 'type') {
-                [data, prefix, unprefixed] = getFeatureData(mdn.html.elements.input, `input-${feature.value}`);
+                [data, prefix, unprefixed] = getFeatureData(mdn.html.elements.input, `type_${feature.value}`);
             }
         }
 
diff --git a/packages/utils-compat-data/src/matches.ts b/packages/utils-compat-data/src/matches.ts
@@ -2,6 +2,7 @@ import { CompatStatement } from '@mdn/browser-compat-data/types';
 
 export interface IMatchesCompatStatement extends CompatStatement {
     matches?: IMatchesBlock;
+    match?: IMatchesBlock;
 }
 
 export interface IMatchesBlock {
diff --git a/packages/utils-compat-data/tests/browsers.ts b/packages/utils-compat-data/tests/browsers.ts
@@ -1,10 +1,10 @@
 import test from 'ava';
-import { Identifier } from '@mdn/browser-compat-data/types';
+import { CompatStatement, Identifier } from '@mdn/browser-compat-data/types';
 
 import { getUnsupportedBrowsers } from '../src/browsers';
 
 /* eslint-disable */
-const keyframes: Identifier = {
+const keyframes: Identifier & {__compat?: CompatStatement} = {
     __compat: {
         mdn_url: 'https://developer.mozilla.org/docs/Web/CSS/@keyframes',
         support: {
@@ -30,7 +30,7 @@ const keyframes: Identifier = {
     }
 } as any;
 
-const maxContent: Identifier = {
+const maxContent: Identifier & {__compat?: CompatStatement} = {
     __compat: {
         support: {
             firefox: [
@@ -44,7 +44,7 @@ const maxContent: Identifier = {
     }
 } as any;
 
-const width: Identifier = {
+const width: Identifier & {__compat?: CompatStatement} = {
     __compat: {
         mdn_url: 'https://developer.mozilla.org/docs/Web/CSS/width'
     }
@@ -84,7 +84,7 @@ test('Handles supported prefix', (t) => {
 
 test('Handles unsupported prefix', (t) => {
     /* eslint-disable */
-    const appearance: Identifier = {
+    const appearance: Identifier & {__compat?: CompatStatement} = {
         __compat: {
             support: {
                 firefox: {
@@ -103,7 +103,7 @@ test('Handles unsupported prefix', (t) => {
 
 test('Handles multiple supported prefixes', (t) => {
     /* eslint-disable */
-    const boxFlex: Identifier = {
+    const boxFlex: Identifier & {__compat?: CompatStatement} = {
         __compat: {
             support: {
                 firefox: [
@@ -132,7 +132,7 @@ test('Handles multiple supported prefixes', (t) => {
 
 test('Handles removed features', (t) => {
     /* eslint-disable */
-    const boxLines: Identifier = {
+    const boxLines: Identifier & {__compat?: CompatStatement} = {
         __compat: {
             support: {
                 chrome: {
@@ -152,7 +152,7 @@ test('Handles removed features', (t) => {
 
 test('Includes accurate details', (t) => {
     /* eslint-disable */
-    const keyframes: Identifier = {
+    const keyframes: Identifier & {__compat?: CompatStatement} = {
         __compat: {
             support: {
                 opera: [
diff --git a/packages/utils-worker/package.json b/packages/utils-worker/package.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -31,14 +31,16 @@ const extraData = {`
`31`	`31`	`}`
`32`	`32`	`}`
`33`	`33`	`}`
`34`		`- }`
	`34`	`+ },`
`35`	`35`	`},`
`36`	`36`	`types: {`
`37`	`37`	`color: {`
`38`		`- alpha_hexadecimal_notation: {`
`39`		`- __compat: {`
`40`		`- match: {`
`41`		`- regex_token: '^#[0-9a-fA-F]{4}(?:[0-9a-fA-F]{4})?$'`
	`38`	`+ rgb_hexadecimal_notation: {`
	`39`	`+ alpha_hexadecimal_notation: {`
	`40`	`+ __compat: {`
	`41`	`+ match: {`
	`42`	`+ regex_token: '^#[0-9a-fA-F]{4}(?:[0-9a-fA-F]{4})?$'`
	`43`	`+ }`
`42`	`44`	`}`
`43`	`45`	`}`
`44`	`46`	`}`