From e76e86413465b178544cae9c2f74cafbc7ef583a Mon Sep 17 00:00:00 2001
From: Tony Ross <antross@gmail.com>
Date: Mon, 22 Apr 2019 17:10:03 -0500
Subject: [PATCH] Fix: Migrate to new `isSupported` utility based on MDN data

---
 packages/hint-disown-opener/src/hint.ts     | 11 +++--------
 packages/hint-manifest-is-valid/src/hint.ts |  8 ++++----
 packages/hint-meta-theme-color/src/hint.ts  |  9 ++++-----
 3 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/packages/hint-disown-opener/src/hint.ts b/packages/hint-disown-opener/src/hint.ts
index a6e24df6a20..bc4a5b472dd 100644
--- a/packages/hint-disown-opener/src/hint.ts
+++ b/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');
             }
 
diff --git a/packages/hint-manifest-is-valid/src/hint.ts b/packages/hint-manifest-is-valid/src/hint.ts
index 4c4debdaa08..17a6630eab5 100644
--- a/packages/hint-manifest-is-valid/src/hint.ts
+++ b/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';
diff --git a/packages/hint-meta-theme-color/src/hint.ts b/packages/hint-meta-theme-color/src/hint.ts
index a59570c0b5d..685b7bf9b5c 100644
--- a/packages/hint-meta-theme-color/src/hint.ts
+++ b/packages/hint-meta-theme-color/src/hint.ts
@@ -17,11 +17,10 @@ import {
     IHint,
     TraverseEnd
 } from 'hint';
-import { caniuse, HTMLElement, misc } from '@hint/utils';
+import { HTMLElement, isSupported, misc } from '@hint/utils';
 
 import meta from './meta';
 
-const { isSupported } = caniuse;
 const { normalizeString } = misc;
 /*
  * ------------------------------------------------------------------------------
@@ -35,8 +34,6 @@ export default class MetaThemeColorHint implements IHint {
 
     public constructor(context: HintContext) {
 
-        const targetedBrowsers: string = context.targetedBrowsers.join();
-
         let bodyElementWasReached: boolean = false;
         let firstThemeColorMetaElement: HTMLElement;
 
@@ -68,10 +65,12 @@ export default class MetaThemeColorHint 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';