Handle null and undefined values

`transformRawValue` expects a string as input
So when it receives a number, for example, it's transforming '1' to 1
But null and undefined are also valid values on react native styles (e.g. `width: null` is used sometimes)
Currently if we pass `transformRawValue('width', null)` it will crash and if we pass `transformRawValue('width', 'null')` it will return `{ width: 'null' }` which is not a valid property.

Author: brunolemos

src/index.js

@@ -7,6 +7,8 @@ const TokenStream = require('./TokenStream');
 // Note if this is wrong, you'll need to change tokenTypes.js too
 const numberOrLengthRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)(?:px)?$/i;
 const boolRe = /^true|false$/i;
+const nullRe = /^null$/i;
+const undefinedRe = /^undefined$/i;
 
 // Undocumented export
 export const transformRawValue = (input) => {
@@ -18,6 +20,12 @@ export const transformRawValue = (input) => {
   const boolMatch = input.match(boolRe);
   if (boolMatch !== null) return boolMatch[0].toLowerCase() === 'true';
 
+  const nullMatch = input.match(nullRe);
+  if (nullMatch !== null) return null;
+
+  const undefinedMatch = input.match(undefinedRe);
+  if (undefinedMatch !== null) return undefined;
+
   return value;
 };
 

src/index.test.js

@@ -17,7 +17,7 @@ it('allows pixels in unspecialized transform', () => runTest([
   ['top', '0px'],
 ], { top: 0 }));
 
-it('allows boolean values values', () => runTest([
+it('allows boolean values', () => runTest([
   ['boolTrue1', 'true'],
   ['boolTrue2', 'TRUE'],
   ['boolFalse1', 'false'],
@@ -29,6 +29,22 @@ it('allows boolean values values', () => runTest([
   boolFalse2: false,
 }));
 
+it('allows null values', () => runTest([
+  ['null1', 'null'],
+  ['null2', 'NULL'],
+], {
+  null1: null,
+  null2: null,
+}));
+
+it('allows undefined values', () => runTest([
+  ['undefined1', 'undefined'],
+  ['undefined2', 'UNDEFINED'],
+], {
+  undefined1: undefined,
+  undefined2: undefined,
+}));
+
 it('allows percent in unspecialized transform', () => runTest([
   ['top', '0%'],
 ], { top: '0%' }));