posthtml / posthtml-expressions

Use variables, JS-like expressions, and even markup-powered logic in your HTML.
Other
123 stars 20 forks source link

Expression ignoring causing unexpected rendering in text nodes #156

Closed cossssmin closed 1 year ago

cossssmin commented 1 year ago

See https://github.com/posthtml/posthtml-expressions/tree/textnode-ignore for a reproduction, just run the core tests:

npx ava test/test-core.js

TL;DR the regex used to support expression ignoring seems to not work on text nodes correctly. Also, the one for ignored unescaped delimiters (i.e. @{{{ foo }}}) doesn't seem to work at all.


When you have a text node with mixed expressions {{ foo }} and ignored expressions @{{ foo }}, they are rendered incorrectly.

Given we set foo: 'bar' in locals, this is what is currently happening:

Source:

ignored: @{{ foo }}
ignoredUnescaped: @{{{ foo }}}
rendered: {{ foo }}

Expected:

+ ignored: {{ foo }}
+ ignoredUnescaped: {{{ foo }}}
+ rendered: bar

Actual:

- ignored: @bar
- ignoredUnescaped: @{bar}
- rendered: {{ foo }}

Note

This only appears to happen within text nodes, if each line is wrapped in an HTML tag then ignored and rendered are correct. ignoredUnescaped will still be wrong:

Source:

<p>ignored: @{{ foo }}</p>
<p>ignoredUnescaped: @{{{ foo }}}</p>
<p>rendered: {{ foo }}</p>

Expected:

+ <p>ignored: {{ foo }}</p>
+ <p>ignoredUnescaped: {{{ foo }}}</p>
+ <p>rendered: bar</p>

Actual:

+ <p>ignored: {{ foo }}</p>
- <p>ignoredUnescaped: @{bar}</p>
+ <p>rendered: bar</p>