feat: Add support for interpolations

README.md

@@ -183,10 +183,26 @@ whether the first character in the argument is a quotation mark.
 ] }
 ```
 
+### interpolation
+
+An interpolation of value, e.g. Sass interpolation `#{rgb(0,0,0)}`.
+
+Interpolation nodes have nodes all other nodes nested within them.
+
+Additional properties:
+
+- **value**: Interpolation prefix, e.g. `#` in `#{rgb(0,0,0)}`.
+- **before**: Whitespace after the opening curly bracket and before the first value,
+  e.g. `  ` in `#{ rgb(0,0,0)}`.
+- **after**: Whitespace before the closing curly bracket and after the last value,
+  e.g. `  ` in `#{rgb(0,0,0)  }`.
+- **nodes**: More nodes representing the arguments to the interpolation.
+- **unclosed**: `true` if the curly bracket was not closed properly. e.g. `#{ unclosed-interpolation  `.
+
 ### unicode-range
 
-The unicode-range CSS descriptor sets the specific range of characters to be 
-used from a font defined by @font-face and made available 
+The unicode-range CSS descriptor sets the specific range of characters to be
+used from a font defined by @font-face and made available
 for use on the current page (`unicode-range: U+0025-00FF`).
 
 Node-specific properties:
@@ -242,10 +258,16 @@ The `callback` is invoked with three arguments: `callback(node, index, nodes)`.
 
 Returns the `valueParser` instance.
 
-### var parsed = valueParser(value)
+### var parsed = valueParser(value, options)
 
 Returns the parsed node tree.
 
+### options
+
+#### options.interpolationPrefix
+
+Prefix used for interpolation, e.g. `#` for Sass interpolation.
+
 ### parsed.nodes
 
 The array of nodes.

lib/index.d.ts

@@ -47,6 +47,18 @@ declare namespace postcssValueParser {
     nodes: Node[];
   }
 
+  interface InterpolationNode
+    extends BaseNode,
+      ClosableNode,
+      AdjacentAwareNode {
+    type: "interpolation";
+
+    /**
+     * Nodes inside the interpolation
+     */
+    nodes: Node[];
+  }
+
   interface SpaceNode extends BaseNode {
     type: "space";
   }
@@ -75,6 +87,7 @@ declare namespace postcssValueParser {
     | CommentNode
     | DivNode
     | FunctionNode
+    | InterpolationNode
     | SpaceNode
     | StringNode
     | UnicodeRangeNode
@@ -124,6 +137,13 @@ declare namespace postcssValueParser {
     walk(callback: WalkCallback, bubble?: boolean): this;
   }
 
+  interface ValueParserOptions {
+    /**
+     * Prefix used for interpolation, e.g. `#` for Sass interpolation.
+     */
+    interpolationPrefix?: string;
+  }
+
   interface ValueParser {
     /**
      * Decompose a CSS dimension into its numeric and unit part
@@ -162,8 +182,9 @@ declare namespace postcssValueParser {
      * Parse a CSS value into a series of nodes to operate on
      *
      * @param value The value to parse
+     * @param options Value parser options
      */
-    (value: string): ParsedValue;
+    (value: string, options?: ValueParserOptions): ParsedValue;
   }
 }
 

lib/index.js

@@ -2,12 +2,12 @@ var parse = require("./parse");
 var walk = require("./walk");
 var stringify = require("./stringify");
 
