Allow unsupported length units to be used

src/__tests__/units.js

@@ -0,0 +1,132 @@
+import transformCss from '..'
+
+// List of units from:
+// https://developer.mozilla.org/en-US/docs/Web/CSS/length
+const lengthUnits = [
+  'ch',
+  'em',
+  'ex',
+  'rem',
+  'vh',
+  'vw',
+  'vmin',
+  'vmax',
+  'cm',
+  'mm',
+  'in',
+  'pc',
+  'pt',
+]
+
+lengthUnits.forEach(unit => {
+  const value = `2${unit}`
+
+  it('allows CSS length units in transformed values', () => {
+    expect(transformCss([['margin', value]])).toEqual({
+      marginTop: value,
+      marginRight: value,
+      marginBottom: value,
+      marginLeft: value,
+    })
+    expect(transformCss([['padding', value]])).toEqual({
+      paddingTop: value,
+      paddingRight: value,
+      paddingBottom: value,
+      paddingLeft: value,
+    })
+  })
+
+  it('allows CSS length units with 0 and unit', () => {
+    expect(transformCss([['padding', `0${unit}`]])).toEqual({
+      paddingTop: `0${unit}`,
+      paddingRight: `0${unit}`,
+      paddingBottom: `0${unit}`,
+      paddingLeft: `0${unit}`,
+    })
+  })
+
+  it('allows mixed units in transformed values', () => {
+    expect(transformCss([['margin', `10px ${value}`]])).toEqual({
+      marginTop: 10,
+      marginRight: value,
+      marginBottom: 10,
+      marginLeft: value,
+    })
+  })
+
+  it('allows units to be used with border shorthand property', () => {
+    expect(transformCss([['border', `#f00 ${value} dashed`]])).toEqual({
+      borderWidth: value,
+      borderColor: '#f00',
+      borderStyle: 'dashed',
+    })
+
+    expect(transformCss([['border', value]])).toEqual({
+      borderWidth: value,
+      borderColor: 'black',
+      borderStyle: 'solid',
+    })
+  })
+
+  it('allows units to be used with border-width', () => {
+    expect(transformCss([['border-width', `1px 2px ${value} 4px`]])).toEqual({
+      borderTopWidth: 1,
+      borderRightWidth: 2,
+      borderBottomWidth: value,
+      borderLeftWidth: 4,
+    })
+  })
+
+  it('allows units to be used with border-radius', () => {
+    expect(transformCss([['border-radius', `1px ${value} 3px 4px`]])).toEqual({
+      borderTopLeftRadius: 1,
+      borderTopRightRadius: value,
+      borderBottomRightRadius: 3,
+      borderBottomLeftRadius: 4,
+    })
+  })
+
+  it('allows units to be used with font-size', () => {
+    expect(transformCss([['font-size', value]])).toEqual({
+      fontSize: value,
+    })
+  })
+
+  it('allows units to be used with font shorthand property', () => {
+    expect(
+      transformCss([['font', `bold italic ${value}/${value} "Helvetica"`]])
+    ).toEqual({
+      fontFamily: 'Helvetica',
+      fontSize: value,
+      fontWeight: 'bold',
+      fontStyle: 'italic',
+      fontVariant: [],
+      lineHeight: value,
+    })
+  })
+
+  it('allows untis to be used with text-shadow ', () => {
+    expect(transformCss([['text-shadow', `10px ${value} red`]])).toEqual({
+      textShadowOffset: { width: 10, height: value },
+      textShadowRadius: 0,
+      textShadowColor: 'red',
+    })
+  })
+
+  it('allows untis to be used with box-shadow', () => {
+    expect(
+      transformCss([['box-shadow', `10px ${value} ${value} red`]])
+    ).toEqual({
+      shadowOffset: { width: 10, height: value },
+      shadowRadius: value,
+      shadowColor: 'red',
+      shadowOpacity: 1,
+    })
+  })
+})
+
+it('throws for unit that is not supported', () => {
+  expect(() => transformCss([['margin', '10ic']])).toThrow(
+    'Failed to parse declaration "margin: 10ic"'
+  )
+})

src/tokenTypes.js

@@ -32,6 +32,7 @@ const identRe = /(^-?[_a-z][_a-z0-9-]*$)/i
 const numberRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)$/
 // Note lengthRe is sneaky: you can omit units for 0
 const lengthRe = /^(0$|(?:[+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)(?=px$))/
+const unsupportedUnitRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?(ch|em|ex|rem|vh|vw|vmin|vmax|cm|mm|in|pc|pt))$/
 const angleRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?(?:deg|rad))$/
 const percentRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?%)$/
 
