feat: Add support for interpolations

Author: niksy

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

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,23 @@ 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) {
+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;
 
@@ -35,6 +49,15 @@ module.exports = function(input) {
   var before = "";
   var after = "";
 
+  options = options || {};
+  var interpolationPrefix = null;
+  if (
+    typeof options.interpolationPrefix !== "undefined" &&
+    options.interpolationPrefix !== null
+  ) {
+    interpolationPrefix = options.interpolationPrefix;
+  }
+
   while (pos < max) {
     // Whitespaces
     if (code <= 32) {
@@ -46,7 +69,10 @@ module.exports = function(input) {
       token = value.slice(pos, next);
 
       prev = tokens[tokens.length - 1];
-      if (code === closeParentheses && balanced) {
+      if (
+        (code === closeParentheses || isCloseInterpolation(code)) &&
+        balanced
+      ) {
         after = token;
       } else if (prev && prev.type === "div") {
         prev.after = token;
@@ -151,18 +177,22 @@ module.exports = function(input) {
       code = value.charCodeAt(pos);
 
       // Open parentheses
-    } else if (openParentheses === code) {
+    } else if (
+      openParentheses === code ||
+      isOpenInterpolation(code, value, pos, interpolationPrefix)
+    ) {
+      var isFunction = openParentheses === code;
       // Whitespaces after open parentheses
-      next = pos;
+      next = isFunction ? pos : pos + 1;
       do {
         next += 1;
         code = value.charCodeAt(next);
       } while (code <= 32);
-      parenthesesOpenPos = pos;
+      parenthesesOpenPos = isFunction ? pos : pos + 1;
       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 +260,10 @@ module.exports = function(input) {
       name = "";
 
       // Close parentheses
-    } else if (closeParentheses === code && balanced) {
+    } else if (
+      (code === closeParentheses || isCloseInterpolation(code)) &&
+      balanced
+    ) {
       pos += 1;
       code = value.charCodeAt(pos);
 
@@ -260,19 +293,24 @@ module.exports = function(input) {
           code === colon ||
           code === slash ||
           code === openParentheses ||
+          isOpenInterpolation(code, value, pos, interpolationPrefix) ||
           (code === star &&
             parent &&
             parent.type === "function" &&
             parent.value === "calc") ||
           (code === slash &&
             parent.type === "function" &&
             parent.value === "calc") ||
-          (code === closeParentheses && balanced)
+          ((code === closeParentheses || isCloseInterpolation(code)) &&
+            balanced)
         )
       );
       token = value.slice(pos, next);
 
-      if (openParentheses === code) {
+      if (
+        openParentheses === code ||
+        isOpenInterpolation(code, value, pos, interpolationPrefix)
+      ) {
         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(5);
     var result;
 
     result = [];
@@ -74,6 +74,49 @@ 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())").walk(function(node) {
       if (node.type === "function") {
         result.push(node);

test/parse.js

@@ -89,6 +89,32 @@ var tests = [
       }
     ]
   },
+  {
+    message: "should process interpolation",
+    fixture: "#{name()}",
+    options: {
+      interpolationPrefix: "#"
+    },
+    expected: [
+      {
+        type: "interpolation",
+        sourceIndex: 0,
+        value: "#",
+        before: "",
+        after: "",
+        nodes: [
+          {
+            type: "function",
+            sourceIndex: 2,
+            value: "name",
+            before: "",
+            after: "",
+            nodes: []
+          }
+        ]
+      }
+    ]
+  },
   {
     message: "should process nested functions",
     fixture: "((()))",
@@ -1319,6 +1345,6 @@ test("Parse", function(t) {
   t.plan(tests.length);
 
   tests.forEach(function(opts) {
-    t.deepEqual(parse(opts.fixture), opts.expected, opts.message);
+    t.deepEqual(parse(opts.fixture, opts.options), opts.expected, opts.message);
   });
 });

test/stringify.js

@@ -54,6 +54,13 @@ var tests = [
     message: "Should correctly process empty url with newline (LF)",
     fixture: "url(\n)"
   },
+  {
+    message: "Should correctly process interpolation",
+    fixture: "#{url(\n)}",
+    options: {
+      interpolationPrefix: "#"
+    }
+  },
   {
     message: "Should correctly process empty url with newline (LF)",
     fixture: "url(\n\n\n)"
@@ -92,7 +99,11 @@ test("Stringify", function(t) {
   t.plan(tests.length + 4);
 
   tests.forEach(function(opts) {
-    t.equal(stringify(parse(opts.fixture)), opts.fixture, opts.message);
+    t.equal(
+      stringify(parse(opts.fixture, opts.options)),
+      opts.fixture,
+      opts.message
+    );
   });
 
   var tokens = parse(" rgba(12,  54, 65 ) ");