Unexpected curly bracket cut in production build

[slavarazum]

• Maizzle Version: 2.3.1
• Node.js Version: 12.18.1

Let's take example:

<raw>
  <div style="background-image: url('{{ $some }}')">
    Some test
  </div>
</raw>

it transpiles correctly in local build mode:

<div style="background-image: url('{{ $some }}')">
  Some test
</div>

and we got this in production build:

<div style="background-image: url('{{ $some}')">
  Some test
</div>

One closing bracket is missing.

Also, we can make raw expression with this syntax and will take the same result:

<div style="background-image: url('@{{ $some }}')">
  Some test
</div>

[cossssmin]

It's an issue with mergeLongHand, specifically this line is wrong and mergeLongHand will always be enabled:

https://github.com/maizzle/framework/blob/9da0028c98ee7ca678fc294755bf33bad0cbe94f/src/transformers/inline.js#L36

I'll push a fix soon so you can actually disable it as explained in the docs linked above.

PostCSS is causing this issue, it's tripping on that {{ }} in the value. Until we can get a fix in posthtml-postcss-merge-longhand, the only way around it will be to disable mergeLongHand (which will actually work in the next Maizzle release).

[cossssmin]

@slavarazum published v2.3.2, disabling mergeLongHand now works (and it's disabled by default); the curly braces are output correctly now, please update and give it a try.

[slavarazum]

Great, now it works as expected! Thank you for quick response.

[cossssmin]

Thanks for confirming. I'll go ahead and close the issue since it's not affecting Maizzle by default anymore, and will try to fix it in that PostHTML plugin 👍

[cossssmin]

Fixed the plugin (https://github.com/posthtml/posthtml-postcss-merge-longhand/commit/523935f1e5ad45ffdaf24bf9113a7908245f6e00), there was a loose regex that was catching the second } in {{ }}. You should now be able to safely use mergeLonghand: true in your inlineCSS options, in order to keep the old behavior of shorthanding inlined CSS.

I think I'll keep mergeLonghand disabled by default, so that the HTML output is what you'd expect.