feat: Add support for interpolations

Author: niksy

lib/parse.js

@@ -14,18 +14,6 @@ var openInterpolation = "{".charCodeAt(0);
 var closeInterpolation = "}".charCodeAt(0);
 var isUnicodeRange = /^[a-f0-9?-]+$/i;
 
-function isOpenInterpolation(code, value, pos, interpolation) {
-  return (
-    interpolation !== null &&
-    interpolation.charCodeAt(0) === code &&
-    value.charCodeAt(pos + 1) === openInterpolation
-  );
-}
-
-function isCloseInterpolation(code) {
-  return code === closeInterpolation;
-}
-
 module.exports = function(input, options) {
   var tokens = [];
   var value = input;
@@ -70,7 +58,7 @@ module.exports = function(input, options) {
 
       prev = tokens[tokens.length - 1];
       if (
-        (code === closeParentheses || isCloseInterpolation(code)) &&
+        (code === closeParentheses || code === closeInterpolation) &&
         balanced
       ) {
         after = token;
@@ -177,18 +165,15 @@ module.exports = function(input, options) {
       code = value.charCodeAt(pos);
 
       // Open parentheses
-    } else if (
-      openParentheses === code ||
-      isOpenInterpolation(code, value, pos, interpolationPrefix)
-    ) {
+    } else if (openParentheses === code || openInterpolation === code) {
       var isFunction = openParentheses === code;
       // Whitespaces after open parentheses
-      next = isFunction ? pos : pos + 1;
+      next = pos;
       do {
         next += 1;
         code = value.charCodeAt(next);
       } while (code <= 32);
-      parenthesesOpenPos = isFunction ? pos : pos + 1;
+      parenthesesOpenPos = pos;
       token = {
         type: isFunction ? "function" : "interpolation",
         sourceIndex: pos - name.length,
@@ -261,7 +246,7 @@ module.exports = function(input, options) {
 
       // Close parentheses
     } else if (
-      (code === closeParentheses || isCloseInterpolation(code)) &&
+      (code === closeParentheses || code === closeInterpolation) &&
       balanced
     ) {
       pos += 1;
@@ -293,24 +278,22 @@ module.exports = function(input, options) {
           code === colon ||
           code === slash ||
           code === openParentheses ||
-          isOpenInterpolation(code, value, pos, interpolationPrefix) ||
+          code === openInterpolation ||
+          (interpolationPrefix && code === interpolationPrefix.charCodeAt(0)) ||
           (code === star &&
             parent &&
             parent.type === "function" &&
             parent.value === "calc") ||
           (code === slash &&
             parent.type === "function" &&
             parent.value === "calc") ||
-          ((code === closeParentheses || isCloseInterpolation(code)) &&
+          ((code === closeParentheses || code === closeInterpolation) &&
             balanced)
         )
       );
       token = value.slice(pos, next);
 
-      if (
-        openParentheses === code ||
-        isOpenInterpolation(code, value, pos, interpolationPrefix)
-      ) {
+      if (openParentheses === code || openInterpolation === code) {
         name = token;
       } else if (
         (uLower === token.charCodeAt(0) || uUpper === token.charCodeAt(0)) &&

test/index.js

@@ -21,7 +21,7 @@ test("ValueParser", function(tp) {
   });
 
   tp.test("walk", function(t) {
-    t.plan(5);
+    t.plan(7);
     var result;
 
     result = [];
@@ -117,6 +117,92 @@ test("ValueParser", function(tp) {
 
     result = [];
 
+    parser("fn( ) --#{fn2( fn3())}", { interpolationPrefix: "#" }).walk(
+      function(node) {
+        if (node.type === "interpolation") {
+          result.push(node);
+        }
+      }
+    );
+
+    t.deepEqual(
+      result,
+      [
+        {
+          type: "interpolation",
+          sourceIndex: 8,
+          value: "#",
+          before: "",
+          after: "",
+          nodes: [
+            {
+              type: "function",
+              sourceIndex: 10,
+              value: "fn2",
+              before: " ",
+              after: "",
+              nodes: [
+                {
+                  type: "function",
+                  sourceIndex: 15,
+                  value: "fn3",
+                  before: "",
+                  after: "",
+                  nodes: []
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "should process all interpolations with word"
+    );
+
+    result = [];
+
+    parser("fn( ) /#{fn2( fn3())}", { interpolationPrefix: "#" }).walk(function(
+      node
+    ) {
+      if (node.type === "interpolation") {
+        result.push(node);
+      }
+    });
+
+    t.deepEqual(
+      result,
+      [
+        {
+          type: "interpolation",
+          sourceIndex: 7,
+          value: "#",
+          before: "",
+          after: "",
+          nodes: [
+            {
+              type: "function",
+              sourceIndex: 9,
+              value: "fn2",
+              before: " ",
+              after: "",
+              nodes: [
+                {
+                  type: "function",
+                  sourceIndex: 14,
+                  value: "fn3",
+                  before: "",
+                  after: "",
+                  nodes: []
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "should process all interpolations with divider (/)"
+    );
+
+    result = [];
+
     parser("fn( ) fn2( fn3())").walk(function(node) {
       if (node.type === "function") {
         result.push(node);

test/parse.js

@@ -115,6 +115,70 @@ var tests = [
       }
     ]
   },
+  {
+    message: "should process interpolation with word",
+    fixture: "--#{name()}",
+    options: {
+      interpolationPrefix: "#"
+    },
+    expected: [
+      {
+        type: "word",
+        sourceIndex: 0,
+        value: "--"
+      },
+      {
+        type: "interpolation",
+        sourceIndex: 2,
+        value: "#",
+        before: "",
+        after: "",
+        nodes: [
+          {
+            type: "function",
+            sourceIndex: 4,
+            value: "name",
+            before: "",
+            after: "",
+            nodes: []
+          }
+        ]
+      }
+    ]
+  },
+  {
+    message: "should process interpolation with divider (/)",
+    fixture: "/#{name()}",
+    options: {
+      interpolationPrefix: "#"
+    },
+    expected: [
+      {
+        type: "div",
+        sourceIndex: 0,
+        value: "/",
+        before: "",
+        after: ""
+      },
+      {
+        type: "interpolation",
+        sourceIndex: 1,
+        value: "#",
+        before: "",
+        after: "",
+        nodes: [
+          {
+            type: "function",
+            sourceIndex: 3,
+            value: "name",
+            before: "",
+            after: "",
+            nodes: []
+          }
+        ]
+      }
+    ]
+  },
   {
     message: "should process nested functions",
     fixture: "((()))",

test/stringify.js

@@ -61,6 +61,20 @@ var tests = [
       interpolationPrefix: "#"
     }
   },
+  {
+    message: "Should correctly process interpolation with word",
+    fixture: "-#{url(\n)}",
+    options: {
+      interpolationPrefix: "#"
+    }
+  },
+  {
+    message: "Should correctly process interpolation with divider (/)",
+    fixture: "/#{url(\n)}",
+    options: {
+      interpolationPrefix: "#"
+    }
+  },
   {
     message: "Should correctly process empty url with newline (LF)",
     fixture: "url(\n\n\n)"