fix: properly check CSS length units

* Use regex for all CSS values

Regression from #159 causes all rule values containing `vi` to be validated against `viewport-unit-variants`.

Fixes #164

Author: clshortfuse

data/features/ch-unit.js

@@ -1,12 +1,8 @@
-/**
- * Unit representing the width of the character "0" in the current font, of particular use in combination with monospace fonts.
- *
- * See: https://caniuse.com/ch-unit
- */
+import { checkCSSLengthUnits } from '../../utils/util.js';
 
 /**
+ * Unit representing the width of the character "0" in the current font, of particular use in combination with monospace fonts.
+ * @see https://caniuse.com/ch-unit
  * @type {import('../features').Feature}
  */
-export default {
-  '': 'ch',
-};
+export default checkCSSLengthUnits('ch');

data/features/css-container-query-units.js

@@ -1,10 +1,10 @@
-export default {
-  '': [
-    'cqw',
-    'cqh',
-    'cqi',
-    'cqb',
-    'cqmin',
-    'cqmax',
-  ],
-};
+import { checkCSSLengthUnits } from '../../utils/util.js';
+
+export default checkCSSLengthUnits(
+  'cqw',
+  'cqh',
+  'cqi',
+  'cqb',
+  'cqmin',
+  'cqmax',
+);

data/features/rem.js

@@ -1,3 +1,3 @@
-export default {
-  '': 'rem',
-};
+import { checkCSSLengthUnits } from '../../utils/util.js';
+
+export default checkCSSLengthUnits('rem');

data/features/viewport-unit-variants.js

@@ -1,40 +1,43 @@
+import { checkCSSLengthUnits } from '../../utils/util.js';
+
 /**
  * Small, Large, and Dynamic viewport units
- * Viewport units similar to `vw` and `vh` that are based on shown or hidden browser UI states to address shortcomings of the original units. Currently defined as the `sv*` units (`svb`, `svh`, `svi`, `svmax`, `svmin`, `svw`), `lv*` units (`lvb`, `lvh`, `lvi`, `lvmax`, `lvmin`, `lvw`), `dv*` units (`dvb`, `dvh`, `dvi`, `dvmax`, `dvmin`, `dvw`) and the logical `vi`/`vb` units.
+ * Viewport units similar to `vw` and `vh` that are based on shown or hidden
+ * browser UI states to address shortcomings of the original units. Currently
+ * defined as the
+ * `sv*` units (`svb`, `svh`, `svi`, `svmax`, `svmin`, `svw`),
+ * `lv*` units (`lvb`, `lvh`, `lvi`, `lvmax`, `lvmin`, `lvw`),
+ * `dv*` units (`dvb`, `dvh`, `dvi`, `dvmax`, `dvmin`, `dvw`)
+ * and the logical `vi`/`vb` units.
  * @see https://caniuse.com/viewport-unit-variants
- */
-
-/**
  * @type {import('../features').Feature}
  */
-export default {
-  '': [
-    /* sv* units */
-    'svb',
-    'svh',
-    'svi',
-    'svmax',
-    'svmin',
-    'svw',
+export default checkCSSLengthUnits(
+  /* sv* units */
+  'svb',
+  'svh',
+  'svi',
+  'svmax',
+  'svmin',
+  'svw',
 
-    /* lv* units */
-    'lvb',
-    'lvh',
-    'lvi',
-    'lvmax',
-    'lvmin',
-    'lvw',
+  /* lv* units */
+  'lvb',
+  'lvh',
+  'lvi',
+  'lvmax',
+  'lvmin',
+  'lvw',
 
-    /* dv* units */
-    'dvb',
-    'dvh',
-    'dvi',
-    'dvmax',
-    'dvmin',
-    'dvw',
+  /* dv* units */
+  'dvb',
+  'dvh',
+  'dvi',
+  'dvmax',
+  'dvmin',
+  'dvw',
 
-    /* vi/vb units */
-    'vi',
-    'vb',
-  ],
-};
+  /* vi/vb units */
+  'vi',
+  'vb',
+);

test/cases/generic/issue164.css

@@ -0,0 +1,8 @@
+/*
+expect:
+viewport-unit-variants: 0
+*/
+
+.test {
+  visibility: visible;
+}

utils/util.js

@@ -64,3 +64,17 @@ export function checkAtRule(name, params) {
     // @ts-ignore rule.params can be `undefined`
     && (!params || performFeatureCheck(params, rule.params));
 }
+
+/**
+ * @see https://drafts.csswg.org/css-values/#lengths
+ * @see https://drafts.csswg.org/css-values/#number-value
+ * @param {string[]} units
+ * @return {(rule:import('postcss').ChildNode) => boolean}
+ */
+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 === 'atrule') ? performFeatureCheck(regexp, rule.params)
+        : false));
+}