Convert string and ident interpolations to proper Stylus code

[kizu]

Take this Scss example:

.foo {
  content: "he#{'ll'}o";
  position: abs#{'ol'}ute;
}

Right now it converts to a code that throws an error:

.foo
  content: "he{"ll"}o"
  position: abs{"ol"}ute

While we'd need to convert it into something like this:

.foo
  content: "he" + 'll' +"o"
  position: unquote('abs' + "ol" + 'ute')

1. When the interpolation is inside the string, we need to convert it just into the string concatenation.
2. When the interpolation is inside an ident, we need to convert it into an unquote with the string concatenation inside.

(there could be other cases with the interpolation I didn't cover there though)

[samccone]

thanks @kizu

[brossi]

Here's another example of an interpolation error:

original.scss

@mixin circle-animation-details($name){
    #{$name}animation-name: spin;
    #{$name}animation-duration: 1250ms;
    #{$name}animation-iteration-count: infinite;
    #{$name}animation-timing-function: linear;
}

output.styl

circle-animation-details($name)
  {(interpolation nil $name nil), "animation-name"}: spin
  {(interpolation nil $name nil), "animation-duration"}: 1250ms
  {(interpolation nil $name nil), "animation-iteration-count"}: infinite
  {(interpolation nil $name nil), "animation-timing-function"}: linear

correct.styl

circle-animation-details($name)
  {'$name' + 'animation-name'}: spin
  {'$name' + 'animation-duration'}: 1250ms
  {'$name' + 'animation-iteration-count'}: infinite
  {'$name' + 'animation-timing-function'}: linear