support more css units

Author: egoist

lib/parseComponent.js

@@ -4,16 +4,10 @@ const traverse = require('@babel/traverse')
 const generator = require('@babel/generator')
 const t = require('@babel/types')
 const posthtml = require('posthtml')
+const { UNITS_RE } = require('./units')
 
 const LANGS = ['css', 'stylus', 'less', 'sass', 'scss']
 
-const CSS_UNITS = [
-  ...['cm', 'mm', 'in', 'px', 'pt', 'pc'],
-  ...['em', 'eh', 'ex', 'rem', 'vw', 'vh', 'vmin', 'vmax', '%']
-]
-
-const UNIT_RE = new RegExp(`(${CSS_UNITS.join('|')});?(\\s|\\n|$)`)
-
 module.exports = (content, opts) => {
   const sfc = parseComponent(content, opts)
 
@@ -72,8 +66,8 @@ module.exports = (content, opts) => {
                 let unit
                 const nextQuasis = quasi.quasis[i + 1]
                 if (nextQuasis) {
-                  // Test the next 5 chars
-                  const match = UNIT_RE.exec(nextQuasis.value.raw.slice(0, 5))
+                  // Test the next 6 chars
+                  const match = UNITS_RE.exec(nextQuasis.value.raw.slice(0, 6))
                   unit = match && match[1]
                   if (unit) {
                     nextQuasis.value.raw = nextQuasis.value.raw.slice(

lib/units.js

@@ -0,0 +1,62 @@
+// https://www.w3.org/TR/css-values-4/
+const UNITS = [
+  // font relative lengths
+  'em',
+  'ex',
+  'cap',
+  'ch',
+  'ic',
+  'rem',
+  'lh',
+  'rlh',
+
+  // viewport percentage lengths
+  'vw',
+  'vh',
+  'vi',
+  'vb',
+  'vmin',
+  'vmax',
+
+  // 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 UNITS_RE = new RegExp(`(${UNITS.join('|')});?(\\s|\\n|$)`)
+
+module.exports = {
+  UNITS,
+  UNITS_RE
+}