• Node Version: 8.3.0
• NPM Version: 5.3.0
• postcss-values-parser Version: 1.3.0

This issue is regarding a problem with:

• Standard CSS
• LESS
• SCSS
• SASS

"a #{"1"} b #{2} c"

Actual Behavior

Parsed as:

StringNode {
  value: 'a #{'
}
NumberNode {
  value: '1'
}
StringNode {
  value: '} b #{2} c'
}

Expected Behavior

Proposal:

Similar to how Babylon parses template literals in JavaScript: astexplorer

Something like this:

InterpolationStringNode {
  expressions: [
    StringNode {
      value: '1'
    },
    NumberNode {
      value: '2'
    }
  ],
  quasis: [
    InterpolationStringElementNode {
      value: 'a '
    },
    InterpolationStringElementNode {
      value: ' b '
    },
    InterpolationStringElementNode {
      value: ' c'
    }
  ]
}

(The "expressions" and "quasis" names comes from Babylon’s AST. I made up "InterpolationStringNode". I don’t care about what they’re called.)

When you encounter #{ in a string

1. Push the string so far to quasis
2. Recursively parse with postcss-values-parser until the next unbalanced }. (Error handling, if no ending } is found throw TokenizeError: Unclosed interpolation or something.)
3. Start to parse as a string again (until the end quote or the next #{).

Notes:

• Interpolations can contain any expression, even another string with
  interpolations (recursively).
• It is possible to escape interpolations: "\#{1}" is a single StringNode.

How can we reproduce the behavior?

const parse = require("postcss-values-parser")

const test = '"a #{"1"} b #{2} c"'
const ast = parse(test, {loose: true}).parse()

console.dir(ast, {colors: true, depth: null})

Related

• SASS Interpolation Not Parsed in Loose Mode #23
• SCSS: String contents can be changed in nested interpolations prettier/prettier#2734