diff --git a/packages/css-to-react-native/__tests__/index.spec.js b/packages/css-to-react-native/__tests__/index.spec.js
index 43a8574d9a0f..bfb8975c0f0d 100644
--- a/packages/css-to-react-native/__tests__/index.spec.js
+++ b/packages/css-to-react-native/__tests__/index.spec.js
@@ -797,7 +797,7 @@ describe('transform', () => {
       }
     `)
     ).toEqual({
-      test: { transform: [{ translateY: 3 }, { translateX: 2 }] }
+      test: { transform: [{ translateY: 'scalePx2dp(3)' }, { translateX: 'scalePx2dp(2)' }] }
     })
   })
 
@@ -809,7 +809,7 @@ describe('transform', () => {
       }
     `)
     ).toEqual({
-      test: { transform: [{ translateY: 0 }, { translateX: 5 }] }
+      test: { transform: [{ translateY: 0 }, { translateX: 'scalePx2dp(5)' }] }
     })
   })
 
@@ -847,7 +847,7 @@ describe('border', () => {
       }
     `)
     ).toEqual({
-      test: { borderWidth: 2, borderColor: '#f00', borderStyle: 'dashed' }
+      test: { borderWidth: 'scalePx2dp(2)', borderColor: '#f00', borderStyle: 'dashed' }
     })
   })
 
@@ -859,7 +859,7 @@ describe('border', () => {
       }
     `)
     ).toEqual({
-      test: { borderWidth: 2, borderColor: '#f00', borderStyle: 'dashed' }
+      test: { borderWidth: 'scalePx2dp(2)', borderColor: '#f00', borderStyle: 'dashed' }
     })
   })
 
@@ -871,7 +871,7 @@ describe('border', () => {
       }
     `)
     ).toEqual({
-      test: { borderWidth: 2, borderColor: 'black', borderStyle: 'dashed' }
+      test: { borderWidth: 'scalePx2dp(2)', borderColor: 'black', borderStyle: 'dashed' }
     })
   })
 
@@ -883,7 +883,7 @@ describe('border', () => {
       }
     `)
     ).toEqual({
-      test: { borderWidth: 2, borderColor: '#f00', borderStyle: 'solid' }
+      test: { borderWidth: 'scalePx2dp(2)', borderColor: '#f00', borderStyle: 'solid' }
     })
   })
 
@@ -931,7 +931,7 @@ describe('border', () => {
       }
     `)
     ).toEqual({
-      test: { borderWidth: 2, borderColor: 'black', borderStyle: 'solid' }
+      test: { borderWidth: 'scalePx2dp(2)', borderColor: 'black', borderStyle: 'solid' }
     })
   })
 
@@ -944,7 +944,7 @@ describe('border', () => {
         }
       `)
       ).toEqual({
-        test: { borderRadius: 6 }
+        test: { borderRadius: 'scalePx2dp(6)' }
       })
     })
 
@@ -958,8 +958,8 @@ describe('border', () => {
       ).toEqual({
         test: {
           borderBottomLeftRadius: '5%',
-          borderBottomRightRadius: 10,
-          borderTopLeftRadius: 10,
+          borderBottomRightRadius: 'scalePx2dp(10)',
+          borderTopLeftRadius: 'scalePx2dp(10)',
           borderTopRightRadius: '5%'
         }
       })
@@ -971,10 +971,10 @@ describe('border', () => {
       `)
       ).toEqual({
         test: {
-          borderBottomLeftRadius: 4,
-          borderBottomRightRadius: 2,
-          borderTopLeftRadius: 2,
-          borderTopRightRadius: 4
+          borderBottomLeftRadius: 'scalePx2dp(4)',
+          borderBottomRightRadius: 'scalePx2dp(2)',
+          borderTopLeftRadius: 'scalePx2dp(2)',
+          borderTopRightRadius: 'scalePx2dp(4)'
         }
       })
       expect(
@@ -985,9 +985,9 @@ describe('border', () => {
       `)
       ).toEqual({
         test: {
-          borderBottomLeftRadius: 4,
-          borderBottomRightRadius: 3,
-          borderTopLeftRadius: 1,
+          borderBottomLeftRadius: 'scalePx2dp(4)',
+          borderBottomRightRadius: 'scalePx2dp(3)',
+          borderTopLeftRadius: 'scalePx2dp(1)',
           borderTopRightRadius: 0
         }
       })
@@ -1058,7 +1058,7 @@ describe('border', () => {
         }
       `)
       ).toEqual({
-        test: { borderWidth: 4 }
+        test: { borderWidth: 'scalePx2dp(4)' }
       })
     })
 
@@ -1071,10 +1071,10 @@ describe('border', () => {
       `)
       ).toEqual({
         test: {
-          borderTopWidth: 2,
-          borderRightWidth: 24,
-          borderBottomWidth: 2,
-          borderLeftWidth: 24
+          borderTopWidth: 'scalePx2dp(2)',
+          borderRightWidth: 'scalePx2dp(24)',
+          borderBottomWidth: 'scalePx2dp(2)',
+          borderLeftWidth: 'scalePx2dp(24)'
         }
       })
       expect(
@@ -1085,10 +1085,10 @@ describe('border', () => {
       `)
       ).toEqual({
         test: {
-          borderTopWidth: 1,
-          borderRightWidth: 32,
-          borderBottomWidth: 24,
-          borderLeftWidth: 32
+          borderTopWidth: 'scalePx2dp(1)',
+          borderRightWidth: 'scalePx2dp(32)',
+          borderBottomWidth: 'scalePx2dp(24)',
+          borderLeftWidth: 'scalePx2dp(32)'
         }
       })
       expect(
@@ -1099,10 +1099,10 @@ describe('border', () => {
       `)
       ).toEqual({
         test: {
-          borderTopWidth: 1,
-          borderRightWidth: 32,
+          borderTopWidth: 'scalePx2dp(1)',
+          borderRightWidth: 'scalePx2dp(32)',
           borderBottomWidth: 0,
-          borderLeftWidth: 64
+          borderLeftWidth: 'scalePx2dp(64)'
         }
       })
     })
