foundation-emails
foundation-emails copied to clipboard
ejs <% %> tags get mangled when running through inliner
The inliner doesn't respect ejs tags as separate from html so a tag like <%= recipient.email %>
gets "fixed" to <%="" recipient.email="" %=""></%>
. Adobe campaign relies on these tags so its an issue for us.
As far as I can tell this is actually an issue with cheerio which does the underlying html parsing but short of digging through that I came up with a workaround by simply caching the ejs tags until the inlining and minification was complete and then adding them back. Not sure if this is the best way to fix the issue but it worked for me
here is the modified inliner() function in the gulpfile:
function inliner(css) {
var css = fs.readFileSync(css).toString();
var mqCss = siphon(css);
//cache ejs tags as they get messed up by cheerio
var ejsCache = [];
var pipe = lazypipe()
.pipe($.replace, /<%(.*?)%>/g, function (match) {
ejsCache.push(match);
return 'cachedejsstart' + (ejsCache.length-1) + 'cachedejsend';
})
.pipe($.inlineCss, {
applyStyleTags: false,
removeStyleTags: false,
removeLinkTags: false
})
.pipe($.replace, '<!-- <style> -->', `<style>${mqCss}</style>`)
.pipe($.htmlmin, {
collapseWhitespace: true,
minifyCSS: true
})
.pipe($.replace, /cachedejsstart(\d*)cachedejsend/g,function (match, num) {
return ejsCache[parseInt(num)];
});
return pipe();
}
note: inky also messes with these tags, but thats easily fixed by wrapping them in the <raw>
tag.
Thanks for the bug report! I'm working on a change for the way the inliner is integrated into inky that will allow the <raw>
tag to hide things from the inliner as well.
@kball Anything done on this ?
I have an issue where I cannot build with EJS variables, error with:
[13:43:19] 'inline' errored after 1.05 s
[13:43:19] Error in plugin "gulp-inline-css"
Message:
Parse Error: <%= first_name="" %="">,
Is there a fix for this?