foundation-emails icon indicating copy to clipboard operation
foundation-emails copied to clipboard

ejs <% %> tags get mangled when running through inliner

Open ryangall7 opened this issue 8 years ago • 3 comments

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.

ryangall7 avatar Jul 20 '16 02:07 ryangall7

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 avatar Jul 26 '16 20:07 kball

@kball Anything done on this ?

XAMelleOH avatar Jun 30 '17 14:06 XAMelleOH

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?

benydc avatar Sep 26 '18 10:09 benydc