fix: support all valid CSS units

callstack · Sep 24, 2018 · 63cdc63 · 63cdc63
1 parent 8c12f4e
commit 63cdc63
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 14 deletions.
diff --git a/src/babel/extract.js b/src/babel/extract.js
@@ -260,15 +260,17 @@ module.exports = function extract(
               // If it has a unit after it, we need to move the unit into the interpolation
               // e.g. `var(--size)px` should actually be `var(--size)`
               // So we check if the current text starts with a unit, and add the unit to the previous interpolation
+              // Another approach would be `calc(var(--size) * 1px), but some browsers don't support all units
+              // https://bugzilla.mozilla.org/show_bug.cgi?id=956573
               const matches = el.value.cooked.match(unitRegex);
 
               if (matches) {
                 const last = interpolations[interpolations.length - 1];
-                const [, unit, sep] = matches;
+                const [, unit] = matches;
 
                 if (last && cssText.endsWith(`var(--${last.id})`)) {
                   last.unit = unit;
-                  cssText += el.value.cooked.replace(unitRegex, sep);
+                  cssText += el.value.cooked.replace(unitRegex, '$2');
                   appended = true;
                 }
               }

diff --git a/src/babel/units.js b/src/babel/units.js
@@ -1,28 +1,59 @@
 /* @flow */
 
+// https://www.w3.org/TR/css-values-4/
 const units = [
-  '%',
-
-  // absolute units
-  'cm',
-  'mm',
-  'in',
-  'px',
-  'pt',
-  'pc',
-
-  // relative units
+  // font relative lengths
   'em',
   'ex',
+  'cap',
   'ch',
+  'ic',
   'rem',
+  'lh',
+  'rlh',
+
+  // viewport percentage lengths
   'vw',
   'vh',
+  'vi',
+  'vb',
   'vmin',
   'vmax',
 
-  // css grid
+  // absolute lengths
+  'cm',
+  'mm',
+  'Q',
+  'in',
+  'pc',
+  'pt',
+  'px',
+
+  // angle units
+  'deg',
+  'grad',
+  'rad',
+  'turn',
+
+  // duration units
+  's',
+  'ms',
+
+  // frequency units
+  'Hz',
+  'kHz',
+
+  // resolution units
+  'dpi',
+  'dpcm',
+  'dppx',
+  'x',
+
+  // https://www.w3.org/TR/css-grid-1/#fr-unit
   'fr',
+
+  // percentages
+  '%',
 ];
 
 const unitless = {