-function ValueParser(value) {
+function ValueParser(value, options) {
   if (this instanceof ValueParser) {
-    this.nodes = parse(value);
+    this.nodes = parse(value, options);
     return this;
   }
-  return new ValueParser(value);
+  return new ValueParser(value, options);
 }
 
 ValueParser.prototype.toString = function() {

lib/parse.js

@@ -10,9 +10,11 @@ var star = "*".charCodeAt(0);
 var uLower = "u".charCodeAt(0);
 var uUpper = "U".charCodeAt(0);
 var plus = "+".charCodeAt(0);
+var openInterpolation = "{".charCodeAt(0);
+var closeInterpolation = "}".charCodeAt(0);
 var isUnicodeRange = /^[a-f0-9?-]+$/i;
 
-module.exports = function(input) {
+module.exports = function(input, options) {
   var tokens = [];
   var value = input;
 
@@ -35,6 +37,17 @@ module.exports = function(input) {
   var before = "";
   var after = "";
 
+  options = options || {};
+  var interpolationPrefix = null;
+  var interpolationPrefixCode = null;
+  if (
+    typeof options.interpolationPrefix !== "undefined" &&
+    options.interpolationPrefix !== null
+  ) {
+    interpolationPrefix = options.interpolationPrefix;
+    interpolationPrefixCode = interpolationPrefix.charCodeAt(0);
+  }
+
   while (pos < max) {
     // Whitespaces
     if (code <= 32) {
@@ -46,7 +59,10 @@ module.exports = function(input) {
       token = value.slice(pos, next);
 
       prev = tokens[tokens.length - 1];
-      if (code === closeParentheses && balanced) {
+      if (
+        (code === closeParentheses || code === closeInterpolation) &&
+        balanced
+      ) {
         after = token;
       } else if (prev && prev.type === "div") {
         prev.after = token;
@@ -151,7 +167,8 @@ module.exports = function(input) {
       code = value.charCodeAt(pos);
 
       // Open parentheses
-    } else if (openParentheses === code) {
+    } else if (openParentheses === code || openInterpolation === code) {
+      var isFunction = openParentheses === code;
       // Whitespaces after open parentheses
       next = pos;
       do {
@@ -160,9 +177,9 @@ module.exports = function(input) {
       } while (code <= 32);
       parenthesesOpenPos = pos;
       token = {
-        type: "function",
+        type: isFunction ? "function" : "interpolation",
         sourceIndex: pos - name.length,
-        value: name,
+        value: isFunction ? name : interpolationPrefix,
         before: value.slice(parenthesesOpenPos + 1, next)
       };
       pos = next;
@@ -230,7 +247,10 @@ module.exports = function(input) {
       name = "";
 
       // Close parentheses
-    } else if (closeParentheses === code && balanced) {
+    } else if (
+      (code === closeParentheses || code === closeInterpolation) &&
+      balanced
+    ) {
       pos += 1;
       code = value.charCodeAt(pos);
 
@@ -260,19 +280,22 @@ module.exports = function(input) {
           code === colon ||
           code === slash ||
           code === openParentheses ||
+          (interpolationPrefix !== null && code === openInterpolation) ||
+          (interpolationPrefix !== null && code === interpolationPrefixCode) ||
           (code === star &&
             parent &&
             parent.type === "function" &&
             parent.value === "calc") ||
           (code === slash &&
             parent.type === "function" &&
             parent.value === "calc") ||
-          (code === closeParentheses && balanced)
+          ((code === closeParentheses || code === closeInterpolation) &&
+            balanced)
         )
       );
       token = value.slice(pos, next);
 
-      if (openParentheses === code) {
+      if (openParentheses === code || openInterpolation === code) {
         name = token;
       } else if (
         (uLower === token.charCodeAt(0) || uUpper === token.charCodeAt(0)) &&

lib/stringify.js

@@ -17,16 +17,17 @@ function stringifyNode(node, custom) {
     return (node.before || "") + value + (node.after || "");
   } else if (Array.isArray(node.nodes)) {
     buf = stringify(node.nodes, custom);
-    if (type !== "function") {
+    if (type !== "function" && type !== "interpolation") {
       return buf;
     }
+    var isFunction = type === "function";
     return (
       value +
-      "(" +
+      (isFunction ? "(" : "{") +
       (node.before || "") +
       buf +
       (node.after || "") +
-      (node.unclosed ? "" : ")")
+      (node.unclosed ? "" : isFunction ? ")" : "}")
     );
   }
   return value;

lib/walk.js

@@ -9,7 +9,7 @@ module.exports = function walk(nodes, cb, bubble) {
 
     if (
       result !== false &&
-      node.type === "function" &&
+      (node.type === "function" || node.type === "interpolation") &&
       Array.isArray(node.nodes)
     ) {
       walk(node.nodes, cb, bubble);

test/index.js

@@ -21,7 +21,7 @@ test("ValueParser", function(tp) {
   });
 
   tp.test("walk", function(t) {
-    t.plan(4);
+    t.plan(7);
     var result;
 
     result = [];
@@ -74,6 +74,135 @@ 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: 6,
+          value: "#",
+          before: "",
+          after: "",
+          nodes: [
+            {
+              type: "function",
+              sourceIndex: 8,
+              value: "fn2",
+              before: " ",
+              after: "",
+              nodes: [
+                {
+                  type: "function",
+                  sourceIndex: 13,
+                  value: "fn3",
+                  before: "",
+                  after: "",
+                  nodes: []
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "should process all interpolations"
+    );
+
+    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);