@@ -60,6 +61,7 @@ export const tokens = {
   AUTO: regExpToken(autoRe),
   NUMBER: regExpToken(numberRe, Number),
   LENGTH: regExpToken(lengthRe, Number),
+  UNSUPPORTED_LENGTH_UNIT: regExpToken(unsupportedUnitRe),
   ANGLE: regExpToken(angleRe),
   PERCENT: regExpToken(percentRe),
   IDENT: regExpToken(identRe),

src/transforms/font.js

@@ -1,7 +1,7 @@
 import parseFontFamily from './fontFamily'
 import { regExpToken, tokens } from '../tokenTypes'
 
-const { SPACE, LENGTH, NUMBER, SLASH } = tokens
+const { SPACE, LENGTH, UNSUPPORTED_LENGTH_UNIT, NUMBER, SLASH } = tokens
 const NORMAL = regExpToken(/^(normal)$/)
 const STYLE = regExpToken(/^(italic)$/)
 const WEIGHT = regExpToken(/^([1-9]00|bold)$/)
@@ -37,13 +37,13 @@ export default tokenStream => {
     numStyleWeightVariantMatched += 1
   }
 
-  const fontSize = tokenStream.expect(LENGTH)
+  const fontSize = tokenStream.expect(LENGTH, UNSUPPORTED_LENGTH_UNIT)
 
   if (tokenStream.matches(SLASH)) {
     if (tokenStream.matches(NUMBER)) {
       lineHeight = fontSize * tokenStream.lastValue
     } else {
-      lineHeight = tokenStream.expect(LENGTH)
+      lineHeight = tokenStream.expect(LENGTH, UNSUPPORTED_LENGTH_UNIT)
     }
   }
 

src/transforms/index.js

@@ -9,22 +9,30 @@ import textDecorationLine from './textDecorationLine'
 import transform from './transform'
 import { directionFactory, anyOrderFactory, shadowOffsetFactory } from './util'
 
-const { IDENT, WORD, COLOR, LENGTH, PERCENT, AUTO } = tokens
+const {
+  IDENT,
+  WORD,
+  COLOR,
+  LENGTH,
+  UNSUPPORTED_LENGTH_UNIT,
+  PERCENT,
+  AUTO,
+} = tokens
 
 const background = tokenStream => ({
   $merge: { backgroundColor: tokenStream.expect(COLOR) },
 })
 const border = anyOrderFactory({
   borderWidth: {
-    token: tokens.LENGTH,
+    tokens: [LENGTH, UNSUPPORTED_LENGTH_UNIT],
     default: 1,
   },
   borderColor: {
-    token: COLOR,
+    tokens: [COLOR],
     default: 'black',
   },
   borderStyle: {
-    token: regExpToken(/^(solid|dashed|dotted)$/),
+    tokens: [regExpToken(/^(solid|dashed|dotted)$/)],
     default: 'solid',
   },
 })
@@ -40,17 +48,17 @@ const borderRadius = directionFactory({
 })
 const borderWidth = directionFactory({ prefix: 'border', suffix: 'Width' })
 const margin = directionFactory({
-  types: [LENGTH, PERCENT, AUTO],
+  types: [LENGTH, UNSUPPORTED_LENGTH_UNIT, PERCENT, AUTO],
   prefix: 'margin',
 })
 const padding = directionFactory({ prefix: 'padding' })
 const flexFlow = anyOrderFactory({
   flexWrap: {
-    token: regExpToken(/(nowrap|wrap|wrap-reverse)/),
+    tokens: [regExpToken(/(nowrap|wrap|wrap-reverse)/)],
     default: 'nowrap',
   },
   flexDirection: {
-    token: regExpToken(/(row|row-reverse|column|column-reverse)/),
+    tokens: [regExpToken(/(row|row-reverse|column|column-reverse)/)],
     default: 'row',
   },
 })

src/transforms/util.js

@@ -1,9 +1,9 @@
 import { tokens } from '../tokenTypes'
 
-const { LENGTH, PERCENT, COLOR, SPACE, NONE } = tokens
+const { LENGTH, UNSUPPORTED_LENGTH_UNIT, PERCENT, COLOR, SPACE, NONE } = tokens
 
 export const directionFactory = ({
-  types = [LENGTH, PERCENT],
+  types = [LENGTH, UNSUPPORTED_LENGTH_UNIT, PERCENT],
   directions = ['Top', 'Right', 'Bottom', 'Left'],
   prefix = '',
   suffix = '',
@@ -48,7 +48,9 @@ export const anyOrderFactory = (properties, delim = SPACE) => tokenStream => {
     const matchedPropertyName = propertyNames.find(
       propertyName =>
         values[propertyName] === undefined &&
-        tokenStream.matches(properties[propertyName].token)
+        properties[propertyName].tokens.some(token =>
+          tokenStream.matches(token)
+        )
     )
 
     if (!matchedPropertyName) {
@@ -96,13 +98,19 @@ export const parseShadow = tokenStream => {
   while (tokenStream.hasTokens()) {
     if (didParseFirst) tokenStream.expect(SPACE)
 
-    if (offsetX === undefined && tokenStream.matches(LENGTH)) {
+    if (
+      offsetX === undefined &&
+      tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)
+    ) {
       offsetX = tokenStream.lastValue
       tokenStream.expect(SPACE)
-      offsetY = tokenStream.expect(LENGTH)
+      offsetY = tokenStream.expect(LENGTH, UNSUPPORTED_LENGTH_UNIT)
 
       tokenStream.saveRewindPoint()
-      if (tokenStream.matches(SPACE) && tokenStream.matches(LENGTH)) {
+      if (
+        tokenStream.matches(SPACE) &&
+        tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)
+      ) {
         radius = tokenStream.lastValue
       } else {
         tokenStream.rewind()