adding more operator parsing conditions, limiting certain operator conditions to calc(), correcting operator parse errors

Author: shellscape

lib/parser.js

@@ -42,7 +42,6 @@ module.exports = class Parser {
 
     this.current = value;
     this.tokens = tokenize(input, this.options);
-    // console.log(this.tokens);
   }
 
   parse () {
@@ -140,23 +139,42 @@ module.exports = class Parser {
       node;
 
     if (char === '+' || char === '-') {
-      if (this.position > 0) {
-        if (!this.options.loose) {
-          if (this.prevToken[0] !== 'space') {
-            this.error('Syntax Error', this.currToken);
+      // only inspect if the operator is not the first token, and we're only
+      // within a calc() function: the only spec-valid place for math expressions
+      if (!this.options.loose) {
+        if (this.position > 0) {
+          if (this.current.type === 'func' && this.current.value === 'calc') {
+            if (this.prevToken[0] !== 'space') {
+              this.error('Syntax Error', this.currToken);
+            }
+            // valid: calc(1 - +2)
+            // invalid: calc(1 -+2)
+            else if (this.nextToken[0] !== 'space' && this.nextToken[0] !== 'word') {
+              this.error('Syntax Error', this.currToken);
+            }
+            // valid: calc(1 - +2)
+            // invalid: calc(1 -2)
+            else if (this.nextToken[0] === 'word' && this.current.last.type !== 'operator') {
+              this.error('Syntax Error', this.currToken);
+            }
           }
-          else if (this.nextToken[0] !== 'space') {
+          // if we're not in a function and someone has doubled up on operators,
+          // or they're trying to perform a calc outside of a calc
+          // eg. +-4px or 5+ 5, throw an error
+          else if (this.nextToken[0] === 'space'
+                  || this.nextToken[0] === 'operator'
+                  || this.prevToken[0] === 'operator') {
             this.error('Syntax Error', this.currToken);
           }
         }
       }
 
-      if ((!this.current.nodes.length || (this.current.last && this.current.last.type === 'operator')) && this.nextToken[0] === 'word') {
+      // if ((!this.current.nodes.length || (this.current.last && this.current.last.type === 'operator')) && this.nextToken[0] === 'word') {
+      if (this.nextToken[0] === 'word') {
         return this.word();
       }
     }
 
-
     node = new Operator({
       value: this.currToken[1],
       source: {

test/function.js

@@ -58,6 +58,20 @@ describe('Parser → Function', () => {
         { type: 'paren', value: ')' }
       ]
     },
+    {
+      it: 'should parse calc function with nutty numbers',
+      test: 'calc(1px + -2vw - 4px)',
+      expected: [
+        { type: 'func', value: 'calc' },
+        { type: 'paren', value: '(' },
+        { type: 'number', value: '1', unit: 'px' },
+        { type: 'operator', value: '+' },
+        { type: 'number', value: '-2', unit: 'vw' },
+        { type: 'operator', value: '-' },
+        { type: 'number', value: '4', unit: 'px' },
+        { type: 'paren', value: ')' }
+      ]
+    },
     {
       it: 'should parse nested calc functions',
       test: 'calc(((768px - 100vw) / 2) - 15px)',
@@ -117,6 +131,8 @@ describe('Parser → Function', () => {
       let ast = new Parser(fixture.test).parse(),
         index = 0;
 
+      // console.log(ast.first.first.nodes);
+
       ast.first.walk((node) => {
         let expected = fixture.expected[index];
         index ++;

test/number.js

@@ -39,17 +39,33 @@ describe('Parser → Number', () => {
       test: '5+ 5',
       expected: { throw: true }
     },
+    {
+      test: 'calc(5+ 5)',
+      expected: { throw: true }
+    },
     {
       test: '5 +5',
+      expected: { value: '+5', unit: '', length: 2 }
+    },
+    {
+      test: 'calc(5 +5)',
       expected: { throw: true }
     },
     {
-      test: '5+5',
+      test: '5px+5px',
+      expected: { value: '+5', unit: 'px', length: 2 }
+    },
+    {
+      test: 'calc(5+5)',
       expected: { throw: true }
     },
     {
       test: '5 + 5',
-      expected: { value: '5', unit: '', length: 3 }
+      expected: { throw: true }
+    },
+    {
+      test: 'calc(5 + 5)',
+      expected: { value: ')', length: 5 }
     },
     {
       test: '.',
@@ -58,6 +74,18 @@ describe('Parser → Number', () => {
     {
       test: '.rem',
       expected: { fail: true, length: 1 }
+    },
+    {
+      test: '-2px',
+      expected: { value: '-2', unit: 'px', length: 1 }
+    },
+    {
+      test: '-16px',
+      expected: { value: '-16', unit: 'px', length: 1 }
+    },
+    {
+      test: '-16px -1px -1px -16px',
+      expected: { value: '-16', unit: 'px', length: 4 }
     }
   ];
 
@@ -77,7 +105,15 @@ describe('Parser → Number', () => {
       else {
         parse();
 
-        expect(ast.first.nodes.length).to.equal(fixture.expected.length);
+        let targetNode = ast.first;
+
+        // support testing calc
+        if (targetNode.first.nodes && targetNode.first.nodes.length) {
+          targetNode = targetNode.first;
+          node = targetNode.last;
+        }
+
+        expect(targetNode.nodes.length).to.equal(fixture.expected.length);
 
         if (fixture.expected.fail) {
           expect(node.value).to.equal(fixture.test);
@@ -117,11 +153,15 @@ describe('Parser → Number : Loose', () => {
     },
     {
       test: '5+5',
-      expected: { value: '5', unit: '', length: 3 }
+      expected: { value: '+5', unit: '', length: 2 }
     },
     {
       test: '5+-+-+-+5',
       expected: { value: '+5', unit: '', length: 8 }
+    },
+    {
+      test: '-16px -1px -1px -16px',
+      expected: { value: '-16', unit: 'px', length: 4 }
     }
   ];
 

test/tokenize.js

@@ -14,13 +14,14 @@ describe('Tokenize', () => {
     { value: '#ffffff', expectedLength: 1 },
     { value: 'Bond\\ 007', expectedLength: 4 },
     { value: ' \\"word\\\'"\\ \\\t ', expectedLength: 7 },
-    { value: 'bar(baz(black, 10%), 10%)', expectedLength: 13 }
+    { value: 'bar(baz(black, 10%), 10%)', expectedLength: 13 },
+    { value: '-16px -1px -1px -16px', expectedLength: 11 }
   ];
 
   fixtures.forEach((fixture) => {
     it('should tokenize ' + fixture.value.replace(/\n/g, '\\n').replace(/\t/g, '\\t'), () => {
       let tokens = tokenize(fixture.value);
-
+      console.log(tokens);
       expect(tokens.length).to.equal(fixture.expectedLength);
     });
   });