@@ -1201,7 +1201,7 @@ describe('line-height', () => {
     `)
     ).toEqual({
       test: {
-        lineHeight: 1.5
+        lineHeight: 'scalePx2dp(1.5)'
       }
     })
   })
@@ -1214,7 +1214,7 @@ describe('line-height', () => {
     `)
     ).toEqual({
       test: {
-        lineHeight: 32
+        lineHeight: 'scalePx2dp(32)'
       }
     })
   })
@@ -1279,10 +1279,10 @@ describe('margin', () => {
     `)
     ).toEqual({
       test: {
-        marginTop: 10,
-        marginRight: 20,
-        marginBottom: 30,
-        marginLeft: 40
+        marginTop: 'scalePx2dp(10)',
+        marginRight: 'scalePx2dp(20)',
+        marginBottom: 'scalePx2dp(30)',
+        marginLeft: 'scalePx2dp(40)'
       }
     })
   })
@@ -1296,10 +1296,10 @@ describe('margin', () => {
     `)
     ).toEqual({
       test: {
-        marginTop: 10,
-        marginRight: 20,
-        marginBottom: 30,
-        marginLeft: 20
+        marginTop: 'scalePx2dp(10)',
+        marginRight: 'scalePx2dp(20)',
+        marginBottom: 'scalePx2dp(30)',
+        marginLeft: 'scalePx2dp(20)'
       }
     })
   })
@@ -1313,10 +1313,10 @@ describe('margin', () => {
     `)
     ).toEqual({
       test: {
-        marginTop: 10,
-        marginRight: 20,
-        marginBottom: 10,
-        marginLeft: 20
+        marginTop: 'scalePx2dp(10)',
+        marginRight: 'scalePx2dp(20)',
+        marginBottom: 'scalePx2dp(10)',
+        marginLeft: 'scalePx2dp(20)'
       }
     })
   })
@@ -1330,10 +1330,10 @@ describe('margin', () => {
     `)
     ).toEqual({
       test: {
-        marginTop: 10,
-        marginRight: 10,
-        marginBottom: 10,
-        marginLeft: 10
+        marginTop: 'scalePx2dp(10)',
+        marginRight: 'scalePx2dp(10)',
+        marginBottom: 'scalePx2dp(10)',
+        marginLeft: 'scalePx2dp(10)'
       }
     })
   })
@@ -1347,7 +1347,7 @@ describe('margin', () => {
       }
     `)
     ).toEqual({
-      test: { marginTop: 1, marginRight: 1, marginBottom: 1, marginLeft: 1 }
+      test: { marginTop: 'scalePx2dp(1)', marginRight: 'scalePx2dp(1)', marginBottom: 'scalePx2dp(1)', marginLeft: 'scalePx2dp(1)' }
     })
   })
 
@@ -1402,10 +1402,10 @@ describe('margin', () => {
     `)
     ).toEqual({
       test: {
-        marginTop: 2,
-        marginRight: 3,
+        marginTop: 'scalePx2dp(2)',
+        marginRight: 'scalePx2dp(3)',
         marginBottom: 'auto',
-        marginLeft: 3
+        marginLeft: 'scalePx2dp(3)'
       }
     })
     expect(
@@ -1416,9 +1416,9 @@ describe('margin', () => {
     `)
     ).toEqual({
       test: {
-        marginTop: 10,
+        marginTop: 'scalePx2dp(10)',
         marginRight: 'auto',
-        marginBottom: 4,
+        marginBottom: 'scalePx2dp(4)',
         marginLeft: 'auto'
       }
     })
@@ -1668,7 +1668,7 @@ describe('flex-box', () => {
       }
     `)
     ).toEqual({
-      test: { flexGrow: 1, flexShrink: 2, flexBasis: 3 }
+      test: { flexGrow: 1, flexShrink: 2, flexBasis: 'scalePx2dp(3)' }
     })
   })
 
