CodeBlock support within CSS

[mattisherwood]

We have an email template system that is needing some codeblock {{Variables}} placed within the CSS. e.g.

.button.primary {
    background-color: {{StoreColor}};
}

and I was hoping that they would be returned as...

<a class="button primary" href="#" style="background-color:{{StoreColor}}">...</a>

...particularly when I found that HBS is included by default in juice.codeBlocks.

However, I've found they're actually returned as...

<a class="button primary" href="#" style="background-color:{}">...</a>

I did some digging and found that the encoding/decoding makes use of HTML comments in line 20 & 29 in juice/cherio.js.

return '<!--' + key + ' ' + blocks[key].start + subMatch + blocks[key].end + ' -->';
...
var re = new RegExp('<!--' + key + ' ' + blocks[key].start + '((.|\\s)*?)' + blocks[key].end + ' -->', 'g');

Is that why? Does it currently support HBS in the HTML but not in the CSS?

Do you know if that might be something that could be easily fixed so they can also be retained within the CSS?

Many many thanks.

[mattisherwood]

Actually, an update - we've now swapped to using <%StoreColor%> within the CSS instead, as that does work.

We then parse the source afterwards with...

source
  .replace(/<%/g, '{{')
  .replace(/%>/g, '}}')

...to return it to the required format.

It's a bit of a workaround, but enough for us for the time being.

I'll let you decide if you want to close the issue or not.