Whitelist handlebars for text color > inline style

[lando-danziger]

I need to include a liquid shortcode for a text colour - as the data is being passed from an api on the esp.

In my template I write:
<td class="px-s py-xs" align="center" bgcolor="{{{ page.bannerContentVoucherBackground || '#FB2815' }}}" style="color:{{{ page.bannerContentVoucherTextColor || '#FB2815' }}}">

My shortcode swaps are defined in my braze config - generally works great - it's fine on the bg attribute. However the build process errors a shortcode as an inline style.

CssSyntaxError: <css input>:1:16: Unknown word
...
reason: 'Unknown word',
  source: 'div { color: {{something}}; padding-left: 12px; padding-right: 12px; padding-top: 8px; padding-bottom: 8px; }',

Atm I am inserting a word "replaceString_1" and then using replace strings to swap it to @{{post_banner_content.voucherTextColor; | default: 'white'}}

Is there a way to whitelist using handlebars in this context? It used to work in Maizzle 3.

It is slightly related to the issues other people have with classes - but it's possible to escape and ignore with extra {} or @. In this case it doesn't seem to work.

I can't seem to work out how to do it in this case. Any help appreciated

[cossssmin]

Where is {{ something }} coming from?

That is a PostCSS error, by the looks of it being thrown by shorthandInlineCSS enabled in your config.

[cossssmin]

OK, so if you're looking to do something like this:

<p class="px-2 py-3" style="color: {{{ page.textColor || '@{{ textColor }}' }}}">
  ...
</p>

... in order for it to be compiled to this:

<p style="color: {{ textColor }}; padding: 12px 8px">
  ...
</p>

... it's not possible, because color: {{ textColor }} can't be parsed by PostCSS - this happens when you have shorthandInlineCSS: true in your config.

Either disable shorthandInlineCSS (remove or set to false), or set your value to a string that you later replace, as you currently do with replaceStrings.