Fix check viewport-unit-variants

lib/Detector.js

@@ -1,5 +1,5 @@
 import FEATURES from '../data/features.js';
-import { performFeatureCheck } from '../utils/util.js';
+import { performFeatureCheck, stripUrls } from '../utils/util.js';
 
 /**
  * @typedef DetectorCallbackArgument
@@ -18,16 +18,6 @@ const PLUGIN_OPTION_COMMENT = 'doiuse-';
 const DISABLE_FEATURE_COMMENT = `${PLUGIN_OPTION_COMMENT}disable`;
 const ENABLE_FEATURE_COMMENT = `${PLUGIN_OPTION_COMMENT}enable`;
 
-/**
- * Strip the contents of url literals so they aren't matched
- * by our naive substring matching.
- * @param {string} input
- * @return {string}
- */
-function stripUrls(input) {
-  return input.replaceAll(/url\([^)]*\)/g, 'url()');
-}
-
 /**
  * Detect the use of any of a given list of CSS features.
  * ```

test/cases/features/viewport-unit-variants.css

@@ -44,4 +44,7 @@ viewport-unit-variants: 20
   /* vi/vb units */
   width: 100vi;
   width: 100vb;
+
+  /* should not trigger */ 
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjU4NiA4TDQuMjkzIDUuNzA3YS45OTkuOTk5IDAgMTExLjQxNC0xLjQxNEw4IDYuNTg1bDIuMjkzLTIuMjkyYTEgMSAwIDAxMS40MTQgMS40MTNMOS40MTQgOGwyLjI5MyAyLjI5NGExIDEgMCAwMS0xLjQxNCAxLjQxNEw4IDkuNDEzbC0yLjI5MyAyLjI5M2ExIDEgMCAwMS0xLjQxNC0xLjQxNUw2LjU4NiA4eiIgZmlsbD0iIzI3MkIzNyIgZmlsbC1vcGFjaXR5PSIuMiIvPjwvc3ZnPg==")
 }

utils/util.js

@@ -2,6 +2,16 @@
 
 /** @typedef {RegExp|string|((value:string) => boolean)} FeatureCheck */
 
+/**
+ * Strip the contents of url literals so they aren't matched
+ * by our naive substring matching.
+ * @param {string} input
+ * @return {string}
+ */
+export function stripUrls(input) {
+  return input.replaceAll(/url\([^)]*\)/g, 'url()');
+}
+
 /**
  * @param {string} browserKey
  * @param {string[]} [versions]
@@ -39,7 +49,7 @@
       }
       // Fallthrough
     default:
       console.error(check);
       throw new TypeError(`Unexpected feature check: ${check}`);
   }
 }
@@ -73,7 +83,7 @@
 export function checkCSSLengthUnits(...units) {
   const regexp = new RegExp(`(\\+-)?[\\d.]*\\.?\\d+(e(\\+-)?\\d+)?(${units.join('|')})`, 'i');
   return (rule) => (
-    (rule.type === 'decl') ? performFeatureCheck(regexp, rule.value)
+    (rule.type === 'decl') ? performFeatureCheck(regexp, stripUrls(rule.value))
       : ((rule.type === 'atrule') ? performFeatureCheck(regexp, rule.params)
         : false));
 }