@@ -1680,7 +1680,7 @@ describe('flex-box', () => {
       }
     `)
     ).toEqual({
-      test: { flexGrow: 1, flexShrink: 2, flexBasis: 3 }
+      test: { flexGrow: 1, flexShrink: 2, flexBasis: 'scalePx2dp(3)' }
     })
   })
 
@@ -1704,7 +1704,7 @@ describe('flex-box', () => {
       }
     `)
     ).toEqual({
-      test: { flexGrow: 2, flexShrink: 1, flexBasis: 2 }
+      test: { flexGrow: 2, flexShrink: 1, flexBasis: 'scalePx2dp(2)' }
     })
   })
 
@@ -1716,7 +1716,7 @@ describe('flex-box', () => {
       }
     `)
     ).toEqual({
-      test: { flexGrow: 2, flexShrink: 1, flexBasis: 2 }
+      test: { flexGrow: 2, flexShrink: 1, flexBasis: 'scalePx2dp(2)' }
     })
   })
 
@@ -1740,7 +1740,7 @@ describe('flex-box', () => {
       }
     `)
     ).toEqual({
-      test: { flexGrow: 1, flexShrink: 1, flexBasis: 10 }
+      test: { flexGrow: 1, flexShrink: 1, flexBasis: 'scalePx2dp(10)' }
     })
   })
 
@@ -1867,11 +1867,11 @@ describe('font', () => {
     ).toEqual({
       test: {
         fontFamily: 'Helvetica',
-        fontSize: 16,
+        fontSize: 'scalePx2dp(16)',
         fontWeight: 'bold',
         fontStyle: 'italic',
         fontVariant: ['small-caps'],
-        lineHeight: 18
+        lineHeight: 'scalePx2dp(18)'
       }
     })
   })
@@ -1886,11 +1886,11 @@ describe('font', () => {
     ).toEqual({
       test: {
         fontFamily: 'Helvetica',
-        fontSize: 16,
+        fontSize: 'scalePx2dp(16)',
         fontWeight: 'bold',
         fontStyle: 'italic',
         fontVariant: [],
-        lineHeight: 18
+        lineHeight: 'scalePx2dp(18)'
       }
     })
   })
@@ -1905,11 +1905,11 @@ describe('font', () => {
     ).toEqual({
       test: {
         fontFamily: 'Helvetica',
-        fontSize: 16,
+        fontSize: 'scalePx2dp(16)',
         fontWeight: 'bold',
         fontStyle: 'normal',
         fontVariant: ['small-caps'],
-        lineHeight: 18
+        lineHeight: 'scalePx2dp(18)'
       }
     })
   })
@@ -1924,11 +1924,11 @@ describe('font', () => {
     ).toEqual({
       test: {
         fontFamily: 'Helvetica',
-        fontSize: 16,
+        fontSize: 'scalePx2dp(16)',
         fontWeight: 'normal',
         fontStyle: 'italic',
         fontVariant: ['small-caps'],
-        lineHeight: 18
+        lineHeight: 'scalePx2dp(18)'
       }
     })
   })
@@ -1943,11 +1943,11 @@ describe('font', () => {
     ).toEqual({
       test: {
         fontFamily: 'Helvetica',
-        fontSize: 16,
+        fontSize: 'scalePx2dp(16)',
         fontWeight: 'normal',
         fontStyle: 'normal',
         fontVariant: [],
-        lineHeight: 18
+        lineHeight: 'scalePx2dp(18)'
       }
     })
   })
@@ -1962,11 +1962,11 @@ describe('font', () => {
     ).toEqual({
       test: {
         fontFamily: 'Helvetica',
-        fontSize: 16,
+        fontSize: 'scalePx2dp(16)',
         fontWeight: 'normal',
         fontStyle: 'normal',
         fontVariant: [],
-        lineHeight: 18
+        lineHeight: 'scalePx2dp(18)'
       }
     })
   })
@@ -1981,11 +1981,11 @@ describe('font', () => {
     ).toEqual({
       test: {
         fontFamily: 'Helvetica',
-        fontSize: 16,
+        fontSize: 'scalePx2dp(16)',
         fontWeight: 'normal',
         fontStyle: 'normal',
         fontVariant: [],
-        lineHeight: 18
+        lineHeight: 'scalePx2dp(18)'
       }
     })
   })
