Use postcss-value-parser, add units

Author: jacobp100

package.json

@@ -4,9 +4,9 @@
   "description": "Convert CSS text to a React Native stylesheet object",
   "main": "dist/index.js",
   "scripts": {
-    "build-grammar": "nearleyc src/grammar.ne -o src/grammar.js",
-    "build": "npm run build-grammar; babel src --ignore test.js --out-dir dist",
-    "test": "npm run build-grammar; jest",
+    "build": "babel src --ignore test.js --out-dir dist",
+    "test": "jest",
+    "test:watch": "jest --watch",
     "prepublish": "npm run build"
   },
   "repository": {
@@ -35,9 +35,11 @@
     "jest": "^17.0.0"
   },
   "dependencies": {
+    "css-color-keywords": "^1.0.0",
     "css-color-list": "0.0.1",
     "fbjs": "^0.8.5",
     "nearley": "^2.7.7",
+    "postcss-value-parser": "^3.3.0",
     "postcss-values-parser": "^1.0.1"
   }
 }

pegjs.json

@@ -0,0 +1,71 @@
+module.exports = class TokenStream {
+  constructor(nodes, parent) {
+    this.nodes = nodes;
+    this.parent = parent;
+    this.lastFunction = null;
+    this.lastValue = null;
+  }
+
+  get node() {
+    return this.nodes[0];
+  }
+
+  hasTokens() {
+    return this.nodes.length > 0;
+  }
+
+  lookahead() {
+    return new TokenStream(this.nodes.slice(1), this.parent);
+  }
+
+  match(...tokenDescriptors) {
+    const node = this.node;
+
+    if (!node) return null;
+
+    /* eslint-disable no-restricted-syntax */
+    for (const tokenDescriptor of tokenDescriptors) {
+      const value = tokenDescriptor(node);
+
+      if (value !== null) {
+        this.nodes = this.nodes.slice(1);
+        this.lastFunction = null;
+        this.lastValue = value;
+        return value;
+      }
+    }
+    /* eslint-enable */
+
+    return null;
+  }
+
+  expect(...tokenDescriptors) {
+    const value = this.match(...tokenDescriptors);
+    if (value !== null) return value;
+    return this.throw();
+  }
+
+  matchFunction() {
+    const node = this.node;
+    if (node.type !== 'function') return null;
+    const value = new TokenStream(node.nodes, node);
+    this.nodes = this.nodes.slice(1);
+    this.lastFunction = value;
+    this.lastValue = null;
+    return value;
+  }
+
+  expectFunction() {
+    const value = this.matchFunction();
+    if (value !== null) return value;
+    return this.throw();
+  }
+
+  expectEmpty() {
+    if (this.hasTokens()) this.throw();
+  }
+
+  throw() {
+    throw new Error(`Unexpected token type: ${this.node.type}`);
+  }
+};

src/TokenStream.js

@@ -1,7 +1,8 @@
 /* eslint-disable no-param-reassign */
-const parser = require('postcss-values-parser/lib/index');
+const parse = require('postcss-value-parser');
 const camelizeStyleName = require('fbjs/lib/camelizeStyleName');
 const transforms = require('./transforms');
+const TokenStream = require('./TokenStream');
 
 const transformRawValue = input => (
   (input !== '' && !isNaN(input))
@@ -10,8 +11,9 @@ const transformRawValue = input => (
 );
 
 export const parseProp = (propName, value) => {
-  const ast = parser(value).parse();
-  return transforms[propName](ast);
+  const ast = parse(value).nodes;
+  const tokenStream = new TokenStream(ast);
+  return transforms[propName](tokenStream);
 };
 
 export const getStylesForProperty = (propName, inputValue, allowShorthand) => {