POC: Add custom units support

src/__tests__/units.js

@@ -1,4 +1,4 @@
-import transformCss from '..'
+import transformCss, { declareCustomUnit } from '..'
 
 // List of units from:
 // https://developer.mozilla.org/en-US/docs/Web/CSS/length
@@ -123,6 +123,22 @@ lengthUnits.forEach(unit => {
       shadowOpacity: 1,
     })
   })
+
+  it('allows custom units with function scaler', () => {
+    // Set rpx to scale factor 0.5
+    declareCustomUnit('rpx', size => 0.5 * size)
+
+    // Test that 2em == 28px
+    expect(transformCss([['font-size', '20rpx']])).toEqual({ fontSize: 10 })
+  })
+
+  it('allows custom units with constant scaler', () => {
+    // Set 1mpx to 14px
+    declareCustomUnit('mpx', 14)
+
+    // Test that 2mpx == 28px
+    expect(transformCss([['font-size', '2mpx']])).toEqual({ fontSize: 28 })
+  })
 })
 
 it('throws for unit that is not supported', () => {

src/customUnits.js

@@ -0,0 +1,36 @@
+const customUnitRe = unit =>
+  new RegExp(`^([+-]?(?:\\d*\\.)?\\d+(?:e[+-]?\\d+)?)${unit}?$`, 'i')
+
+// Contains all the units registered via 'declareCustomUnit'
+const customUnits = []
+
+// Add a custom unit to registry
+export const declareCustomUnit = (unit, scaleValue) => {
+  customUnits.push({
+    suffix: unit,
+    regex: customUnitRe(unit),
+    scaleValue,
+  })
+}
+
+// Check if the value matches against any declared units
+export const matchesCustomUnit = token => {
+  for (let i = 0; i < customUnits.length; i += 1) {
+    const unit = customUnits[i]
+
+    // Check if string matches RegEx
+    const customUnitMatch = token.match(unit.regex)
+    if (customUnitMatch !== null) {
+      // Get number value from match result
+      const value = Number(customUnitMatch[1])
+
+      // Apply scale factor to number
+      if (typeof unit.scaleValue === 'function') {
+        return unit.scaleValue(value)
+      }
+      return value * unit.scaleValue
+    }
+  }
+
+  return null
+}

src/index.js

@@ -4,6 +4,7 @@ import camelizeStyleName from 'camelize'
 import transforms from './transforms/index'
 import devPropertiesWithoutUnitsRegExp from './devPropertiesWithoutUnitsRegExp'
 import TokenStream from './TokenStream'
+import { matchesCustomUnit, declareCustomUnit } from './customUnits'
 
 // Note if this is wrong, you'll need to change tokenTypes.js too
 const numberOrLengthRe = /^([+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?)(?:px)?$/i
@@ -27,6 +28,9 @@ export const transformRawValue = (propName, value) => {
     }
   }
 
+  const customUnitMatch = matchesCustomUnit(value)
+  if (customUnitMatch !== null) return customUnitMatch
+
   const numberMatch = value.match(numberOrLengthRe)
   if (numberMatch !== null) return Number(numberMatch[1])
 
@@ -88,3 +92,5 @@ export default (rules, shorthandBlacklist = []) =>
       getStylesForProperty(propertyName, value, allowShorthand)
     )
   }, {})
+
+export { declareCustomUnit }