@@ -2000,7 +2000,7 @@ describe('font', () => {
     ).toEqual({
       test: {
         fontFamily: 'Helvetica',
-        fontSize: 16,
+        fontSize: 'scalePx2dp(16)',
         fontWeight: 'normal',
         fontStyle: 'normal',
         fontVariant: []
@@ -2018,7 +2018,7 @@ describe('font', () => {
     ).toEqual({
       test: {
         fontFamily: 'Helvetica',
-        fontSize: 16,
+        fontSize: 'scalePx2dp(16)',
         fontWeight: 'normal',
         fontStyle: 'normal',
         fontVariant: [],
@@ -2037,11 +2037,11 @@ describe('font', () => {
     ).toEqual({
       test: {
         fontFamily: 'Helvetica Neue',
-        fontSize: 16,
+        fontSize: 'scalePx2dp(16)',
         fontWeight: 'bold',
         fontStyle: 'italic',
         fontVariant: ['small-caps'],
-        lineHeight: 18
+        lineHeight: 'scalePx2dp(18)'
       }
     })
   })
@@ -2153,8 +2153,8 @@ describe('box-shadow', () => {
     `)
     ).toEqual({
       test: {
-        shadowOffset: { width: 10, height: 20 },
-        shadowRadius: 30,
+        shadowOffset: { width: 'scalePx2dp(10)', height: 'scalePx2dp(20)' },
+        shadowRadius: 'scalePx2dp(30)',
         shadowColor: 'red',
         shadowOpacity: 1
       }
@@ -2167,8 +2167,22 @@ describe('box-shadow', () => {
     `)
     ).toEqual({
       test: {
-        shadowOffset: { width: 10, height: 20 },
-        shadowRadius: 30,
+        shadowOffset: { width: 'scalePx2dp(10)', height: 'scalePx2dp(20)' },
+        shadowRadius: 'scalePx2dp(30)',
+        shadowColor: '#f00',
+        shadowOpacity: 1
+      }
+    })
+    expect(
+      transform(`
+      .test {
+        box-shadow: 10px 20px 30px 30px #f00;
+      }
+    `)
+    ).toEqual({
+      test: {
+        shadowOffset: { width: 'scalePx2dp(10)', height: 'scalePx2dp(20)' },
+        shadowRadius: 'scalePx2dp(30)',
         shadowColor: '#f00',
         shadowOpacity: 1
       }
@@ -2184,8 +2198,8 @@ describe('box-shadow', () => {
     `)
     ).toEqual({
       test: {
-        shadowOffset: { width: 10, height: 20 },
-        shadowRadius: 30,
+        shadowOffset: { width: 'scalePx2dp(10)', height: 'scalePx2dp(20)' },
+        shadowRadius: 'scalePx2dp(30)',
         shadowColor: 'rgb(100, 100, 100)',
         shadowOpacity: 1
       }
@@ -2201,8 +2215,8 @@ describe('box-shadow', () => {
     `)
     ).toEqual({
       test: {
-        shadowOffset: { width: 10, height: 20 },
-        shadowRadius: 30,
+        shadowOffset: { width: 'scalePx2dp(10)', height: 'scalePx2dp(20)' },
+        shadowRadius: 'scalePx2dp(30)',
         shadowColor: 'rgba(100, 100, 100, 0.5)',
         shadowOpacity: 1
       }
@@ -2218,8 +2232,8 @@ describe('box-shadow', () => {
     `)
     ).toEqual({
       test: {
-        shadowOffset: { width: 10, height: 20 },
-        shadowRadius: 30,
+        shadowOffset: { width: 'scalePx2dp(10)', height: 'scalePx2dp(20)' },
+        shadowRadius: 'scalePx2dp(30)',
         shadowColor: 'hsl(120, 100%, 50%)',
         shadowOpacity: 1
       }
@@ -2235,8 +2249,8 @@ describe('box-shadow', () => {
     `)
     ).toEqual({
       test: {
-        shadowOffset: { width: 10, height: 20 },
-        shadowRadius: 30,
+        shadowOffset: { width: 'scalePx2dp(10)', height: 'scalePx2dp(20)' },
+        shadowRadius: 'scalePx2dp(30)',
         shadowColor: 'hsla(120, 100%, 50%, 0.7)',
         shadowOpacity: 1
       }
@@ -2252,8 +2266,8 @@ describe('box-shadow', () => {
     `)
     ).toEqual({
       test: {
-        shadowOffset: { width: 10, height: 20 },
-        shadowRadius: 30,
+        shadowOffset: { width: 'scalePx2dp(10)', height: 'scalePx2dp(20)' },
+        shadowRadius: 'scalePx2dp(30)',
         shadowColor: '#f00',
         shadowOpacity: 1
       }
@@ -2270,7 +2284,7 @@ describe('box-shadow', () => {
     ).toEqual({
       test: {
         shadowOffset: { width: 0, height: 0 },
-        shadowRadius: 1,
+        shadowRadius: 'scalePx2dp(1)',
         shadowColor: 'red',
         shadowOpacity: 1
       }
@@ -2297,7 +2311,7 @@ describe('box-shadow', () => {
     `)
     ).toEqual({
       test: {
-        shadowOffset: { width: 1, height: 1 },
+        shadowOffset: { width: 'scalePx2dp(1)', height: 'scalePx2dp(1)' },
         shadowRadius: 0,
         shadowColor: '#00f',
         shadowOpacity: 1
@@ -2314,7 +2328,7 @@ describe('box-shadow', () => {
     `)
     ).toEqual({
       test: {
-        shadowOffset: { width: 10, height: 20 },
+        shadowOffset: { width: 'scalePx2dp(10)', height: 'scalePx2dp(20)' },
         shadowRadius: 0,
         shadowColor: 'red',
         shadowOpacity: 1
@@ -2331,8 +2345,8 @@ describe('box-shadow', () => {
     `)
     ).toEqual({
       test: {
-        shadowOffset: { width: 10, height: 20 },
-        shadowRadius: 30,
+        shadowOffset: { width: 'scalePx2dp(10)', height: 'scalePx2dp(20)' },
+        shadowRadius: 'scalePx2dp(30)',
         shadowColor: 'black',
         shadowOpacity: 1
       }
@@ -2348,7 +2362,7 @@ describe('box-shadow', () => {
     `)
     ).toEqual({
       test: {
-        shadowOffset: { width: 10, height: 20 },
+        shadowOffset: { width: 'scalePx2dp(10)', height: 'scalePx2dp(20)' },
         shadowRadius: 0,
         shadowColor: 'black',
         shadowOpacity: 1
@@ -2425,8 +2439,8 @@ describe('text-shadow', () => {
     `)
     ).toEqual({
       test: {
-        textShadowOffset: { width: 10, height: 20 },
-        textShadowRadius: 30,
+        textShadowOffset: { width: 'scalePx2dp(10)', height: 'scalePx2dp(20)' },
+        textShadowRadius: 'scalePx2dp(30)',
         textShadowColor: 'red'
       }
     })
@@ -2441,7 +2455,7 @@ describe('text-shadow', () => {
     `)
     ).toEqual({
       test: {
-        textShadowOffset: { width: 10, height: 20 },
+        textShadowOffset: { width: 'scalePx2dp(10)', height: 'scalePx2dp(20)' },
         textShadowRadius: 0,
         textShadowColor: 'red'
       }
@@ -2457,7 +2471,7 @@ describe('text-shadow', () => {
     `)
     ).toEqual({
       test: {
-        textShadowOffset: { width: 10, height: 20 },
+        textShadowOffset: { width: 'scalePx2dp(10)', height: 'scalePx2dp(20)' },
         textShadowRadius: 0,
         textShadowColor: 'black'
       }
@@ -2495,13 +2509,13 @@ describe('rem unit', () => {
     `)
     ).toEqual({
       test1: {
-        paddingBottom: 32,
-        paddingLeft: 32,
-        paddingRight: 32,
-        paddingTop: 32
+        paddingBottom: 'scalePx2dp(32)',
+        paddingLeft: 'scalePx2dp(32)',
+        paddingRight: 'scalePx2dp(32)',
+        paddingTop: 'scalePx2dp(32)'
       },
       test2: {
-        fontSize: 16
+        fontSize: 'scalePx2dp(16)'
       }
     })
   })
@@ -2518,12 +2532,12 @@ describe('rem unit', () => {
     `)
     ).toEqual({
       test1: {
-        transform: [{ translateY: 32 }, { translateX: 16 }]
+        transform: [{ translateY: 'scalePx2dp(32)' }, { translateX: 'scalePx2dp(16)' }]
       },
       test2: {
         shadowColor: '#fff',
-        shadowOffset: { height: 32, width: 16 },
-        shadowRadius: 48,
+        shadowOffset: { height: 'scalePx2dp(32)', width: 'scalePx2dp(16)' },
+        shadowRadius: 'scalePx2dp(48)',
         shadowOpacity: 1
       }
     })
@@ -2540,9 +2554,9 @@ describe('rem unit', () => {
       }
     `)
     ).toEqual({
-      test1: { transform: [{ translateY: 26 }, { translateX: 15 }] },
+      test1: { transform: [{ translateY: 'scalePx2dp(26)' }, { translateX: 'scalePx2dp(15)' }] },
       test2: {
-        borderRadius: 9
+        borderRadius: 'scalePx2dp(9)'
       }
     })
 
@@ -2556,9 +2570,9 @@ describe('rem unit', () => {
       }
     `)
     ).toEqual({
-      test1: { transform: [{ translateY: 26 }, { translateX: 15 }] },
+      test1: { transform: [{ translateY: 'scalePx2dp(26)' }, { translateX: 'scalePx2dp(15)' }] },
       test2: {
-        borderRadius: 9
+        borderRadius: 'scalePx2dp(9)'
       }
     })
   })
diff --git a/packages/css-to-react-native/src/css-to-react-native/TokenStream.js b/packages/css-to-react-native/src/css-to-react-native/TokenStream.js
index 81af0961f8e8..865b02f92c9a 100644
--- a/packages/css-to-react-native/src/css-to-react-native/TokenStream.js
+++ b/packages/css-to-react-native/src/css-to-react-native/TokenStream.js
@@ -9,14 +9,22 @@ export default class TokenStream {
     this.rewindIndex = -1
   }
 
+  get node () {
+    return this.nodes[this.index]
+  }
+
+  get length () {
+    return this.nodes.length
+  }
+
   hasTokens () {
-    return this.index <= this.nodes.length - 1
+    return this.index <= this.length - 1
   }
 
   [SYMBOL_MATCH] (...tokenDescriptors) {
     if (!this.hasTokens()) return null
 
-    const node = this.nodes[this.index]
+    const node = this.node
 
     for (let i = 0; i < tokenDescriptors.length; i += 1) {
       const tokenDescriptor = tokenDescriptors[i]
@@ -41,7 +49,7 @@ export default class TokenStream {
   }
 
   matchesFunction () {
-    const node = this.nodes[this.index]
+    const node = this.node
     if (node.type !== 'function') return null
     const value = new TokenStream(node.nodes, node)
     this.index += 1
@@ -59,7 +67,7 @@ export default class TokenStream {
   }
 
   throw () {
-    throw new Error(`Unexpected token type: ${this.nodes[this.index].type}`)
+    throw new Error(`Unexpected token type: ${this.node?.type}`)
   }
 
   saveRewindPoint () {
diff --git a/packages/css-to-react-native/src/css-to-react-native/index.js b/packages/css-to-react-native/src/css-to-react-native/index.js
index 199cf27d7edf..2ac43591ff7c 100644
--- a/packages/css-to-react-native/src/css-to-react-native/index.js
+++ b/packages/css-to-react-native/src/css-to-react-native/index.js
@@ -17,7 +17,7 @@ export const transformRawValue = input => {
   const numberMatch = value.match(numberOrLengthRe)
   if (numberMatch !== null) {
     const num = Number(numberMatch[1])
-    if (/px/.test(value)) {
+    if (/(\d+)px/.test(value)) {
       return `scalePx2dp(${num})`
     } else {
       return num
diff --git a/packages/css-to-react-native/src/css-to-react-native/tokenTypes.js b/packages/css-to-react-native/src/css-to-react-native/tokenTypes.js
index d0caf3d6f3c3..e572a9791def 100644
--- a/packages/css-to-react-native/src/css-to-react-native/tokenTypes.js
+++ b/packages/css-to-react-native/src/css-to-react-native/tokenTypes.js
@@ -45,7 +45,7 @@ export const regExpToken = (regExp, transform = String) => node => {
   if (match === null) return null
 
   const value = transform(match[1])
-  if (/px/.test(node.value)) {
+  if (/(\d+)px/.test(node.value)) {
     return `scalePx2dp(${value})`
   } else {
     return value
diff --git a/packages/css-to-react-native/src/css-to-react-native/transforms/flex.js b/packages/css-to-react-native/src/css-to-react-native/transforms/flex.js
index b54c06f0fd81..8e5043ab9a98 100644
--- a/packages/css-to-react-native/src/css-to-react-native/transforms/flex.js
+++ b/packages/css-to-react-native/src/css-to-react-native/transforms/flex.js
@@ -26,7 +26,7 @@ export default tokenStream => {
   while (partsParsed < 2 && tokenStream.hasTokens()) {
     if (partsParsed !== 0) tokenStream.expect(SPACE)
 
-    if (flexGrow === undefined && tokenStream.matches(NUMBER)) {
+    if (typeof flexGrow === 'undefined' && tokenStream.matches(NUMBER)) {
       flexGrow = tokenStream.lastValue
 
       tokenStream.saveRewindPoint()
@@ -35,9 +35,9 @@ export default tokenStream => {
       } else {
         tokenStream.rewind()
       }
-    } else if (flexBasis === undefined && tokenStream.matches(LENGTH)) {
+    } else if (typeof flexBasis === 'undefined' && tokenStream.matches(LENGTH)) {
       flexBasis = tokenStream.lastValue
-    } else if (flexBasis === undefined && tokenStream.matches(AUTO)) {
+    } else if (typeof flexBasis === 'undefined' && tokenStream.matches(AUTO)) {
       flexBasis = 'auto'
     } else {
       tokenStream.throw()
@@ -48,9 +48,9 @@ export default tokenStream => {
 
   tokenStream.expectEmpty()
 
-  if (flexGrow === undefined) flexGrow = defaultFlexGrow
-  if (flexShrink === undefined) flexShrink = defaultFlexShrink
-  if (flexBasis === undefined) flexBasis = defaultFlexBasis
+  if (typeof flexGrow === 'undefined') flexGrow = defaultFlexGrow
+  if (typeof flexShrink === 'undefined') flexShrink = defaultFlexShrink
+  if (typeof flexBasis === 'undefined') flexBasis = defaultFlexBasis
 
   return { $merge: { flexGrow, flexShrink, flexBasis } }
 }
diff --git a/packages/css-to-react-native/src/css-to-react-native/transforms/font.js b/packages/css-to-react-native/src/css-to-react-native/transforms/font.js
index 92b222914e76..8f773a3662da 100644
--- a/packages/css-to-react-native/src/css-to-react-native/transforms/font.js
+++ b/packages/css-to-react-native/src/css-to-react-native/transforms/font.js
@@ -23,11 +23,11 @@ export default tokenStream => {
   while (numStyleWeightVariantMatched < 3 && tokenStream.hasTokens()) {
     if (tokenStream.matches(NORMAL)) {
       /* pass */
-    } else if (fontStyle === undefined && tokenStream.matches(STYLE)) {
+    } else if (typeof fontStyle === 'undefined' && tokenStream.matches(STYLE)) {
       fontStyle = tokenStream.lastValue
-    } else if (fontWeight === undefined && tokenStream.matches(WEIGHT)) {
+    } else if (typeof fontWeight === 'undefined' && tokenStream.matches(WEIGHT)) {
       fontWeight = tokenStream.lastValue
-    } else if (fontVariant === undefined && tokenStream.matches(VARIANT)) {
+    } else if (typeof fontVariant === 'undefined' && tokenStream.matches(VARIANT)) {
       fontVariant = [tokenStream.lastValue]
     } else {
       break
@@ -41,7 +41,8 @@ export default tokenStream => {
 
   if (tokenStream.matches(SLASH)) {
     if (tokenStream.matches(NUMBER)) {
-      lineHeight = fontSize * tokenStream.lastValue
+      const size = typeof fontSize === 'string' ? fontSize.replace(/scalePx2dp\((\d+)\)/, '$1') : fontSize
+      lineHeight = size * tokenStream.lastValue
     } else {
       lineHeight = tokenStream.expect(LENGTH, UNSUPPORTED_LENGTH_UNIT)
     }
@@ -51,12 +52,12 @@ export default tokenStream => {
 
   const fontFamily = parseFontFamily(tokenStream)
 
-  if (fontStyle === undefined) fontStyle = defaultFontStyle
-  if (fontWeight === undefined) fontWeight = defaultFontWeight
-  if (fontVariant === undefined) fontVariant = defaultFontVariant
+  if (typeof fontStyle === 'undefined') fontStyle = defaultFontStyle
+  if (typeof fontWeight === 'undefined') fontWeight = defaultFontWeight
+  if (typeof fontVariant === 'undefined') fontVariant = defaultFontVariant
 
   const out = { fontStyle, fontWeight, fontVariant, fontSize, fontFamily }
-  if (lineHeight !== undefined) out.lineHeight = lineHeight
+  if (typeof lineHeight !== 'undefined') out.lineHeight = lineHeight
 
   return { $merge: out }
 }
diff --git a/packages/css-to-react-native/src/css-to-react-native/transforms/textDecoration.js b/packages/css-to-react-native/src/css-to-react-native/transforms/textDecoration.js
index 603a0f771095..ac755f038d6f 100644
--- a/packages/css-to-react-native/src/css-to-react-native/transforms/textDecoration.js
+++ b/packages/css-to-react-native/src/css-to-react-native/transforms/textDecoration.js
@@ -17,7 +17,7 @@ export default tokenStream => {
   while (tokenStream.hasTokens()) {
     if (didParseFirst) tokenStream.expect(SPACE)
 
-    if (line === undefined && tokenStream.matches(LINE)) {
+    if (typeof line === 'undefined' && tokenStream.matches(LINE)) {
       const lines = [tokenStream.lastValue.toLowerCase()]
 
       tokenStream.saveRewindPoint()
@@ -34,9 +34,9 @@ export default tokenStream => {
       }
 
       line = lines.join(' ')
-    } else if (style === undefined && tokenStream.matches(STYLE)) {
+    } else if (typeof style === 'undefined' && tokenStream.matches(STYLE)) {
       style = tokenStream.lastValue
-    } else if (color === undefined && tokenStream.matches(COLOR)) {
+    } else if (typeof color === 'undefined' && tokenStream.matches(COLOR)) {
       color = tokenStream.lastValue
     } else {
       tokenStream.throw()
@@ -46,11 +46,11 @@ export default tokenStream => {
   }
 
   const $merge = {
-    textDecorationLine: line !== undefined ? line : defaultTextDecorationLine,
+    textDecorationLine: typeof line !== 'undefined' ? line : defaultTextDecorationLine,
     textDecorationColor:
-      color !== undefined ? color : defaultTextDecorationColor,
+      typeof color !== 'undefined' ? color : defaultTextDecorationColor,
     textDecorationStyle:
-      style !== undefined ? style : defaultTextDecorationStyle
+      typeof style !== 'undefined' ? style : defaultTextDecorationStyle
   }
   return { $merge }
 }
diff --git a/packages/css-to-react-native/src/css-to-react-native/transforms/transform.js b/packages/css-to-react-native/src/css-to-react-native/transforms/transform.js
index ee93563616c9..928671cbd5c7 100644
--- a/packages/css-to-react-native/src/css-to-react-native/transforms/transform.js
+++ b/packages/css-to-react-native/src/css-to-react-native/transforms/transform.js
@@ -21,7 +21,7 @@ const xyTransformFactory = tokenType => (
   if (functionStream.hasTokens()) {
     functionStream.expect(COMMA)
     y = functionStream.expect(tokenType)
-  } else if (valueIfOmitted !== undefined) {
+  } else if (typeof valueIfOmitted !== 'undefined') {
     y = valueIfOmitted
   } else {
     // Assumption, if x === y, then we can omit XY
diff --git a/packages/css-to-react-native/src/css-to-react-native/transforms/util.js b/packages/css-to-react-native/src/css-to-react-native/transforms/util.js
index 25d0a916ca95..df242e35bd4f 100644
--- a/packages/css-to-react-native/src/css-to-react-native/transforms/util.js
+++ b/packages/css-to-react-native/src/css-to-react-native/transforms/util.js
@@ -37,7 +37,7 @@ export const directionFactory = ({
 export const anyOrderFactory = (properties, delim = SPACE) => tokenStream => {
   const propertyNames = Object.keys(properties)
   const values = propertyNames.reduce((accum, propertyName) => {
-    accum[propertyName] === undefined; // eslint-disable-line
+    typeof accum[propertyName] === 'undefined'; // eslint-disable-line
     return accum
   }, {})
 
@@ -47,7 +47,7 @@ export const anyOrderFactory = (properties, delim = SPACE) => tokenStream => {
 
     const matchedPropertyName = propertyNames.find(
       propertyName =>
-        values[propertyName] === undefined &&
+        typeof values[propertyName] === 'undefined' &&
         properties[propertyName].tokens.some(token =>
           tokenStream.matches(token)
         )
@@ -65,7 +65,9 @@ export const anyOrderFactory = (properties, delim = SPACE) => tokenStream => {
   tokenStream.expectEmpty()
 
   propertyNames.forEach(propertyName => {
-    if (values[propertyName] === undefined) { values[propertyName] = properties[propertyName].default }
+    if (typeof values[propertyName] === 'undefined') {
+      values[propertyName] = properties[propertyName].default
+    }
   })
 
   return { $merge: values }
@@ -100,23 +102,41 @@ export const parseShadow = tokenStream => {
     if (didParseFirst) tokenStream.expect(SPACE)
 
     if (
-      offsetX === undefined &&
+      typeof offsetX === 'undefined' &&
       tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)
     ) {
       offsetX = tokenStream.lastValue
-      tokenStream.expect(SPACE)
-      offsetY = tokenStream.expect(LENGTH, UNSUPPORTED_LENGTH_UNIT)
+      if (
+        tokenStream.matches(SPACE) &&
+        tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)
+      ) {
+        offsetY = tokenStream.lastValue
+      } else {
+        offsetY = offsetX
+        tokenStream.rewind()
+      }
 
       tokenStream.saveRewindPoint()
       if (
         tokenStream.matches(SPACE) &&
         tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)
       ) {
+        // blur-radius
         radius = tokenStream.lastValue
       } else {
         tokenStream.rewind()
       }
-    } else if (color === undefined && tokenStream.matches(COLOR)) {
+      tokenStream.saveRewindPoint()
+      if (
+        tokenStream.matches(SPACE) &&
+        tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)
+      ) {
+        // spread-radius
+        // 兼容web写法，防止报错
+      } else {
+        tokenStream.rewind()
+      }
+    } else if (typeof color === 'undefined' && tokenStream.matches(COLOR)) {
       color = tokenStream.lastValue
     } else {
       tokenStream.throw()
@@ -125,11 +145,11 @@ export const parseShadow = tokenStream => {
     didParseFirst = true
   }
 
-  if (offsetX === undefined) tokenStream.throw()
+  if (typeof offsetX === 'undefined') tokenStream.throw()
 
   return {
     offset: { width: offsetX, height: offsetY },
-    radius: radius !== undefined ? radius : 0,
-    color: color !== undefined ? color : 'black'
+    radius: typeof radius !== 'undefined' ? radius : 0,
+    color: typeof color !== 'undefined' ? color : 'black'
   }
 }
diff --git a/packages/css-to-react-native/src/index.js b/packages/css-to-react-native/src/index.js
index 25258e0ee96e..0ce3827f511b 100644
--- a/packages/css-to-react-native/src/index.js
+++ b/packages/css-to-react-native/src/index.js
@@ -23,7 +23,7 @@ const shorthandBorderProps = [
   'border-style'
 ]
 
-const transformDecls = (styles, declarations, result, options) => {
+const transformDecls = (styles, declarations, result, options = {}) => {
   for (const d in declarations) {
     const declaration = declarations[d]
     if (declaration.type !== 'declaration') continue
@@ -52,11 +52,12 @@ const transformDecls = (styles, declarations, result, options) => {
     // scalable option, when it is false, transform single value 'px' unit to 'PX'
     // do not be wrapped by scalePx2dp function
     if (
-      !options.scalable &&
       isLengthUnit &&
-      /px/.test(value)
+      typeof options.scalable === 'boolean' &&
+      !options.scalable &&
+      /(\d+)px/.test(value)
     ) {
-      value = value.replace(/px/g, 'PX')
+      value = value.replace(/(\d+)px/, '$1PX')
     }
 
     if (shorthandBorderProps.indexOf(property) > -1) {
@@ -93,8 +94,8 @@ const transform = (css, options) => {
 
         rule.declarations.forEach(({ property, value }) => {
           const isAlreadyDefinedAsClass =
-            result[property] !== undefined &&
-            result.__exportProps[property] === undefined
+            typeof result[property] !== 'undefined' &&
+            typeof result.__exportProps[property] === 'undefined'
 
           if (isAlreadyDefinedAsClass) {
             throw new Error(