fixes #23; handle scss interpolation group, word boundary

Author: shellscape

lib/container.js

@@ -171,7 +171,6 @@ class Container extends Node {
   }
 
   toString () {
-    // console.log('container >', 'toString:', this.nodes.length, this.type, this.value);
     let result = this.nodes.map(String).join('');
 
     if (this.value) {

lib/node.js

@@ -49,8 +49,6 @@ module.exports = class Node {
   }
 
   toString () {
-    // console.log('node >', 'toString:', this.value);
-
     return [
       this.raws.before,
       String(this.value),

lib/parser.js

@@ -383,15 +383,23 @@ module.exports = class Parser {
     let nextToken = this.nextToken,
       word = this.currToken[1],
       rNumber = /^[\+\-]?((\d+(\.\d*)?)|(\.\d+))/,
+
+      // treat css-like groupings differently so they can be inspected,
+      // but don't address them as anything but a word, but allow hex values
+      // to pass through.
+      rNoFollow = /^(?!\#([a-z0-9]+))[\#\{\}]/gi,
+
       hasAt, indices;
 
-    while (nextToken && nextToken[0] === 'word') {
-      this.position ++;
+    if (!rNoFollow.test(word)) {
+      while (nextToken && nextToken[0] === 'word') {
+        this.position ++;
 
-      let current = this.currToken[1];
-      word += current;
+        let current = this.currToken[1];
+        word += current;
 
-      nextToken = this.nextToken;
+        nextToken = this.nextToken;
+      }
     }
 
     hasAt = indexesOf(word, '@');
@@ -454,7 +462,7 @@ module.exports = class Parser {
         });
 
         if (node.constructor.name === 'Word') {
-          node.isHex = /^#/.test(value);
+          node.isHex = /^#(.+)/.test(value);
           node.isColor = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(value);
         }
         else {

lib/tokenize.js

@@ -1,5 +1,7 @@
 'use strict';
 
+const openBracket = '{'.charCodeAt(0);
+const closeBracket = '}'.charCodeAt(0);
 const openParen = '('.charCodeAt(0);
 const closeParen = ')'.charCodeAt(0);
 const singleQuote = '\''.charCodeAt(0);
@@ -11,15 +13,17 @@ const colon = ':'.charCodeAt(0);
 const asterisk = '*'.charCodeAt(0);
 const minus = '-'.charCodeAt(0);
 const plus = '+'.charCodeAt(0);
+const pound = '#'.charCodeAt(0);
 const newline = '\n'.charCodeAt(0);
 const space = ' '.charCodeAt(0);
 const feed = '\f'.charCodeAt(0);
 const tab = '\t'.charCodeAt(0);
 const cr = '\r'.charCodeAt(0);
 const at = '@'.charCodeAt(0);
 const atEnd = /[ \n\t\r\{\(\)'"\\;,/]/g;
-const wordEnd = /[ \n\t\r\(\)\*:;@!&'"\+\|~>,\[\]\\]|\/(?=\*)/g;
-const wordEndNum = /[ \n\t\r\(\)\*:;@!&'"\-\+\|~>,\[\]\\]|\//g;
+const wordEnd = /[ \n\t\r\(\)\{\}\*:;@!&'"\+\|~>,\[\]\\]|\/(?=\*)/g;
+const wordEndNum = /[ \n\t\r\(\)\{\}\*:;@!&'"\-\+\|~>,\[\]\\]|\//g;
+const alphaNum = /^[a-z0-9]/i;
 
 const util = require('util');
 const TokenizeError = require('./errors/TokenizeError');
@@ -107,6 +111,22 @@ module.exports = function tokenize (input, options) {
         pos = next - 1;
         break;
 
+      case openBracket:
+        tokens.push(['{', '{',
+          line, pos  - offset,
+          line, next - offset,
+          pos
+        ]);
+        break;
+
+      case closeBracket:
+        tokens.push(['}', '}',
+          line, pos  - offset,
+          line, next - offset,
+          pos
+        ]);
+        break;
+
       case openParen:
         tokens.push(['(', '(',
           line, pos  - offset,
@@ -251,6 +271,17 @@ module.exports = function tokenize (input, options) {
           pos    = next;
 
         }
+        else if (code === pound && !alphaNum.test(css.slice(pos + 1, pos + 2))) {
+          next = pos + 1;
+
+          tokens.push(['#', css.slice(pos, next),
+            line, pos  - offset,
+            line, next - offset,
+            pos
+          ]);
+
+          pos = next - 1;
+        }
         // catch a regular slash, that isn't a comment
         else if (code === slash) {
           next = pos + 1;

test/function.js

@@ -133,6 +133,23 @@ describe('Parser → Function', () => {
         { type: 'paren', value: ')' }
       ]
     },
+    {
+      it: 'should parse calc function with scss interpolation #23',
+      test: 'calc(100% - #{$margin * 2px})',
+      expected: [
+        { type: 'func', value: 'calc' },
+        { type: 'paren', value: '(' },
+        { type: 'number', value: '100', unit: '%' },
+        { type: 'operator', value: '-' },
+        { type: 'word', value: '#' },
+        { type: 'word', value: '{' },
+        { type: 'word', value: '$margin' },
+        { type: 'operator', value: '*' },
+        { type: 'number', value: '2', unit: 'px' },
+        { type: 'word', value: '}' },
+        { type: 'paren', value: ')' }
+      ]
+    },
     {
       it: 'should parse nested functions',
       test: 'bar(baz(black, 10%), 10%)',

test/tokenize.js

@@ -7,11 +7,11 @@ describe('Tokenize', () => {
 
   let fixtures = [
     { value: '#ffffff', expectedLength: 1 },
+    { value: '#{ffffff}', expectedLength: 4 },
     { value: '#fff #000 #ccc #ddd', expectedLength: 7 },
     { value: '( calc(( ) ))word', expectedLength: 11 },
     { value: ' rgba( 34 , 45 , 54, .5 ) ', expectedLength: 19 },
     { value: 'w1 w2 w6 \n f(4) ( ) () \t "s\'t" \'st\\"2\'', expectedLength: 21 },
-    { value: '#ffffff', expectedLength: 1 },
     { value: 'Bond\\ 007', expectedLength: 4 },
     { value: ' \\"word\\\'"\\ \\\t ', expectedLength: 7 },
     { value: 'bar(baz(black, 10%), 10%)', expectedLength: 13 },
@@ -21,6 +21,7 @@ describe('Tokenize', () => {
   fixtures.forEach((fixture) => {
     it('should tokenize ' + fixture.value.replace(/\n/g, '\\n').replace(/\t/g, '\\t'), () => {
       let tokens = tokenize(fixture.value);
+
       expect(tokens.length).to.equal(fixture.expectedLength);
     });
   });