Dropping closing brace when used in "style" attribute

[warrickbayman]

• Maizzle Version: 4.3.0
• Node.js Version: 18.11.0

I'm getting something similar to #797 when using the Laravel blade {!!...!!} syntax inside the "style" attribute. I found that it only happens if I also have tailwind classes on the same element. If I have the following variable:

variables: {
    colors: {
        primary: '{!! $primaryColor !!}'
    }
}

this:

<td class="p-2" style="color: {{{ page.variables.colors.primary }}}"></td>

becomes:

<td style="color: {!! $primaryColor !!; padding: 8px"></td>

dropping the closing brace.

If I remove the classes from the element, then it works correctly:

<td style="color: {!! $primaryColor !!};"></td>

If I change to {{..}} blade syntax then it works, but I have to then use the @ to ignore it. The problem is that if I have nested components, I have to add additional '@' symbols depending on the depth of those components. So I end up with variables that look like this:

variables: {
    colors: {
        primary1: '@{{ $primaryColor }}',
        primary2: '@@{{ $primaryColor }}',
        primary3: '@@@{{ $primaryColor }}',
    }
}

[cossssmin]

Using braces in inline CSS isn't supported, they're basically invalid CSS values that will break when PostCSS handles them, and the inliner also doesn't support them properly - hence the issues you're having.

I suggest doing the same thing as in #797 - use replaceStrings to replace a placeholder value after the template is rendered (i.e. in the afterTransformers event).

[warrickbayman]

Thanks @cossssmin. I actually did use replaceStrings which worked pretty well. Thanks for Maizzle, by the way. It's made a big difference in some of our projects.