Drop caniuse

packages/extension-browser/package.json

@@ -6,7 +6,7 @@
     ],
     "timeout": "1m"
   },
-  "bundleSize": 660000,
+  "bundleSize": 640000,
   "description": "webhint browser extension",
   "devDependencies": {
     "@hint/utils": "^1.0.0",
@@ -67,7 +67,6 @@
     "is-ci": "^2.0.0",
     "jsdom": "^15.0.0",
     "lodash": "^4.17.11",
-    "mdn-browser-compat-data": "^0.0.72",
     "npm-run-all": "^4.1.5",
     "nyc": "^14.0.0",
     "proxyquire": "2.0.0",
@@ -127,7 +126,6 @@
     "prebuild:css": "tcm src",
     "prebuild:hints": "node ./scripts/import-hints.js",
     "prebuild:i18n": "node ./scripts/create-i18n.js",
-    "prebuild:mdn": "node ./scripts/pack-mdn-data.js",
     "stats": "webpack --json > stats.json",
     "stats-release": "webpack --env.release --json > release-stats.json",
     "test": "npm run lint && npm run build && npm run test-only && npm run build-release",

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/hint-disown-opener/src/hint.ts

@@ -13,7 +13,7 @@
 import { URL } from 'url';
 
 import { debug as d } from '@hint/utils/dist/src/debug';
-import { isSupported } from '@hint/utils/dist/src/caniuse';
+import { isSupported } from '@hint/utils/dist/src/compat';
 import { isRegularProtocol } from '@hint/utils/dist/src/network/is-regular-protocol';
 import { HTMLElement } from '@hint/utils/dist/src/dom/html';
 import { cutString } from '@hint/utils/dist/src/misc/cut-string';
@@ -120,12 +120,6 @@ export default class DisownOpenerHint implements IHint {
                 return;
             }
 
-            /*
-             * TODO: In the future, change this to not use caniuse data.
-             * https://github.com/webhintio/hint/issues/30
-             */
-
-            const targetedBrowsers: string = context.targetedBrowsers.join();
             const relValuesToCheckFor: string[] = ['noopener'];
 
             /*
@@ -134,7 +128,8 @@ export default class DisownOpenerHint implements IHint {
              * also check for 'noreferrer'.
              */
 
-            if (!targetedBrowsers || !isSupported('rel-noopener', targetedBrowsers)) {
+            // TODO: Fix `isSupported` so `element` can be `a`.
+            if (!context.targetedBrowsers.length || !isSupported({ attribute: 'rel', element: 'link', value: 'noopener' }, context.targetedBrowsers)) {
                 relValuesToCheckFor.push('noreferrer');
             }
 

packages/hint-manifest-is-valid/src/hint.ts

@@ -15,7 +15,7 @@ import {
     IHint,
     IJSONLocationFunction
 } from 'hint/dist/src/lib/types';
-import { isSupported } from '@hint/utils/dist/src/caniuse';
+import { isSupported } from '@hint/utils/dist/src/compat';
 import { normalizeString } from '@hint/utils/dist/src/misc/normalize-string';
 import {
     Manifest,
@@ -40,8 +40,6 @@ export default class ManifestIsValidHint implements IHint {
 
     public constructor(context: HintContext<ManifestEvents>) {
 
-        const targetedBrowsers: string = context.targetedBrowsers.join();
-
         const isNotSupportedColorValue = (color: ColorDescriptor, normalizedColorValue: string): boolean => {
             const hexWithAlphaRegex = /^#([0-9a-fA-F]{4}){1,2}$/;
 
@@ -62,10 +60,12 @@ export default class ManifestIsValidHint implements IHint {
              *   * https://cs.chromium.org/chromium/src/third_party/WebKit/Source/platform/graphics/Color.cpp?rcl=6263bcf0ec9f112b5f0d84fc059c759302bd8c67
              */
 
+            // TODO: Use `isSupported` for all color syntax checks.
+
             // `RGBA` support depends on the browser.
             return (color.model === 'rgb' &&
                 hexWithAlphaRegex.test(normalizedColorValue) &&
-                !isSupported('css-rrggbbaa', targetedBrowsers)) ||
+                !isSupported({ property: 'color', value: '#00000000' }, context.targetedBrowsers)) ||
 
                 // `HWB` is not supported anywhere (?).
                 color.model === 'hwb';