Chore: Use packed MDN data from @hint/utils

packages/extension-browser/package.json

@@ -6,7 +6,7 @@
     ],
     "timeout": "1m"
   },
-  "bundleSize": 650000,
+  "bundleSize": 620000,
   "description": "webhint browser extension",
   "devDependencies": {
     "@hint/utils": "^1.0.0",

packages/extension-browser/webpack.config.js

@@ -80,7 +80,6 @@ module.exports = (env) => {
         resolve: {
             alias: {
                 '@hint/utils/dist/src/network/request-async$': path.resolve(__dirname, 'dist/src/shims/request-async.js'),
-                'mdn-browser-compat-data$': path.resolve(__dirname, 'dist/mdn-browser-compat-data.packed.json'),
                 url$: path.resolve(__dirname, 'dist/src/shims/url.js')
             }
         }

packages/hint-compat-api/package.json

@@ -7,8 +7,7 @@
     "timeout": "1m"
   },
   "dependencies": {
-    "@hint/utils": "^1.0.0",
-    "mdn-browser-compat-data": "^0.0.72"
+    "@hint/utils": "^1.0.0"
   },
   "description": "hint to validate if the HTML, CSS, and JavaScript APIs of the project are deprecated or not broadly supported",
   "devDependencies": {

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

@@ -3,7 +3,7 @@
  */
 
 // Waiting for this PR https://github.com/mdn/browser-compat-data/pull/3004
-const mdnAPI: CompatData = require('mdn-browser-compat-data');
+import { mdn } from '@hint/utils/dist/src/compat/browser-compat-data';
 
 import get = require('lodash/get');
 
@@ -12,6 +12,8 @@ import { browserVersions } from './normalize-version';
 import { BrowserSupportCollection, MDNTreeFilteredByBrowsers, BrowserVersions, FeatureInfo } from '../types';
 import { CompatData, CompatStatement, SupportStatement, SimpleSupportStatement, Identifier, VersionValue } from '../types-mdn.temp'; // Temporal
 
+const mdnAPI = mdn as unknown as CompatData;
+
 export class CompatAPI {
     public compatDataApi: MDNTreeFilteredByBrowsers;
 

packages/hint-compat-api/src/helpers/convert-browser-names.ts

@@ -2,10 +2,13 @@
  * @fileoverview Helper that convert browser names from Browserlist to MDN Api.
  */
 
-const { browsers: mdnBrowsers } = require('mdn-browser-compat-data');
+// TODO: replace with direct usage of `getUnsupported` from `@hint/utils`.
+import { mdn } from '@hint/utils/dist/src/compat/browser-compat-data';
 
 import { BrowserSupportCollection } from '../types';
 
+const mdnBrowsers = mdn.browsers;
+
 type BrowsersDictionary = {
     [key: string]: string;
 };

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

@@ -168,6 +168,7 @@ const featureVersionAddedFalse: HintTest[] = [
 
 testHint(hintPath, featureVersionAddedFalse, { browserslist: ['ie 11'], ignoredConnectors, parsers: ['css'] });
 
+// TODO: Switch feature/version - Tests versions older than those included in the packaged data set.
 const featureVersionAddedLaterThanTargetedBrowsers: HintTest[] = [
     {
         name: 'Features that were added after the targeted browser should fail.',
@@ -176,17 +177,20 @@ const featureVersionAddedLaterThanTargetedBrowsers: HintTest[] = [
             { message: 'keyframes is not supported by chrome 40.', position: { match: '@keyframes name2' } },
             { message: 'keyframes is not supported by chrome 40.', position: { match: '@keyframes name3' } }
         ],
-        serverConfig: generateCSSConfig('keyframes')
+        serverConfig: generateCSSConfig('keyframes'),
+        skip: true
     }
 ];
 
 testHint(hintPath, featureVersionAddedLaterThanTargetedBrowsers, { browserslist: ['chrome 40'], ignoredConnectors, parsers: ['css'] });
 
+// TODO: Switch feature/version - Tests versions older than those included in the packaged data set.
 const prefixedFeatureVersionAddedLaterThanTargetedBrowsers: HintTest[] = [
     {
         name: 'Prefixed features that were added after the targeted browser should fail.',
         reports: [{ message: 'animation-duration prefixed with -webkit- is not supported by opera 12.', position: { match: '-webkit-animation-duration' } }],
-        serverConfig: generateCSSConfig('animation-duration-prefix')
+        serverConfig: generateCSSConfig('animation-duration-prefix'),
+        skip: true
     }
 ];
 
@@ -210,21 +214,25 @@ const prefixedFeaturesThatBecameStandardAndMarkedAsDeprecatedAfterTarget: HintTe
 
 testHint(hintPath, prefixedFeaturesThatBecameStandardAndMarkedAsDeprecatedAfterTarget, { browserslist: ['firefox 4'], ignoredConnectors, parsers: ['css'] });
 
+// TODO: Switch feature/version - Tests versions older than those included in the packaged data set.
 const childFeatureAddedLaterThanTargetedBrowsers: HintTest[] = [
     {
         name: 'Child features that were added later than targeted browsers should fail.',
         reports: [{ message: 'flex is not supported by chrome 26-28.', position: { match: 'display: flex;' } }],
-        serverConfig: generateCSSConfig('display-flex')
+        serverConfig: generateCSSConfig('display-flex'),
+        skip: true
     }
 ];
 
 testHint(hintPath, childFeatureAddedLaterThanTargetedBrowsers, { browserslist: ['chrome 26 - 29'], ignoredConnectors, parsers: ['css'] });
 
+// TODO: Switch feature/version - Tests versions older than those included in the packaged data set.
 const childPrefixedFeatureAddedLaterThanTargetedBrowsers: HintTest[] = [
     {
         name: 'Child prefixed features that were added later than targeted browsers should fail.',
         reports: [{ message: 'flex prefixed with -webkit- is not supported by chrome 17-19.', position: { match: 'display: -webkit-flex;' } }],
-        serverConfig: generateCSSConfig('display-flex-prefix')
+        serverConfig: generateCSSConfig('display-flex-prefix'),
+        skip: true
     }
 ];
 
@@ -322,10 +330,12 @@ testHint(hintPath, supportIgnoredIfNotSupported, {
     parsers: ['css']
 });
 
+// TODO: Switch feature/version - Tests versions older than those included in the packaged data set.
 const supportSupportedButNotFeature: HintTest[] = [
     {
         name: `If browser supports @support, but not the feature, it should ignore the @support block`,
-        serverConfig: generateCSSConfig('support-flex')
+        serverConfig: generateCSSConfig('support-flex'),
+        skip: true
     }
 ];
 

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

@@ -84,21 +84,25 @@ const removedInEarlierVersionsAndAddedLater: HintTest[] = [
 
 testHint(hintPath, removedInEarlierVersionsAndAddedLater, { browserslist: ['opera 32'], ignoredConnectors, parsers: ['css']});
 
+// TODO: Switch feature/version - Tests versions older than those included in the packaged data set.
 const removedForPrefixEqualToTargetedBrowsers: HintTest[] = [
     {
         name: 'Prefixed features that were removed in a version equal to the targeted browser should fail.',
         reports: [{ message: 'keyframes prefixed with -o- is not supported by opera 15.', position: { match: '@-o-keyframes' }}],
-        serverConfig: generateCSSConfig('keyframes-prefix-obsolete')
+        serverConfig: generateCSSConfig('keyframes-prefix-obsolete'),
+        skip: true
     }
 ];
 
 testHint(hintPath, removedForPrefixEqualToTargetedBrowsers, { browserslist: ['opera 15'], ignoredConnectors, parsers: ['css']});
 
+// TODO: Switch feature/version - Tests versions older than those included in the packaged data set.
 const removedForPrefixEarlierThanTargetedBrowsers: HintTest[] = [
     {
         name: 'Prefixed features that were removed in a version earlier than the targeted browser should fail.',
         reports: [{ message: 'keyframes prefixed with -o- is not supported by opera 16, opera 18-19.', position: { match: '@-o-keyframes' }}],
-        serverConfig: generateCSSConfig('keyframes-prefix-obsolete')
+        serverConfig: generateCSSConfig('keyframes-prefix-obsolete'),
+        skip: true
     }
 ];
 
@@ -153,11 +157,13 @@ const prefixedFeatureThatBecameStandardAfterTarget: HintTest[] = [
 
 testHint(hintPath, prefixedFeatureThatBecameStandardAfterTarget, { browserslist: ['firefox 3.6'], ignoredConnectors, parsers: ['css']});
 
+// TODO: Switch feature/version - Tests versions older than those included in the packaged data set.
 const prefixedFeaturesThatBecameStandardAndPrefixWasDeprecated: HintTest[] = [
     {
         name: 'Prefixed features that became deprecated before the targeted browser should fail.',
         reports: [{ message: 'background-size prefixed with -moz- is not supported by firefox 4.', position: { match: '-moz-background-size' }}],
-        serverConfig: generateCSSConfig('background-size-prefix')
+        serverConfig: generateCSSConfig('background-size-prefix'),
+        skip: true
     }
 ];
 
@@ -176,7 +182,7 @@ testHint(hintPath, featureVersionAddedFalse, { browserslist: ['ie 11'], ignoredC
 const featureVersionAddedMixedFalseAndNullForDifferentBrowsers: HintTest[] = [
     {
         name: 'Features with unknown support (version added is null) and no support (version added is false) for different browsers should fail for unsupported browsers.',
-        reports: [{ message: 'box-lines is not supported by firefox, firefox_android.', position: { match: 'box-lines' }}],
+        reports: [{ message: 'box-lines is not supported by any of your target browsers.', position: { match: 'box-lines' }}],
         serverConfig: generateCSSConfig('box-lines')
     }
 ];
@@ -186,7 +192,7 @@ testHint(hintPath, featureVersionAddedMixedFalseAndNullForDifferentBrowsers, { b
 const mixedFeaturedCompatibility: HintTest[] = [
     {
         name: 'Features with mixed compatibility (version added null vs false) for different browsers should only throw errors for browsers in which the feature has never been added (false).',
-        reports: [{ message: 'box-lines is not supported by firefox.', position: { match: 'box-lines' }}],
+        reports: [{ message: 'box-lines is not supported by any of your target browsers.', position: { match: 'box-lines' }}],
         serverConfig: generateCSSConfig('box-lines')
     }
 ];

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

@@ -86,11 +86,13 @@ const elementAddedVersionOfTargetedBrowser: HintTest[] = [
 
 testHint(hintPath, elementAddedVersionOfTargetedBrowser, { browserslist: ['ie 9'], ignoredConnectors });
 
+// TODO: Switch feature/version - Tests versions older than those included in the packaged data set.
 const elementAddedInVersionAfterTargetedBrowserVersion: HintTest[] = [
     {
         name: 'Elements added in version after targeted browser should fail.',
         reports: [{ message: 'video element is not supported by ie 8.', position: { match: 'video' } }],
-        serverConfig: generateHTMLConfig('video')
+        serverConfig: generateHTMLConfig('video'),
+        skip: true
     }
 ];
 
@@ -145,11 +147,13 @@ const globalAttrAddedVersionOfTargetedBrowser: HintTest[] = [
 
 testHint(hintPath, globalAttrAddedVersionOfTargetedBrowser, { browserslist: ['firefox 34'], ignoredConnectors });
 
+// TODO: Switch feature/version - Tests versions older than those included in the packaged data set.
 const globalAttrAddedInVersionAfterTargetedBrowserVersion: HintTest[] = [
     {
         name: 'Global attributes added in version after targeted browser should fail.',
         reports: [{ message: 'global attribute class is not supported by firefox 31.', position: { match: 'div' } }],
-        serverConfig: generateHTMLConfig('div')
+        serverConfig: generateHTMLConfig('div'),
+        skip: true
     }
 ];
 
@@ -178,11 +182,13 @@ const inputTypeVersionAddedFalse: HintTest[] = [
 
 testHint(hintPath, inputTypeVersionAddedFalse, { browserslist: ['ie 9'], ignoredConnectors });
 
+// TODO: Switch feature/version - Tests versions older than those included in the packaged data set.
 const inputTypeVersionAddedAfterTargetedBrowsers: HintTest[] = [
     {
         name: 'Input types added in a version after the targeted browsers should fail.',
         reports: [{ message: 'input type color is not supported by chrome 19, firefox 28.', position: { match: 'input' } }],
-        serverConfig: generateHTMLConfig('input-color')
+        serverConfig: generateHTMLConfig('input-color'),
+        skip: true
     }
 ];
 
@@ -195,13 +201,13 @@ testHint(hintPath, inputTypeVersionAddedAfterTargetedBrowsers, { browserslist: [
 const mixedFeaturedCompatibility: HintTest[] = [
     {
         name: 'Features with mixed compatibility (not supported for specific version and never supported) and not deprecated should throw errors for browsers in which the feature is not supported.',
-        reports: [{ message: 'integrity attribute of the link element is not supported by edge, ie, safari, safari_ios, samsunginternet_android 4, webview_android 4.', position: { match: 'link' } }],
+        reports: [{ message: 'integrity attribute of the link element is not supported by edge, ie, safari, safari_ios, webview_android 4.', position: { match: 'link' } }],
         serverConfig: generateHTMLConfig('link-integrity')
     }
 ];
 
 testHint(hintPath, mixedFeaturedCompatibility, {
-    browserslist: ['firefox 28', 'edge 15', 'ie 10', 'safari 11', 'ios_saf 11', 'samsung 4', 'android 4'],
+    browserslist: ['firefox 28', 'edge 15', 'ie 10', 'safari 11', 'ios_saf 11', 'samsung 5', 'android 4'],
     hintOptions: { enable: ['integrity'] },
     ignoredConnectors
 });

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

@@ -52,7 +52,7 @@ testHint(hintPath, removedForFlags, { browserslist: ['firefox 34'], ignoredConne
 const onlySupportedByFlags: HintTest[] = [
     {
         name: 'Elements only supported by flags should fail.',
-        reports: [{ message: 'shadow element is not supported by firefox 60.', position: { match: 'shadow' } }],
+        reports: [{ message: 'shadow element is not supported by firefox.', position: { match: 'shadow' } }],
         serverConfig: generateHTMLConfig('shadow')
     }
 ];
@@ -108,11 +108,13 @@ const elementVersionAddedFalse: HintTest[] = [
 
 testHint(hintPath, elementVersionAddedFalse, { browserslist: ['last 2 Chrome versions'], ignoredConnectors });
 
+// TODO: Remove - This tests a feature never implemented anywhere (which we exclude from our data set)...
 const featureVersionAddedFalseForAllTargetedBrowsers: HintTest[] = [
     {
         name: 'Features with no support (version added is false) for multiple targeted browsers should fail.',
         reports: [{ message: 'element element is not supported by any of your target browsers.', position: { match: 'element' } }],
-        serverConfig: generateHTMLConfig('element')
+        serverConfig: generateHTMLConfig('element'),
+        skip: true
     }
 ];
 
@@ -128,11 +130,13 @@ const elementVersionAddedFalseForMultipleBrowsers: HintTest[] = [
 
 testHint(hintPath, elementVersionAddedFalseForMultipleBrowsers, { browserslist: ['chrome 43', 'last 2 Edge versions', 'last 2 ie versions', 'opera 12'], ignoredConnectors });
 
+// TODO: Remove - This tests a feature never implemented anywhere (which we exclude from our data set)...
 const featureVersionAddedMixedFalseAndNullForDifferentBrowsers: HintTest[] = [
     {
         name: 'Features with unknown support (version added is null) and no support (version added is false) for different browsers should fail for unsupported browsers.',
         reports: [{ message: 'element element is not supported by edge, firefox_android.', position: { match: 'element' } }],
-        serverConfig: generateHTMLConfig('element')
+        serverConfig: generateHTMLConfig('element'),
+        skip: true
     }
 ];
 

packages/utils-tests-helpers/src/hint-runner.ts

@@ -262,7 +262,11 @@ export const testHint = (hintId: string, hintTests: HintTest[], configs: { [key:
             hintTests.forEach((hintTest) => {
                 let runner;
 
-                runner = configs['serial'] ? test.serial : test; // eslint-disable-line dot-notation
+                if (hintTest.skip) {
+                    runner = test.skip;
+                } else {
+                    runner = configs['serial'] ? test.serial : test; // eslint-disable-line dot-notation
+                }
 
                 /*
                  * If the tests for a hint ignores the connector, then we

packages/utils-tests-helpers/src/hint-test-type.ts

@@ -26,6 +26,8 @@ export type HintTest = {
     serverConfig?: any;
     /** The url to `executeOn` if different than `localhost`. */
     serverUrl?: string;
+    /** Whether this test should be skipped. */
+    skip?: boolean;
 };
 
 export type HintLocalTest = {

yarn.lock

@@ -7226,13 +7226,6 @@ mdn-browser-compat-data@0.0.66:
   dependencies:
     extend "3.0.2"
 
-mdn-browser-compat-data@^0.0.72:
-  version "0.0.72"
-  resolved "https://registry.yarnpkg.com/mdn-browser-compat-data/-/mdn-browser-compat-data-0.0.72.tgz#b1d2026bfbf61c82e71c4157059b9d161c8791a9"
-  integrity sha512-vt3BxJRpV638ncYLigX91k0qP1VcpKxgExqPtX+QKFvV4/ZruZ31Sl35LsDDq5q+D7Lt7mfGWnCEuZ0d6bJW1g==
-  dependencies:
-    extend "3.0.2"
-
 mdn-browser-compat-data@^0.0.76:
   version "0.0.76"
   resolved "https://registry.yarnpkg.com/mdn-browser-compat-data/-/mdn-browser-compat-data-0.0.76.tgz#e19efd3735be6de070b6c08a869ecec6848a07b5"