search

Automattic / juice

Juice inlines CSS stylesheets into your HTML source.
MIT License
3.09k stars 220 forks source link

CodeBlock support within CSS #397

Open mattisherwood opened 2 years ago

mattisherwood commented 2 years ago

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 commented 2 years ago

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.